MCP Directory

How to add Figma to Flutter MCP Server to Windsurf

Bring Figma design data into your coding agent to implement designs the Flutter way. Paste the config into ~/.codeium/windsurf/mcp_config.json and restart Windsurf.

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

Windsurf 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 Windsurf → Cascade → the hammer/MCP icon → Configure (or edit ~/.codeium/windsurf/mcp_config.json).
  2. 2Paste the Figma to Flutter MCP Server config below.
  3. 3Fill in placeholder secrets, then save.
  4. 4Click Refresh in the MCP panel.
  5. 5Figma to Flutter MCP Server's tools become available to Cascade.

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 Windsurf

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

Where is the Windsurf config file?

Windsurf reads MCP servers from ~/.codeium/windsurf/mcp_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 Windsurf?

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