ipIterPrompt
MCP serverDesign & AssetsVerified Last verified 2026-07-24

Figma Dev Mode MCP Server

by Figma

Figma's official MCP server exposes design context from the current selection or a node ID so a coding agent can generate implementation that matches the design. It provides tools for code context, images, and variable definitions, and is offered as a local desktop server (127.0.0.1:3845) and a remote server, using your design system as the source of truth.

Official page

Works with

Any MCP ClientClaude CodeClaude (Desktop & Web)CursorWindsurfClineVS CodeZed

The Model Context Protocol (MCP).

When to use it

  • Implementing a Figma frame in code with the design as ground truth
  • Keeping generated components aligned with design variables and tokens
  • Reducing back-and-forth translating a mockup into markup

When not to

  • When you have no design-system structure — output quality tracks how well the file is organized

What it does

  • Pull code context for a selected frame or component
  • Retrieve images and design variable definitions
  • Use design tokens/variables so generated code matches the system

How to install

Setup steps with copy-paste config. Sources are cited under each method.

Desktop server (Figma app)

Requires: The Figma desktop app · A Dev or Full seat on a paid plan · An MCP host (VS Code, Cursor, Windsurf, Claude Code, …)

  1. Enable the server in Figma

    In the Figma desktop app, turn on the Dev Mode MCP server; it runs locally.

    url
    http://127.0.0.1:3845/mcp

  2. Point your host at the local endpoint

    Add the local MCP URL to your editor/agent's MCP settings, then select a frame in Figma and prompt for implementation.

    json
    {
  "mcpServers": {
    "figma": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

How to prompt it

Copy-paste prompts written to exercise this plugin, with what to expect.

Implement a selected frame

You've selected a card component in Figma and want React + CSS.

Using the current Figma selection, generate a React component that matches the layout, spacing, and colors, and use the design variables where they exist.

What to expect: The agent pulls the selection's code context and variables and produces a component aligned to the design system rather than eyeballed values.

  • Select a single, well-named component; tightly-scoped selections produce cleaner output.

Tips for getting the most out of it

  • Well-structured files with named components and variables give the agent far better context.
  • The local desktop server keeps design data on your machine; a remote server is also available.

Prompts to pair with it

Real prompts from the IterPrompt library you can copy or run.

Promptpersona
4.9

Excel Data to Figma Presentation Designer

Turn any AI chat into an excel data to figma presentation designer with this community persona prompt.

2,667 copiesOpen ↗
Promptpersona
4.9

Claude Code Statusline Design

Turn any AI chat into a claude code statusline design with this community persona prompt.

4,945 copiesOpen ↗
Promptpersona
4.6

Redesign Front-End with Codex

Turn any AI chat into a redesign front-end with codex with this community persona prompt.

479 copiesOpen ↗
Skillsubagent
4.9

UI Designer Agent

Expert UI designer specializing in component creation, layout systems, and visual design implementation. Masters modern design patterns, responsive layouts, and design-to-code work

3,509 copiesOpen ↗
Skillskill
4.8

Openapi Spec Generation

Generate and maintain OpenAPI 3.1 specifications from code, design-first specs, and validation patterns. Use when creating API documentation, generating SDKs, or ensuring API contr

1,580 copiesOpen ↗
Skillsubagent
4.5

Documentation Generation Docs Architect Agent

Creates comprehensive technical documentation from existing codebases. Analyzes architecture, design patterns, and implementation details to produce long-form technical manuals and

1,134 copiesOpen ↗
See more prompts in the library

Frequently asked questions

Do I need a paid Figma seat?+

The desktop server requires a Dev or Full seat on a paid plan; a remote server is available more broadly. Confirm current seat/plan requirements on Figma's docs.

Pairs well with

Claude

Anthropic

Anthropic's AI assistant, strong at long-context reasoning and writing.

AI Assistants

Gemini

Google

Google's multimodal AI assistant.

AI Assistants

Related guides

Role guide

AI Prompts for Software Developers

Use AI for code review, debugging, testing, and documentation — with prompts and agent skills that keep coding agents reliable.

Sources & verification

The facts on this page and where they come from. Anything unverified is labeled — we'd rather say "unknown" than guess.

Install steps, pricing, and availability change often. Always confirm on the official page before relying on setup details.