MCP Directory

How to add Figma to Flutter MCP Server to Claude Desktop

Bring Figma design data into your coding agent to implement designs the Flutter way. Paste the config into ~/Library/Application Support/Claude/claude_desktop_config.json and restart Claude Desktop.

Last updated June 14, 2026 · 236★ · stdio · apikey

Claude Desktop config for Figma to Flutter MCP Server

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

Setup steps

  1. 1Open Claude Desktop → Settings → Developer → Edit Config (this opens ~/Library/Application Support/Claude/claude_desktop_config.json).
  2. 2Paste the Figma to Flutter MCP Server config below under the top-level "mcpServers" key.
  3. 3Fill in any placeholder secrets (API keys, paths) in the snippet.
  4. 4Save the file, then fully quit and reopen Claude Desktop.
  5. 5Open a chat and confirm Figma to Flutter MCP Server's tools appear under the 🔌 tools menu.

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)

What Figma to Flutter MCP Server can do in Claude Desktop

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.

Security

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 + Claude Desktop FAQ

Where is the Claude Desktop config file?

Claude Desktop reads MCP servers from ~/Library/Application Support/Claude/claude_desktop_config.json. Paste the Figma to Flutter MCP Server config there under the "mcpServers" key and restart the client.

Is Figma to Flutter MCP Server safe to use with Claude Desktop?

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.

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.

View repo Full Figma to Flutter MCP Server page