Introduction#

Design and development often live in two different worlds — but what if your AI tools could bridge them seamlessly? That’s exactly what the Model Context Protocol (MCP) makes possible. By connecting Figma (your creative design hub) and Dart (your Flutter development engine) directly to your AI environment, MCP lets you work faster, smarter, and with far less context switching.

Imagine selecting a frame in Figma and instantly generating a responsive Flutter widget — or asking your AI to run Dart analysis, fix errors, and reformat code — all in one chat. No manual exports, no switching apps, no friction.

In this guide, you’ll learn how to:

• Understand what MCP is and why it’s a game-changer.
• Connect Figma and Dart MCP servers to your favorite AI tools like Cursor, Gemini, and Codex.
• Use real-world prompt examples to turn designs into production-ready Flutter code.

Let’s dive into how you can boot up your productivity with Figma + Dart MCP.

1) MCP in one minute#

MCP (Model Context Protocol) is a standardized way for AI assistants to safely plug into outside tools and data—think USB‑C for AI. Instead of bespoke integrations, your AI client (Cursor, Gemini, Codex, etc.) speaks MCP to “servers” that expose tools (and sometimes resources) such as Figma, Dart/Flutter, GitHub, databases and more. (Model Context Protocol)

Why it matters: the same Figma and Dart servers you configure once can be reused across clients and models, which cuts setup time and keeps your workflow consistent.

2) What each server gives you#

3) Your base configuration (what you already use)#

You shared this JSON:

1
{
2
  "mcpServers": {
3
    "Figma": {
4
      "url": "https://mcp.figma.com/mcp",
5
      "headers": {}
6
    },
7
    "dart": {
8
      "command": "dart",
9
      "args": ["mcp-server"]
10
    }
11
  }
12
}

That is indeed the right shape: Figma is an HTTP/remote MCP, while Dart is a local stdio MCP. Below are exact, client‑specific setups that use this same intent.

4) Set it up in Cursor#

Where config lives

• Project‑specific: ./.cursor/mcp.json
• Global (all projects): ~/.cursor/mcp.json (GitHub)

Steps

1. In Cursor: Settings → Tools & Integrations → MCP → Add Custom MCP / New MCP Server (opens/edit the config). (dart.dev)
2. Paste a minimal, working config:

1
{
2
  "mcpServers": {
3
    "Figma": {
4
      "url": "https://mcp.figma.com/mcp"
5
    },
6
    "dart": {
7
      "command": "dart",
8
      "args": ["mcp-server", "--force-roots-fallback"]
9
    }
10
  }
11
}

The Dart team recommends --force-roots-fallback for clients that don’t set MCP “roots” properly; Cursor sometimes benefits from this flag. (dart.dev)

3. Restart Cursor, then open Settings → Tools & Integrations → MCP Tools. A green dot indicates the server is connected. If not, validate JSON, restart, and check logs. (GitHub)

Notes

• You can also click “Add to Cursor” links from some docs to auto‑install servers. (dart.dev)
• For remote HTTP servers, Cursor supports streamable HTTP (SSE) in recent versions. (GitHub)

5) Set it up in Gemini#

Gemini supports MCP via the Gemini CLI and Gemini Code Assist (Agent mode uses the CLI under the hood). (dart.dev)

Where config lives

• Global: ~/.gemini/settings.json
• Project: ./.gemini/settings.json (dart.dev)

Option A — Edit JSON directly

1
{
2
  "mcpServers": {
3
    "Figma": {
4
      "url": "https://mcp.figma.com/mcp"
5
    },
6
    "dart": {
7
      "command": "dart",
8
      "args": ["mcp-server"]
9
    }
10
  }
11
}

Option B — Use the CLI helper

1
# Add Dart (stdio)
2
gemini mcp add dart dart mcp-server
3

4
# Add Figma (remote HTTP)
5
gemini mcp add Figma https://mcp.figma.com/mcp

Then in the CLI or Code Assist’s Agent chat, type /mcp to see connected servers and tools. The CLI supports stdio/SSE/streamable HTTP transports and has handy gemini mcp list/remove commands. (Gemini CLI)

6) Set it up in Codex (CLI & IDE extension)#

Codex (the OpenAI developer tool) is an MCP client across both its CLI and IDE extension. You can configure MCP via the CLI or by editing the TOML config. (OpenAI Developers)

Where config lives

• ~/.codex/config.toml (shared by the CLI and the IDE extension). (OpenAI Developers)

Option A — CLI

1
# Add Figma (remote HTTP)
2
codex mcp add figma -- https://mcp.figma.com/mcp
3

4
# Add Dart (stdio)
5
codex mcp add dart -- dart mcp-server

Option B — Edit TOML

1
# Enable the newer RMCP client if you need OAuth for HTTP servers
2
experimental_use_rmcp_client = true
3

4
[mcp_servers.figma]
5
url = "https://mcp.figma.com/mcp"
6

7
[mcp_servers.dart]
8
command = "dart"
9
args = ["mcp-server"]

Inside the TUI, type /mcp to view active servers. Codex documents supported MCP features (stdio + streamable HTTP; bearer token; OAuth with RMCP) and TOML options if you need finer control. (OpenAI Developers)

7) Using the Figma server effectively#

• Desktop vs Remote Desktop runs at http://127.0.0.1:3845/mcp after you toggle it on in Figma’s Dev Mode. Remote is the hosted endpoint https://mcp.figma.com/mcp. Both are compatible with Cursor, Gemini CLI, and Codex. (Figma Help Center)

