Figma to Flutter MCP server

Figma to Flutter MCP Server is a tool that helps you leverage Figma design data in your AI coding assistant to implement Flutter UI more efficiently. It provides a communication bridge between Figma's rich design data and your coding environment, making it easier to translate designs into Flutter code.

Installation

Prerequisites

• Node.js 18+
• Figma API Key
• Cursor AI IDE (or other MCP-compatible tool)
• Flutter SDK

Setting Up Figma API Key

You'll need a Figma access token to use this server:

1. Visit your Figma account settings
2. Navigate to the Personal Access Tokens section
3. Generate a new token with appropriate permissions
4. Copy the token for use in your MCP configuration

Setting Up in Cursor

To configure the MCP server in Cursor:

1. Press CMD + Shift + P (or Ctrl + Shift + P on Windows)
2. Type "Open MCP Settings"
3. Click on "Add new MCP"
4. Add the configuration based on your operating system:

For MacOS/Linux:

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

For Windows:

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

Note: Make sure to replace YOUR-API-KEY with your actual Figma API key.

Local Testing Setup

For local development and testing:

# Clone the repository
git clone https://github.com/mhmzdev/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 configure your MCP client with:

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

Usage

Basic Workflow

The Figma Flutter MCP can help you with several design-to-code tasks:

1. Setting Up Theme & Typography

Place theme colors and typography samples in dedicated Figma frames, then use:

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

Where <figma_link> is the URL of your frame (select the frame and press CMD/Ctrl + L to copy the link).

2. Widget Generation

For best results, use Figma Components:

Create this widget in flutter from figma COMPONENT link: <figma_link>, use named constructors for variants and break the files in smaller parts for code readability.

If you don't have components, you can use regular frames and instruct the AI to treat them as widgets.

3. Full Screen Generation

For complete screens:

Design this intro screen from the figma link <figma_link>, ensure the code is readable by having smaller files.

This will export image assets to the assets/ directory and update pubspec.yaml accordingly.

4. Asset Exports

For individual assets:

Export this image asset from figma link: <figma_link>

For SVG assets:

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

Tips for Better Results

For SVG Assets

If SVG exports aren't working properly when generating screens:

• Place SVGs in separate frames or groups
• Ensure SVGs are properly grouped in Figma
• Export SVGs separately with dedicated commands

AI Agent Configuration

Create custom instruction files for your AI coding agents:

• Cursor: .cursor/rules/fluttering.mdc
• Claude: CLAUDE.md
• Gemini CLI: GEMINI.md

Limitations

• Best for MVPs and smaller projects rather than large-scale production apps
• Results depend on the quality of your Figma design (auto layouts, proper frame usage)
• Heavy usage may trigger Figma API rate limits
• SVG export requires properly structured vector elements in Figma

The server extracts component data and screen structure but doesn't generate complete Flutter code files directly - it provides guidance that your AI coding assistant uses to create the code.

How to install this MCP server

For Claude Code

To add this MCP server to Claude Code, run this command in your terminal:

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

See the official Claude Code MCP documentation for more details.

For Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > Tools & Integrations and click "New MCP Server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

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

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explicitly ask the agent to use the tool by mentioning the tool name and describing what the function does.

For Claude Desktop

To add this MCP server to Claude Desktop:

1. Find your configuration file:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json
• Linux: ~/.config/Claude/claude_desktop_config.json

2. Add this to your configuration file:

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

3. Restart Claude Desktop for the changes to take effect