MCP Directory

How to add Figma to Flutter MCP Server to Cursor

Bring Figma design data into your coding agent to implement designs the Flutter way. Paste the config into ~/.cursor/mcp.json and restart Cursor.

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

Cursor 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 Cursor → Settings → MCP → Add new MCP server (or edit ~/.cursor/mcp.json directly).
  2. 2Paste the Figma to Flutter MCP Server config below into the "mcpServers" object.
  3. 3Fill in placeholder secrets, then save.
  4. 4Cursor reloads MCP servers automatically — check Settings → MCP for a green status dot.
  5. 5Ask Cursor to use one of Figma to Flutter MCP Server's tools to confirm it's connected.

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 Cursor

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 + Cursor FAQ

Where is the Cursor config file?

Cursor reads MCP servers from ~/.cursor/mcp.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 Cursor?

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