Figma-Flutter-MCP is an MCP server project whose goal is to enable coding agents to use Figma's rich design data to implement designs in a Flutter way. Through MCP (Model Context Protocol), it provides Figma files, data, components, and more to Cursor or other AI-driven tools.
Purpose
This tool is used to introduce Figma design information into the AI coding workflow and assist in generating Flutter code. The author emphasizes that it does not itself generate actual Flutter code files or screen code, but instead extracts and analyzes Figma node data, providing structure, suggestions, and implementation patterns to the AI, with the AI completing the code writing. Therefore, prompt quality directly affects result quality.
Main Capabilities
According to the official description, its capabilities include:
- Extract Figma node data: layout, styles, dimensions, colors, text content, etc.
- Analyze structure: child elements, nested components, visual importance.
- Provide guidance: suggest Flutter widgets and implementation patterns (does not generate actual Flutter code files).
- Extract screen metadata: device type, orientation, dimensions.
- Identify regions: header, footer, navigation, content area.
- Analyze navigation: tab bar, app bar, drawer, navigation elements.
- Provide Scaffold guidance: suggest Flutter screen structure (does not generate actual Flutter screens).
- Theme and font settings: it is recommended to place two frames in Figma containing theme colors and font examples.
- Widget generation: it is recommended to use COMPONENT in Figma; if there is no component, you can use FRAME and prompt the AI to treat it as a widget.
- Full-screen generation: if image assets exist (.png, .jpeg, .jpg, etc.), they will be automatically exported and placed into assets/ and pubspec.yaml.
- Asset export: image assets work automatically when generating screens; SVG assets will not work automatically if they are scattered or ungrouped, so it is recommended to export SVGs separately to an independent FRAME or GROUP.
Usage
You need to first create a Figma access token (Figma API Key / Access Token). The steps to configure MCP in Cursor are: press CMD + Shift + P (Ctrl on Windows), type "Open MCP Settings", click "Add new MCP", and paste the corresponding JSON object. If installed as an npm package, it must be kept updated to the latest version; otherwise, errors such as "unable to use tool calls" or "Figma API key settings not taking effect" may occur due to a cached older version.
For quick local testing, the server can be run over HTTP instead of stdio, and then the corresponding configuration can be added to the MCP client configuration. In addition, refer to CONTRIBUTING.md for detailed instructions.
Regarding the basic workflow, it is recommended to configure the instruction file according to the AI coding agent being used: use .cursor/rules/fluttering.mdc for Cursor, CLAUDE.md for Claude, and GEMINI.md for Gemini CLI. This way, the AI agent will combine the MCP output to ensure that the Flutter code meets the project requirements and structure.
To get a Figma link: on desktop, select a frame and press CMD + L or Ctrl + L; on the web, select a frame and copy the URL. A valid URL will contain the FILE ID and NODE ID parameters.
Applicable scenarios and limitations
The official recommendation is that at this stage it should not be used to develop scalable applications, but is more suitable for MVPs and smaller, more illustrative tasks. The quality of the design file affects the interpretation results; it is recommended to use auto layout, frames rather than groups, and to maintain consistent overall alignment. Heavy use may trigger Figma rate limits (such as HTTP 429); the server includes retries with backoff, but it cannot bypass Figma limits, and when limits are encountered, you should wait a few minutes and reduce the number of requests. SVG assets need to be exported in separate groups, otherwise they may not be processed automatically; during batch export, unexpected nodes may be captured.
This project is released under the MIT License, and the author is Muhammad Hamza. Related materials provide links to an Observable Flutter demo and video.
