Figma to Flutter
Enables AI coding agents to extract Figma design data and convert it into Flutter widgets and screens. Supports theme setup, component analysis, asset exports, and provides Flutter implementation guidance from Figma designs.
What is Figma to Flutter?
Figma to Flutter is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to enables ai coding agents to extract figma design data and convert it into flutter widgets and screens. supports theme setup, component analysis, asset exports, and provides flutter implementation guid...
Enables AI coding agents to extract Figma design data and convert it into Flutter widgets and screens. Supports theme setup, component analysis, asset exports, and provides Flutter implementation guidance from Figma designs.
This server falls under the Coding Agents category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- Enables AI coding agents to extract Figma design data and co
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx figma-to-flutter-mcp-serverConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Figma to Flutter
Figma to Flutter MCP Server bridges Figma design files and Flutter code generation by giving AI coding agents structured access to Figma's API. It extracts layout, styling, dimensions, colors, typography, component variants, and screen metadata from any Figma file, then provides Flutter-specific implementation guidance — suggesting widgets, screen scaffolds, and asset export paths — so the AI agent can write accurate Flutter code without guessing at design intent. Flutter developers using Cursor, Claude, or other AI coding tools use this server to translate Figma components and full screens into idiomatic Flutter widgets in a fraction of the manual time.
Prerequisites
- Node.js 18 or higher
- A Figma account with a Personal Access Token (generated at figma.com under Account Settings > Personal Access Tokens)
- Flutter SDK installed (for testing generated code)
- An MCP-capable AI coding client: Cursor, Claude Desktop, or another tool with MCP support
- Access to the Figma files you want to convert (the token must have read access)
Obtain a Figma Personal Access Token
Log in to Figma, go to Account Settings > Personal Access Tokens, and generate a new token with read access. Copy the token — you will need it in the MCP configuration.
Add to Cursor MCP settings
Press CMD+Shift+P in Cursor, type 'Open MCP Settings', click 'Add new MCP', and paste the JSON config. Replace YOUR-API-KEY with your actual Figma token.
{
"mcpServers": {
"Figma Flutter MCP": {
"command": "npx",
"args": ["-y", "figma-flutter-mcp", "--figma-api-key=YOUR-API-KEY", "--stdio"]
}
}
}Add to Claude Desktop configuration
Open ~/Library/Application Support/Claude/claude_desktop_config.json and add the server entry with your Figma API key in the args.
{
"mcpServers": {
"figma-flutter-mcp": {
"command": "npx",
"args": ["-y", "figma-flutter-mcp", "--figma-api-key=YOUR-API-KEY", "--stdio"]
}
}
}Set up Flutter theme from Figma
In Figma, create a frame containing your color palette and typography samples. Select the frame, copy its link (CMD+L on desktop or copy URL on web), and ask your AI assistant to set up the Flutter theme from that link.
Generate a Flutter widget from a Figma component
Select a component in Figma, copy its link, and prompt the AI to create a Flutter widget from it. The server extracts structure, variants, and styling guidance so the AI can write the widget code accurately.
Generate a full Flutter screen from a Figma frame
Select a screen frame in Figma, copy its link, and ask the AI to implement the screen in Flutter. Image assets will be auto-exported to an assets/ directory and pubspec.yaml will be updated.
Figma to Flutter Examples
Cursor / Claude Desktop MCP configuration
Full JSON config block for adding the Figma Flutter MCP server. Pass your Figma Personal Access Token as the --figma-api-key argument.
{
"mcpServers": {
"Figma Flutter MCP": {
"command": "npx",
"args": ["-y", "figma-flutter-mcp", "--figma-api-key=figd_your_token_here", "--stdio"]
}
}
}Prompts to try
Example prompts that exercise theme setup, component generation, screen generation, and asset export using Figma file links.
- "Setup Flutter theme from <figma_link> including Colors and Typography"
- "Create this widget in Flutter from Figma component link: <figma_link>, use named constructors for variants"
- "Design this intro screen from the Figma link <figma_link>, keep files small and readable"
- "Export this image asset from Figma link: <figma_link> and add it to the assets folder"
- "Analyze the navigation structure of this Figma screen and suggest the Flutter Scaffold layout"Troubleshooting Figma to Flutter
401 Unauthorized error when the server tries to fetch Figma data
Verify your Figma Personal Access Token is valid and has not expired. Tokens are scoped — ensure the token was generated with read access. Regenerate the token at figma.com > Account Settings > Personal Access Tokens and update --figma-api-key in your MCP config.
Tool calls fail with 'Figma API key setup is not working' error after an npm update
npx can cache an older version of figma-flutter-mcp. Clear the npx cache with 'npx clear-npx-cache' or specify the exact version: replace 'figma-flutter-mcp' with 'figma-flutter-mcp@latest' in your args to force the newest release.
SVG assets are missing or broken in the generated Flutter screen
SVG export from Figma requires the assets to be image nodes, not vector groups. Per the README, if SVG assets do not work, convert them to PNG in Figma before exporting, or use the dedicated asset export prompt to handle them separately from screen generation.
Frequently Asked Questions about Figma to Flutter
What is Figma to Flutter?
Figma to Flutter is a Model Context Protocol (MCP) server that enables ai coding agents to extract figma design data and convert it into flutter widgets and screens. supports theme setup, component analysis, asset exports, and provides flutter implementation guidance from figma designs. It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Figma to Flutter?
Follow the installation instructions on the Figma to Flutter GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
Which AI clients work with Figma to Flutter?
Figma to Flutter works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Figma to Flutter free to use?
Yes, Figma to Flutter is open source and available under the MIT License license. You can use it freely in both personal and commercial projects.
Figma to Flutter Alternatives — Similar Coding Agents Servers
Looking for alternatives to Figma to Flutter? Here are other popular coding agents servers you can use with Claude, Cursor, and VS Code.
Dify
★ 142.2kProduction-ready platform for agentic workflow development.
Ruflo
★ 54.0k🌊 The leading agent orchestration platform for Claude. Deploy intelligent multi-agent swarms, coordinate autonomous workflows, and build conversational AI systems. Features enterprise-grade architecture, self-learning swarm intelligence, RAG integrat
Goose
★ 45.7kan open source, extensible AI agent that goes beyond code suggestions - install, execute, edit, and test with any LLM
Antigravity Awesome Skills
★ 38.3kInstallable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.
AgentScope
★ 25.5kBuild and run agents you can see, understand and trust.
Serena
★ 24.5kA coding agent toolkit that provides IDE-like semantic code retrieval and editing tools, enabling LLMs to efficiently navigate and modify codebases using symbol-level operations instead of basic file reading and string replacements.
Browse More Coding Agents MCP Servers
Explore all coding agents servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up Figma to Flutter in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use Figma to Flutter?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.