Figma Flutter MCP

🚀 Figma to Flutter MCP Server

This server enables you to utilize Figma's rich data in your coding agent and implement designs in a Flutter way, bridging the gap between design and code.

Use Cursor or other AI-powered tools to access Figma's rich files, data, components and much more using MCP server.

🚀 Quick Start

You may explore the detailed getting started docs or the demo video as a quick start. As it's a first release, there's a lot of room for improvements. You can check out the issues to see what else needs work or improvement.

✨ Features

• Rich Figma Data Access: Access Figma's files, data, components, etc. using AI-powered tools.
• Flutter Design Implementation: Assist in implementing Figma designs in Flutter.
• Multiple Language Support: Available in Korean, Japanese, Simplified Chinese, and Traditional Chinese.

📦 Installation

Prerequisites

• Node.js 18+
• Figma API Key (Access Token)
• Cursor AI IDE with MCP support
• Flutter SDK

Steps for Local Testing

# Clone and setup
git clone <your-repo-url> figma-flutter-mcp
cd figma-flutter-mcp
npm install

# Create .env file with your Figma API key
echo "FIGMA_API_KEY=your-figma-api-key-here" > .env

# Start HTTP server for local testing
npm run dev

Then add this to your MCP client configuration:

{
  "mcpServers": {
    "local-figma-flutter": {
      "url": "http://localhost:3333/mcp"
    }
  }
}

See CONTRIBUTING.md for detailed instructions.

💻 Usage Examples

🔑 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

{
  "mcpServers": {
    "Figma Flutter MCP": {
      "command": "npx",
      "args": ["-y", "figma-flutter-mcp", "--figma-api-key=YOUR-API-KEY", "--stdio"]
    }
  }
}

Windows

{
  "mcpServers": {
    "Figma Flutter MCP": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-flutter-mcp", "--figma-api-key=YOUR-API-KEY", "--stdio"]
    }
  }
}

⚠️ Important Note

If you've installed this MCP as an npm package, make sure to keep it updated to the latest version. Sometimes, it caches the old version and keeps showing you errors like "Not being able to use tool call" or "Figma API key setup is not working", etc.

🚀 Quick Start for Local Testing

For quick local testing, you can run the server via HTTP instead of stdio. See the installation section for details.

📚 Documentation

🧱 Basic Workflow

🤖 AI Coding Agent Assistance

For better results, you can set up some instructions in the 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 meets your project requirements and structure. You can check out an example of cursor rules that was used for testing.

1. Setup Theme & Typography: The most efficient way is to put two frames in Figma with Theme colors and Typography samples on them. For instance:

• Figma Desktop: Select the frame and press CMD + L or Ctrl + L.
• Figma Web: Select the frame and copy the URL.

💡 Usage Tip

The valid URL will contain a FILE ID and NODE ID params.

"Setup flutter theme from <figma_link> including Colors and Typography.

2. Widget Generation: The most efficient way is to use COMPONENTS in Figma. For example:

This one has 8 variants. You may prompt whether you want to have variants or not.

"Create this widget in flutter <figma_link>, setup only 2 variants for now and break the files into smaller parts for code readability.

If you do not have COMPONENTS in Figma, you can use FRAME. Just prompt the AI that you want this to be a widget, and it will handle the rest.

3. Full Screen Generation: If there are any IMAGE ASSETS available, it will export them and put them in assets/ along with pubspec.yaml.

"Create full screen from this figma link <figma_link>, ensure the code is readable by having smaller files.

4. Assets Export:

• Image Assets: Will work automatically when generating screens.

"Export this image asset from figma <figma_link>

• SVG Assets: Will NOT work automatically. See the explanation below.

"Export this as an SVG asset from Figma: <figma_link>

⚠️ Why SVG assets don't work with screen generation

In Figma, vectors include icons and pen-tool shapes, so bulk exports may grab unintended nodes. It is recommended to export SVGs separately. This process still saves you a lot of time by exporting them to your assets/svg/ directory and updating your pubspec.yaml.

📋 Table of Contents

• 🎥 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
  • ⚠️ Why SVG assets don't work with screen generation
• ⚠️ Disclaimers
• 🙌🏼 Acknowledgments
• 🧱 Other frameworks
• 🔑 License
• 🙋‍♂️ Author
  • Muhammad Hamza

🎥 Video Demo

Showcased almost all the features of Figma Flutter MCP with real Figma design.

• English: https://youtu.be/o_GezwAlXlU
• Urdu/Hindi: https://youtu.be/mepPWpIZ61M

📚 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 it just helps the AI write Flutter code, it means the better your prompt, the better results you'll get.

⚠️ Disclaimers

• Figma Design: Since we're using Figma's API to fetch the node and its details, a better design will lead to better interpretation for the AI to consume, i.e., auto layouts, frame usage over group usage, and consistent alignment across the board.
• Use Case: At this stage, it's highly recommended not to use it to develop scalable apps. Instead, try and play with MVPs, smaller, and explanatory tasks.
• Rate limiting: Heavy usage may trigger Figma rate limits (e.g., HTTP 429). The server includes retry with backoff, but it does not bypass Figma limits. If you encounter rate limits, wait a few minutes and reduce the request volume.

🙌🏼 Acknowledgments

I came across Figma Context MCP by Graham Lipsman, which sparked my motivation to develop Figma to Flutter explicitly with features like:

• Assets exports
• Colors and Theme setups
• Widget tree and full screen building

Others are coming soon...

🧱 Other frameworks

If you want to develop this for React, Angular, React Native, Vue, or any other framework, I've added a detailed doc Figma Framework MCP that you can explore and get started. Meanwhile, I'll maintain a list here if someone's already doing this for framework-specific Figma's MCP servers.

🔑 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙋‍♂️ Author

Muhammad Hamza

You can also follow my GitHub Profile to stay updated about my latest projects:

If you liked the repo, then kindly support it by giving it a star ⭐!

Copyright (c) 2025 MUHAMMAD HAMZA

Built with ❤️ for designers and developers who want to bridge the gap between design and code.