Best for
- Developers who want to quickly translate Figma designs into Flutter code
- Users of AI coding tools like Cursor
- MVPs and small-scale projects
- Extracting theme colors and typography from designs
F
Figma Flutter MCP Server
Community
Utilize Figma's rich data in your coding agent. Implement designs in Flutter way!
GitHub source repository ↗
68FMRS · C
This server provides Figma data to AI coding agents via MCP to help generate Flutter code. It requires a Figma API key and works with supported clients like Cursor. While it doesn't generate code files directly, it supplies essential design information to the AI.
The Figma Flutter MCP Server is an MCP server that provides coding agents (like Cursor) with Figma's design tokens to generate Flutter code. It extracts Figma node data (layout, styling, dimensions, colors, text content, etc.), analyzes component structures and screen metadata, and provides guidance for AI to implement designs in a Flutter-native way. It does not generate actual Flutter code files but gives suggestions for widgets and screen structures.
Tools
extract_figma_components
Extract Figma component data: layout, styling, dimensions, colors, text content, etc., and analyze structure to suggest Flutter widget implementation patterns.
extract_figma_screens
Extract Figma screen metadata: device type, orientation, dimensions, and identify sections and navigation elements to suggest Flutter screen structure.
Setup
- Create a Figma access token. 2. In Cursor, open MCP settings (Cmd+Shift+P). 3. Click 'Add new MCP'. 4. Paste the config JSON (see install_config). 5. Ensure Node.js 18+ is installed.
claude_desktop_config.json
{
"mcpServers": {
"Figma Flutter MCP": {
"command": "npx",
"args": [
"-y",
"figma-flutter-mcp",
"--figma-api-key=YOUR-API-KEY",
"--stdio"
]
}
}
}
Fit and risk
Not for
- Production-level development of large scalable apps
- Poorly structured Figma files (e.g., without auto-layout, heavy grouping)
- Scenarios requiring fully automatic code generation without AI guidance
Required permissions
- Requires access to Figma API to fetch node data (requires Figma API key)
- May export image or SVG assets
- Communicates with MCP clients via stdio or HTTP
Risks and side effects
- Figma API rate limiting (HTTP 429); the server retries but does not bypass limits
- Data quality depends on Figma design quality
- SVG export may pick up unintended nodes
- Generated code may not perfectly match design; AI adjustment needed
Troubleshooting
- If you encounter errors like 'Not being able to use tool call' or 'Figma API key setup is not working', the npm package might have cached an old version; update to the latest.
- Also, check that your Figma API key is valid and network connectivity is fine.
- If rate limited, wait a few minutes before retrying.
Use cases
Generate Flutter theme and typography from Figma designs
Convert Figma components to Flutter widget code
Transform Figma screens into Flutter screen structures
Export image and SVG assets
Supported clients
CursorFull support
Claude DesktopPartial support