Figma to Flutter MCP Server

Bring Figma design data into your coding agent to implement designs the Flutter way.

Unverified

stdio (local)

API key

TypeScript

View repo 236 npm

Add to your client

Copy the config for your MCP client and paste it into its config file.

Install / run

npx -y figma-flutter-mcp --figma-api-key=YOUR-API-KEY --stdio

Paste into ~/Library/Application Support/Claude/claude_desktop_config.json

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

Step-by-step guides: Add to Claude Desktop · Add to Cursor · Add to Windsurf

Before you start

Node.js 18+
A Figma personal access token (free Figma account is enough; no Dev Mode required)
An MCP-capable AI IDE/agent such as Cursor
Flutter SDK (to run the generated code)

About Figma to Flutter MCP Server

An MCP server that feeds AI coding agents Figma design data (components, screens, theme colors, typography, assets) and returns Flutter-specific implementation guidance rather than generating code files itself. Built from scratch (not a fork of Figma Context MCP) with a Flutter-first analysis layer that works on unpublished files without a Figma Dev Mode subscription.

Tools & capabilities (10)

analyze_figma_component

Analyze a Figma component or component set to extract layout, styling, and structure information for Flutter widget creation. Use analyze_full_screen for complete screen layouts.

list_component_variants

List all variants in a Figma component set to help with variant selection.

analyze_full_screen

Analyze a complete Figma screen/frame to extract layout, sections, navigation, and structure information for Flutter screen implementation.

inspect_screen_structure

Get a quick overview of screen structure, sections, and navigation elements.

extract_theme_colors

Extract colors from a Figma theme frame containing color swatches with labels.

inspect_theme_frame

Inspect the structure of a theme frame to understand its contents before extraction.

extract_theme_typography

Extract typography styles from a Figma theme frame containing text samples with different styles.

inspect_typography_frame

Inspect the structure of a typography frame to understand its text contents before extraction.

export_flutter_assets

Export images from Figma nodes and set up the Flutter assets directory with pubspec.yaml.

export_svg_flutter_assets

Export SVG assets from Figma nodes. Detects SVG content by vector percentage (nodes with >30% vector content are treated as SVG) and handles nested GROUP/FRAME structures with mixed content.

When to use it

Set up a Flutter ColorScheme/ThemeData and TextTheme from dedicated Figma theme and typography frames
Generate reusable Flutter widgets from Figma components, including handling variants via named constructors
Scaffold a full Flutter screen layout (header, footer, navigation, content areas) from a Figma frame
Export image and SVG assets from Figma into a Flutter assets/ directory with pubspec.yaml updates
Speed up MVPs and smaller Flutter tasks by giving the AI agent real design data instead of screenshots

Security notes

Requires a Figma personal access token, passed on the command line via --figma-api-key (or a FIGMA_API_KEY env var for local HTTP testing). Keep the token secret; treat the args/config as sensitive since the key is embedded. Heavy usage can hit Figma rate limits (HTTP 429); the server retries with backoff but does not bypass Figma limits.

Figma to Flutter MCP Server FAQ

Does it generate Flutter code automatically?

No. The server extracts Figma data and provides Flutter-specific guidance; the AI coding agent (e.g. Cursor) writes the actual Flutter code. Better prompts yield better results.

Do I need a paid Figma plan or Dev Mode?

No. A free Figma account with a personal access token is enough. The server reads raw node data via Figma's basic node API, so it works on unpublished files without Dev Mode.

How do I configure it in Cursor?

Open MCP Settings, add a new MCP, and paste the mcpServers config that runs npx -y figma-flutter-mcp --figma-api-key=YOUR-API-KEY --stdio. On Windows wrap it with cmd /c. Replace YOUR-API-KEY with your Figma token.

Why does it sometimes show errors after an update?

If installed as an npm package it can cache an old version; keep it updated to the latest version to avoid errors like tool calls not working or the Figma API key not being recognized.

Why don't my SVG assets export cleanly during screen generation?

In Figma, vectors include icons and pen-tool shapes, so bulk exports may grab unintended nodes. Export SVGs separately by isolating them into their own FRAME or GROUP.

#figma #flutter #design-to-code #design-tokens #ui #cursor #assets

Alternatives to Figma to Flutter MCP Server

Compare all alternatives →

Figma Context MCP (figma-developer-mcp)

Design & Media

15k

Popular community server that feeds Figma layout data to coding agents via a Figma API token.

Verified

stdio (local)

API key

TypeScript

2 tools

Updated 23 days agoRepo

21st.dev Magic MCP

Design & Media

5.2k

Generate beautiful, modern UI components from natural-language descriptions inside your IDE.

Unverified

stdio (local)

API key

TypeScript

4 tools

Updated 4 months agoRepo

Shadcn UI v4 MCP Server

Design & Media

2.8k

Give AI assistants full access to shadcn/ui v4 components, blocks, demos, and metadata across React, Svelte, Vue, and React Native.

Unverified

stdio (local)

API key

TypeScript

7 tools

Updated 1 month agoRepo

Compare Figma to Flutter MCP Server with:

vs Figma Context MCP (figma-developer-mcp)vs 21st.dev Magic MCP vs Shadcn UI v4 MCP Server vs MiniMax MCP Server (Official)