The Dev Mode MCP Server brings Figma directly into your workflow by providing important design information and context to AI agents generating code from Figma design files.

MCP Servers are part of a standardized interface for AI agents to interact with data sources using the Model Context Protocol.

With the server enabled, you can:

• Generate code from selected frames

  Select a Figma frame and turn it into code. Great for product teams building new flows or iterating on app features.

• Extract design context

  Pull in variables, components, and layout data directly into your IDE. This is especially useful for design systems and component-based workflows.

• Code smarter with Code Connect

  Boost output quality by reusing your actual components. Code Connect keeps your generated code consistent with your codebase.

  Learn more about Code Connect →

Step 1: Enable the MCP Server

1. Open the Figma desktop app and make sure you’ve updated to the latest version.
   
2. Create or open a Figma Design file.
3. In the upper-left corner, open the Figma menu.
4. Under Preferences, select Enable Dev Mode MCP Server.
   

You should see a confirmation message at the bottom of the screen letting you know the server is enabled and running.

Step 2: Set up your MCP client

Once the server is running locally on the Figma desktop app, MCP clients will be able to connect to your server. Follow the instructions for your specific client to add the Dev Mode MCP server.

{
  "mcpServers": {
    "Figma Dev Mode MCP": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

Step 3: Prompt your MCP client

The Dev Mode MCP server introduces a set of tools that help LLMs translate designs in Figma. Once connected, you can prompt your MCP client to access a specific design node.

There are two ways to provide Figma design context to your AI client:

Selection-based

1. Select a frame or layer inside Figma using the desktop app.
2. Prompt your client to help you implement your current selection.
   

Link-based

1. Copy the link to a frame or layer in Figma.
   
2. Prompt your client to help you implement the design at the selected URL.

MCP best practices

The quality of the generated code depends on several factors. Some controlled by you, and some by the tools you’re using. Here are some suggestions for clean, consistent output.

Structure your Figma file for better code

Provide the best context for your design intent, so the MCP and your AI assistant can generate code that’s clear, consistent, and aligned with your system.

• Use components for anything reused (buttons, cards, inputs, etc.)

• Link components to your codebase via Code Connect. This is the best way to get consistent component reuse in code. Without it, the model is guessing.

• Use variables for spacing, color, radius, and typography.

• Name layers semantically (e.g. CardContainer, not Group 5)

• Use Auto layout to communicate responsive intent.

  Tip: Resize the frame in Figma to check that it behaves as expected before generating code.

• Use annotations and dev resources to convey design intent that’s hard to capture from visuals alone, like how something should behave, align, or respond.

Write effective prompts to guide the AI

MCP gives your AI assistant structured Figma data, but your prompt drives the result. Good prompts can:

• Align the result with your framework or styling system
• Follow file structure and naming conventions
• Add code to specific paths (e.g. src/components/ui)
• Add or modify code in existing files instead of creating new ones
• Follow specific layout systems (e.g. grid, flexbox, absolute)

Examples:

• “Generate iOS SwiftUI code from this frame”
• “Use Chakra UI for this layout”
• “Use src/components/ui components”
• “Add this to src/components/marketing/PricingCard.tsx"
• “Use our Stack layout component”

Think of prompts like a brief to a teammate. Clear intent leads to better results.

Trigger specific tools when needed

The MCP supports different tools, and each one provides your AI assistant with a different kind of structured context. Sometimes, the assistant doesn’t automatically pick the right one, especially as more tools become available. If results are off, try being explicit in your prompt.

• get_code provides a structured React + Tailwind representation of your Figma selection. This is a starting point that your AI assistant can translate into any framework or code style, depending on your prompt.
• get_variable_defs extracts the variables and styles used in your selection (color, spacing, typography, etc). This helps the model reference your tokens directly in the generated code.

For example, if you’re getting raw code instead of tokens, try something like:

• “Get the variable names and values used in this frame.”

Add custom rules

Set project-level guidance to keep output consistent—just like onboarding notes for a new developer. These are things like:

• Preferred layout primitives
• File organization
• Naming patterns
• What not to hardcode

You can provide this in whatever format your MCP client uses for instruction files.

Examples:

 
---
description: Figma Dev Mode MCP rules
globs: 
alwaysApply: true
---
  - The Figma Dev Mode MCP Server provides an assets endpoint which can serve image and SVG assets
  - IMPORTANT: If the Figma Dev Mode MCP Server returns a localhost source for an image or an SVG, use that image or SVG source directly
  - IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
  - IMPORTANT: do NOT use or create placeholders if a localhost source is provided

# MCP Servers
## Figma Dev Mode MCP Rules
  - The Figma Dev Mode MCP Server provides an assets endpoint which can serve image and SVG assets
  - IMPORTANT: If the Figma Dev Mode MCP Server returns a localhost source for an image or an SVG, use that image or SVG source directly
  - IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
  - IMPORTANT: do NOT use or create placeholders if a localhost source is provided

- IMPORTANT: Always use components from `/path_to_your_design_system` when possible
- Prioritize Figma fidelity to match designs exactly
- Avoid hardcoded values, use design tokens from Figma where available
- Follow WCAG requirements for accessibility
- Add component documentation
- Place UI components in `/path_to_your_design_system`; avoid inline styles unless truly necessary

Adding these once can dramatically reduce the need for repetitive prompting and ensures that teammates or agents consistently follow the same expectations.

Be sure to check your IDE or MCP client’s documentation for how to structure rules, and experiment to find what works best for your team. Clear, consistent guidance often leads to better, more reusable code with less back-and-forth.

Break down large selections

Break screens into smaller parts (like components or logical chunks) for faster, more reliable results.

Large selections can slow the tools down, cause errors, or result in incomplete responses, especially when there's too much context for the model to process. Instead:

1. Generate code for smaller sections or individual components (e.g. Card, Header, Sidebar)
2. If it feels slow or stuck, reduce your selection size

This helps keep the context manageable and results more predictable, both for you and for the model.

If something in the output doesn’t look quite right, it usually helps to revisit the basics: how the Figma file is structured, how the prompt is written, and what context is being sent. Following the best practices above can make a big difference, and often leads to more consistent, reusable code.