Figma Flutter MCP Server

Community

Utilize Figma's rich data in your coding agent. Implement designs in Flutter way!

How to install ↓ Compare GitHub source repository ↗

Category: Other
Stars: ★ 244 Popular
Transport: stdio (local process) · Streamable HTTP
Runtime: Node.js 18+
Credentials: API key / credential required
License: MIT
Last commit: 7 months ago ⚠
Tools: 2

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.

Strongest · Documentation 16/20 Weakest · Reliability 10/20

Reliability

10/20

Security and permissions

12/20

Maintenance

16/20

Documentation

16/20

Setup experience

14/20

Why each score

Reliability 10/20: Limited implementation details (only README, no source code). README declares functions like component/screen extraction and asset export, but no tests or CI evidence. npm package name is available, startup command is clear (npx figma-flutter-mcp), but error handling and edge cases are not described. Per static calibration, reliability is capped at 12; given the documented core functionality but lack of verification, a score of 10 is given.
Security and permissions 12/20: Requires Figma API key, provided via CLI argument or .env file as per README; no mention of key storage or scoping. README mentions Figma rate limits and retry with backoff, but no data boundary or least privilege details. No malicious behavior or real secrets found in README. However, key handling details and permission scopes are unclear, so deduction applied. Score 12.
Maintenance 16/20: Repository is active, with 244 stars, 16 open issues, not archived. MIT license is clear. README lists roadmap and contributing guide. No commit frequency or release info, but maintenance signs are evident. No security response channel mentioned. Score 16.
Documentation 16/20: README is comprehensive, covering installation, API key setup, MCP config for Cursor, local testing, basic workflows (themes, components, screen generation, asset export), SVG caveats, disclaimers, and acknowledgments. There are demo videos and external doc links. However, tool parameter details and troubleshooting guide are missing. Score 16.
Setup experience 14/20: Requires Node.js 18+, Figma API key, and MCP client. Provides Cursor config examples and local HTTP testing method. Steps are clear, but it depends on external Figma key and service. No tests or CI evidence, so per static calibration setup is capped at 15. Score 14 because setup steps are documented but there are manual steps.

Static review · not runListed 2026-08-07

Read the FMRS scoring method →

Fit and risk

What it can accessUses the network

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

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

Setup

Before you start

Runtime：Node.js 18+

FIGMA_API_KEY requiredsecret A Figma personal access token created in your Figma account settings (used in the .env file for local HTTP testing).

Create a Figma access token.
In Cursor, open MCP settings (Cmd+Shift+P).
Click 'Add new MCP'.
Paste the config JSON (see install_config).
Ensure Node.js 18+ is installed.

.cursor/mcp.json

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

Shown for Cursor. Other clients may use a different file or key (VS Code uses "servers") — the configurator below converts it.

.vscode/mcp.json

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

Goes in your project's .vscode/mcp.json (VS Code uses a "servers" key).

Terminal

claude mcp add 'Figma Flutter MCP' -- npx -y figma-flutter-mcp --figma-api-key=YOUR-API-KEY --stdio

Run it in a terminal; replace any <…> placeholders with your own values first.

Generate and validate client config

Check that it works

After adding the MCP config in Cursor's MCP settings, check the tool list for extract_figma_components and extract_figma_screens; alternatively paste a Figma link and ask to extract a component — returned layout and color data confirms the connection.

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.

Things to try

Once connected, you can ask your AI assistant things like:

Set up the Flutter theme from this Figma link including colors and typography: <figma_link>
Create this widget in Flutter from this Figma component link: <figma_link>, use named constructors for variants and break the files into smaller parts for readability.
Design this intro screen from the Figma link <figma_link>, keep the code readable with smaller files.
Export this image asset from the Figma link: <figma_link>

Tools 2

extract_figma_components read-only

Extract Figma component data: layout, styling, dimensions, colors, text content, etc., and analyze structure to suggest Flutter widget implementation patterns.

extract_figma_screens read-only

Extract Figma screen metadata: device type, orientation, dimensions, and identify sections and navigation elements to suggest Flutter screen structure.

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

Cursor

Claude DesktopPartial support

Listed from the project's documentation, not tested by this site.

Overview

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.

Similar servers

DuckDuckGo Search MCP Server 74 · B

MCP server providing web search and content fetching via DuckDuckGo

★ 1.5k · Tools 2 Compare with this →

Basic Memory 72 · B

Your AI never forgets again.

★ 4.1k · Tools 21 Compare with this →

Telegram MCP Server 70 · B

Telegram MCP server powered by Telethon to let MCP clients read chats, manage groups, and send/modify messages, media, contacts, and settings.

★ 1.8k · Tools 76 Compare with this →

Hostinger API MCP Server 70 · B

Official MCP server for Hostinger API.

★ 160 · Tools 100 Compare with this →

Compare with other MCP servers

Source revision 175c0427eca8 Data synced 2026-10-12 Read the FMRS scoring method