Figma Dev Mode MCP: Let Your AI Coding Agent Read the Design Directly

Every design handoff workflow has the same gap: the designer has the ground truth locked inside Figma, and the AI coding agent has a screenshot, a copy-pasted spec, or nothing at all. Figma's official Dev Mode MCP server closes that gap. Instead of inferring layout from pixels, Claude Code, Cursor, and Windsurf now get the actual component tree, variable values, Code Connect mappings, and interactive SVG data — delivered as structured context over the Model Context Protocol.

The result isn't just faster implementation. It's implementation that is correct on the first attempt, because the model is reading the same source of truth the designer used to build the design.

Why pasting specs never worked

The old workflow: designer exports a spec from Figma's inspect panel, developer copies padding values and hex codes, pastes them into a chat with the AI agent, and hopes the model interpolates the rest correctly. At every step, information degrades. A hex code loses its semantic token name. A component reference becomes a visual description. An interaction annotation disappears entirely.

Screenshots added visual fidelity but took it away somewhere else: the model had to reverse-engineer layout math from pixels, and it had no idea whether the "Button" it was looking at mapped to your <Button variant='primary' /> component or a one-off div with inline styles.

What Figma MCP actually sends the model

The server exposes four categories of context, each optimized for a different question the model might ask:

1. Pattern metadata (components + variables)

This is the highest-value output. When you have Code Connect configured, every Figma component in the selection maps to a real import path and prop signature in your codebase. The model doesn't guess what component to use — it gets told: import { Button } from '@/components/ui/button', along with the exact variant and prop values from the design.

2. Screenshots

High-level and detailed visual context for interactive elements, motion cues, and spatial relationships that metadata can't fully express. These are used as a fallback when the structural data isn't sufficient — for example, complex gradients, custom illustrations, or animation timing.

3. Code generation

React + Tailwind by default. The server returns an interactive code representation of the selected frame or component that the model can reference or adapt directly. The generated code is not production-ready, but it's a concrete starting point that preserves spacing, typography scale, and color tokens.

4. Content extraction

Text strings, layer names, SVG data, and annotations. Useful for mapping copy to backend data fields, extracting icon SVGs without a separate export step, and reading developer annotations left by the designer.

5-minute setup: Claude Code, Cursor, Windsurf

The MCP server is available to Figma Dev or Full seat users and is free during the current beta period.

Claude Code

# Add the Figma remote MCP server to Claude Code
claude mcp add figma --transport http https://figma.com/api/mcp/v1/sse \
  --header "Authorization: Bearer YOUR_FIGMA_TOKEN"

# Verify it's connected
claude mcp list

Replace YOUR_FIGMA_TOKEN with a personal access token from Figma's settings (Settings → Account → Personal access tokens). The token needs the file_content:read and dev_resources:read scopes.

Cursor and Windsurf

{
  "mcpServers": {
    "figma": {
      "transport": "http",
      "url": "https://figma.com/api/mcp/v1/sse",
      "headers": {
        "Authorization": "Bearer YOUR_FIGMA_TOKEN"
      }
    }
  }
}

Restart the IDE after saving. You'll see the Figma tools appear in the MCP tools panel within a few seconds.

Code Connect: the accuracy multiplier

Without Code Connect, the MCP server gives the model visual structure and design tokens but no link between Figma components and your actual codebase. With Code Connect, each component carries its real import path and prop schema — which means the model generates code against the components you've actually built, not components it invents.

import figma from "@figma/code-connect";

figma.connect("https://www.figma.com/design/YOUR_FILE/...", {
  // Map Figma component to the real import
  imports: ["import { Button } from '@/components/ui/button'"],

  // Map Figma variant properties to component props
  props: {
    variant: figma.enum("Variant", {
      Primary: "primary",
      Secondary: "secondary",
      Ghost: "ghost",
    }),
    size: figma.enum("Size", {
      Small: "sm",
      Medium: "md",
      Large: "lg",
    }),
    disabled: figma.boolean("Disabled"),
    label: figma.string("Label"),
  },

  // The example the model will reference
  example: ({ variant, size, disabled, label }) => (
    <Button variant={variant} size={size} disabled={disabled}>
      {label}
    </Button>
  ),
});

The upfront investment in Code Connect annotations pays off immediately: every time an AI agent reads a Figma frame containing that component, it gets the exact import and prop syntax, not a best guess. Across a design system with 30–50 components, this eliminates most of the "wrong component name" and "invented prop" errors that slow implementation reviews.

Three workflows that ship faster

1. New screen implementation

Select a complete screen in Figma, then ask Claude Code (or your AI agent of choice) to implement it. The MCP server provides the full component tree, variable values, and Code Connect mappings. The agent can implement the screen in one pass without asking which components to use or what the spacing values should be.

Implement the /onboarding/step-2 screen from Figma.
Use the Figma MCP tools to read the current selection.
Map all components to our existing design system imports.
Output a Next.js page component with Tailwind classes.

2. Design diff review

When the designer updates a component, select the new version in Figma and ask the agent to diff it against the existing implementation and produce a minimal patch. Without MCP, this requires manually comparing screenshots or export files. With MCP, the agent reads the new token values and component structure directly and outputs a targeted edit.

3. Design token sync

Select the Variables panel in Figma, trigger the MCP tool to extract all variable definitions, and ask the agent to update your tailwind.config.ts to match. This keeps your Tailwind theme in sync with Figma's design tokens without a separate token export pipeline.

# Install the Figma MCP design-to-code skill from skills-hub.ai
# to get a pre-configured prompt template for all three workflows
npx @skills-hub-ai/cli install figma-mcp

Beta limits and when screenshots still win

The MCP server is still in beta, and a few rough edges are worth knowing before you depend on it in a production workflow.

Complex motion and interactions

Prototyping connections, smart animate transitions, and scroll behaviors are not yet exposed through the MCP tools. For screens where the design intent is primarily about motion — onboarding animations, loading states, gesture behaviors — you'll still need to share a recording or a written spec alongside the MCP context.

Grid and layout annotations

Auto-layout constraints and grid definitions are partially exposed but Figma has flagged these as areas for improvement in upcoming releases. Verify complex grid implementations against a screenshot before closing the design review.

File access scope

The remote server reads from whichever file is currently open and selected in the Figma browser or desktop app. Agents can't autonomously navigate to a file by URL — you need to have the correct frame selected before triggering an MCP tool call. For automated pipelines (CI design-diff checks, for example), the desktop server with scripted file-open is more reliable.

Despite the beta caveats, the core case is solid today: when you have Code Connect configured for your design system and you're implementing screens that compose known components, the MCP server eliminates most of the friction between "here's the design" and "here's the code." That's the workflow it was built for, and it delivers on it.

If you're ready to set it up, the fastest path is to install the official Figma plugin in your IDE of choice, then run the figma-mcp skill from skills-hub.ai to get a pre-built prompt template that walks through each phase of the implementation workflow.

npx @skills-hub-ai/cli install figma-mcp

Further reading: MCP 2026 protocol upgrade, all integration skills on skills-hub.ai, and the Claude Code vs Cursor comparison if you're choosing which agent to wire into your design handoff.