• Two ways to give context (a) Selection‑based: select a frame/layer in Figma, then ask your client to implement it. (b) Link‑based: copy the frame/layer link and paste it into your prompt. The client extracts the node id; it doesn’t “browse” the link. (Figma Help Center)

Prompt recipes (drop these into Cursor/Gemini/Codex once connected):

• “Generate a responsive Flutter widget for the selected frame. Use Material 3, map design tokens to theme.colorScheme and theme.typography, and explain any component substitutions.” (Figma Help Center)
• “From this node , extract all design variables and output a tokens.css (CSS variables) and a tokens.dart with a ThemeExtension.” (Figma Help Center)
• “Export all icons in the ‘/icons’ page as optimized SVGs; produce a manifest mapping icon names to files.” (Figma Help Center)

8) Using the Dart & Flutter server effectively#

The Dart/Flutter MCP server surfaces deep, actionable tools. Typical flows include analysis + fixes, package search/installation, test running, formatting, and runtime UI inspection. Requires Dart 3.9+; start with dart mcp-server. (dart.dev)

Prompt recipes (work everywhere once the server is connected):

• “Check for and fix static and runtime analysis issues in this Flutter app. If you change code, explain what and why.” (dart.dev)
• “Find a chart package for a time‑series of button presses. Add it to pubspec.yaml, scaffold a ChartCard widget, and write a minimal usage example.” (dart.dev)
• “Run tests, summarize failures, and propose targeted fixes. Apply the smallest code change necessary and re‑run.” (dart.dev)
• “Inspect the widget tree around a RenderFlex overflow and suggest a layout fix (constraints, Expanded, Flexible, etc.). Apply and verify.” (dart.dev)

9) End‑to‑end: Figma → Flutter in one conversation#

1. Connect both servers per the client steps above.
2. In Figma, select the target frame (or copy its link).
3. In your AI client:

“Use the Figma MCP to fetch the selected frame’s structure and variables. Generate a HomeScreen Flutter widget with Material 3, mapping Figma tokens to ThemeData. Then use the Dart MCP to add any missing packages, run flutter analyze, format code, and fix remaining issues. Show a diff for each change.”

Behind the scenes, the client will call Figma tools to extract design context, then Dart tools to modify code, manage packages, analyze, and format. (Figma Help Center)

10) Quick client cheat‑sheet#

11) Figma specifics you’ll care about#

• Who can use: Remote server on all seats; desktop server requires Dev or Full seat (paid plans). Rate limits apply similarly to Figma REST API tiers. (Figma Help Center)
• Remote URL: https://mcp.figma.com/mcp. Desktop URL: http://127.0.0.1:3845/mcp after enabling in Dev Mode. (Figma Help Center)

12) Security + stability tips#

• Trust & auth: HTTP servers may require OAuth or tokens. Gemini CLI and Codex document how to pass headers/tokens or enable OAuth. Prefer environment variables over hardcoding secrets in JSON/TOML. (Gemini CLI)
• Be injection‑aware: Treat any tool that reads external content (web/docs) as untrusted; confirm actions before running. MCP’s flexibility also creates new attack surfaces if misconfigured. (IT Pro)
• Keep SDKs up to date: Dart MCP server is experimental and evolving—use Dart 3.9+ and expect rapid changes. (dart.dev)

13) Troubleshooting checklist#

• Nothing shows up? Validate JSON/TOML, restart the client, and check logs. In Cursor, the green‑dot indicator is your first smoke test. (GitHub)
• Dart tools missing? Add --force-roots-fallback to the dart mcp-server args in Cursor. (dart.dev)
• Gemini not seeing tools? Run gemini mcp list and confirm the path (~/.gemini/settings.json vs project .gemini/settings.json). (Gemini CLI)
• Codex OAuth for HTTP servers? Enable experimental_use_rmcp_client = true in config.toml. (OpenAI Developers)

14) Copy‑paste configs (final form)#

1
{
2
  "mcpServers": {
3
    "Figma": { "url": "https://mcp.figma.com/mcp" },
4
    "dart":  { "command": "dart", "args": ["mcp-server", "--force-roots-fallback"] }
5
  }
6
}

1
{
2
  "mcpServers": {
3
    "Figma": { "url": "https://mcp.figma.com/mcp" },
4
    "dart":  { "command": "dart", "args": ["mcp-server"] }
5
  }
6
}

1
experimental_use_rmcp_client = true
2

3
[mcp_servers.figma]
4
url = "https://mcp.figma.com/mcp"
5

6
[mcp_servers.dart]
7
command = "dart"
8
args = ["mcp-server"]

15) Ready‑to‑use prompt pack#

Design → Code (Figma)

1. “Implement the selected Figma frame as a Flutter screen. Reuse existing components where possible; otherwise scaffold new widgets and explain substitutions. Output a runnable diff.” (Figma Help Center)
2. “From this node , extract tokens (color, spacing, typography). Generate tokens.css + a ThemeExtension in Dart, wire both into the sample screen.” (Figma Help Center)

Dart/Flutter flow

1. “Analyze and fix static/runtime issues in this app. Keep edits minimal; cite each change and why.” (dart.dev)
2. “Search pub.dev for a lightweight chart lib; add it to pubspec.yaml, scaffold a LineChart widget, and create a demo route.” (dart.dev)
3. “Run tests; summarize failures; apply surgical fixes; re‑run and report.” (dart.dev)

Combo

• “Fetch Figma node , build the screen in Flutter, run format/analyze/tests, and propose any token mappings to close visual gaps. Produce a before/after screenshot plan and a commit message.” (Figma Help Center)