mhmzdev/Figma-Flutter-MCP

🌐 Available in:
한국어 (Korean) |
日本語 (Japanese) |
简体中文 (Simplified Chinese) |
繁體中文 (Traditional Chinese)
Utilize Figma's rich data in your coding agent. Implement designs in Flutter way!
Use Cursor or other AI-powered tools to access Figma's rich files, data, components and much more using MCP server.
📋 Table of Contents
- 🦋 Observable Flutter #70
- 🎥 Short Video Demo
- 📝 Getting Started
- 📚 How it works
- 🛠️ Usage
- 🔑 Figma API Key
- 🏹 MCP in Cursor
- 🚀 Quick Start for Local Testing
- 🧱 Basic Workflow
- 🤖 AI Coding Agent Assistance
- ⚠️ If SVG assets don’t work with screen generation
- ⚠️ Disclaimers
- 🙌🏼 Acknowledgments
- 🧱 Other framworks
- 🔑 License
- 🙋‍♂️ Author
- Muhammad Hamza
🦋 Observable Flutter #70
Featured on Observable Flutter with enhanced explanation and demo:
🎥 Short Video Demo
Showcased almost all the features of Figma Flutter MCP with real figma design.
- English: https://youtu.be/lJlfOfpl2sI
- Urdu/Hindi: https://youtu.be/mepPWpIZ61M
📝 Getting Started
You may explore the detailed getting started docs or the demo video as quick-start. As its a First Release hence there's a lot of room for improvements so you can checkout the issues to see what else there's to work or to improve.
📚 How it works | Details Here
1. Components/Widgets
- ✅ Extract Figma node data: Layout, styling, dimensions, colors, text content, etc.
- ✅ Analyze structure: Child elements, nested components, visual importance
- ✅ Provide guidance: Suggest Flutter widgets and implementation patterns
- ❌ NOT generating actual Flutter code files
2. Screens
- ✅ Extract screen metadata: Device type, orientation, dimensions
- ✅ Identify sections: Header, footer, navigation, content areas
- ✅ Analyze navigation: Tab bars, app bars, drawers, navigation elements
- ✅ Provide Scaffold guidance: Suggest Flutter screen structure
- ❌ NOT generating actual Flutter screen
Since its just helping AI write Flutter code so it means the better your prompt will be the better results you'll get.
🛠️ Usage
Following steps shows a minimal usage and setup instructions:
🔑 Figma API Key
You will need to create a Figma access token to use this server. Instructions on how to create a Figma API access token can be found here.
🏹 MCP in Cursor
Once you've the FIGMA API KEY, you can setup the MCP in cursor as follows:
1. Press CMD + Shift + P (Ctrl on Windows)
2. Type "Open MCP Settings"
3. Click on "Add new MCP"
4. Paste the below json object
MacOS/Linux
Windows
> NOTE: If you've installed this MCP as npm package make sure to keep it updated to latest version. Sometimes, it caches the old version and keep showing you error like "Not being able to use tool call" or "Figma API key setup is not working" etc.
🚀 Quick Start for Local Testing
Prerequisites
- Node.js 18+
- Figma API Key (Access Token)
- Cursor AI IDE with MCP support
- Flutter SDK
For quick local testing, you can run the server via HTTP instead of stdio:
Then add this to your MCP client configuration:
See CONTRIBUTING.md for detailed instructions.
🧱 Basic Workflow
🤖 AI Coding Agent Assistance
For better results you can setup some instructions in following files as per your AI Coding Agent:
- Cursor: .cursor/rules/fluttering.mdc
- Claude: CLAUDE.md
- Gemini CLI: GEMINI.md
This way your AI agent will use the MCP's output and ensure the flutter code is as per your project requirements and structure. You can checkout an example of cursor rules that I used for testing this out.