Figma Dev Mode MCP Server exposes variables and components directly to code agents

The problem the MCP Server tries to shorten

Every team that has ever done a design handoff knows the ritual: the developer opens the file in Figma, inspects layer by layer, copies hex values, eyeballs spacing, and hopes they haven't missed a theme variable along the way. It's slow, and it's where most of the divergence between design and code is born.

The Dev Mode MCP Server, described in the official Figma Help Center guide, tries to solve this a different way: instead of the developer manually translating the design, a code agent connected via Model Context Protocol reads the Figma file's structure directly and extracts variables, components, and layout data straight into the editor. MCP is the standard protocol that lets tools like Claude Code, Cursor, VS Code, Windsurf, and Copilot CLI talk to external data sources uniformly, and Figma built its own server on top of it.

Two ways to connect the server, two levels of access

The guide describes two ways to connect the MCP Server, and the difference between them matters for whoever is deciding which one to use:

Figma itself recommends the remote server as the preferred option, precisely because it covers more clients and more features, including writing directly to the canvas in Figma Design and FigJam.

What the agent can pull from the file

With the server connected, the agent gains access to a set of tools that go far beyond "reading the layer's text." The guide lists, among other capabilities:

• Extracting design context: variables, components, and layout data directly in the IDE, especially useful for design systems and component-based workflows.
• Generating code from a frame selected in Figma.
• Pulling resources from FigJam files (diagrams, flows, architecture maps) to use as code context.
• Pulling resources from Make files, for those moving from prototype to production application.
• Writing directly to the canvas in Figma Design and FigJam, creating or modifying frames, components, variables, and auto layout using the design system as the source of truth (remote server only).
• Capturing the live UI of an app in production, staging, or localhost and turning it into editable layers in Figma Design (also remote server only, with select clients).

In practice, the most common flow starts with a link: you select a layer in Figma, click "Copy link to selection," and paste the URL into your agent. The MCP client doesn't navigate to the URL, but extracts the node ID from that link and uses it to ask the server for the context of that specific object. That's how Cursor, Claude Code, or Copilot know which frame you want to implement without you having to describe everything in text.

Code Connect is what keeps you from reinventing the component

An obvious risk of generating code from a frame is the agent simply drawing divs and styles from scratch, ignoring that the button already exists as a component in your codebase. That's where Code Connect comes in: it maps Figma components to the actual components in your repository, so the generated code reuses Button, Card, or whatever already exists, instead of recreating a parallel version.

The guide also mentions "Skills," packages of instructions that help the agent decide which MCP tool to call and in what order, for tasks like connecting components to Code Connect, generating design system rules aligned to the codebase, or translating a design into production-ready code. It's worth noting what Figma itself makes explicit about this feature:

Skills don't replace MCP connections or add new MCP capabilities. They reduce setup and guesswork by packaging recommended workflows into reusable instructions.

Figma, Guide to the Dev Mode MCP Server

In other words: Skills guide the agent, they don't expand what it can access.

The cost detail that changes the adoption math

Before putting this into the whole team's workflow, it's worth noting a point the guide itself makes a point of highlighting twice: writing directly to the canvas is available for free only during the beta period. Figma already warns that this will eventually become a usage-based paid feature. The live UI capture feature, meanwhile, has a different restriction: it requires the remote server and, at the moment, is supported only by select clients, with no pricing note attached in the guide. Deciding a team's architecture around a free tool that's going to become paid is a product risk, not just an engineering one.

Where this breaks without human curation

This is where the angle that matters most lives, for anyone who thinks of accessibility and design system as a contract, not a suggestion. The MCP Server extracts visual and structural data: color, spacing, layer hierarchy, theme variables. It doesn't extract semantic intent or validate whether something is accessible.

In short: the server is excellent at reducing the work of visual translation, but it doesn't audit what's being translated. This creates three concrete points of attention:

• If the design's color variable already has insufficient contrast, the agent reproduces that insufficient contrast in the code without flagging anything, because judging WCAG isn't its job.
• Writing directly to the canvas using "the design system as the source of truth" assumes the design system is already correct and complete. Any existing technical or visual debt gets replicated automatically, at scale, with no human in the loop to question it.
• Capturing live production UI and bringing it back into Figma as editable layers is an interesting reverse flow, but if that UI has local workarounds that were never brought back into the official component, those workarounds become "ghost components" in Figma, with no mapping in Code Connect and no real relationship to the design system.

None of these three points is hypothetical: they're direct consequences of how the tools themselves were described in the guide, not implementation flaws to be fixed later.

What actually changes for those who work with this

For developers, the real gain is no longer hunting for variable values manually: design context arrives structured in the IDE, ready to become a prompt. For designers, the gain is a more direct channel between design decisions and implementation, with Code Connect keeping both sides tied to the same component.

What doesn't change, and shouldn't change, is the need for human review before anything generated by an agent (whether code or a new frame in Figma) goes into production. Contrast audits, keyboard navigation testing, screen reader testing, and checking that the "new" component isn't actually an unmapped duplicate of something that already exists in the design system remain work for people, done before the merge and before the commit to the design file, not after.

Source 1: Figma Help Center — Guide to the Dev Mode MCP Server (https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server)

Guide to the Figma MCP server – Figma Learn - Help Center

Before you start

Who can use this feature

The remote server is available on all seats and plans.

The desktop server is available on a Dev or Full seat for all paid plans.

You must use a code editor or application that supports MCP servers (i.e. VS Code, Cursor, Windsurf, Claude Code, Codex). See our MCP catalog for a full list of supported clients .

For information about usage and rate limits, see Plans, access, and permissions in the Figma developer documentation.

The Figma MCP server helps developers explore and implement designs quickly and accurately:

Use your agentic tools to create and modify native Figma content directly in Figma Design, FigJam, and Figma Slides.

Note: We're quickly improving how Figma supports AI agents. This will eventually be a usage-based paid feature, but is currently available for free during the beta period.

Get design context and code from your Figma designs, FigJam, and Make files

Capture your live UI as design layers, bringing the interfaces rendered by your code to Figma Design files

Enhance the way you work with design components and Code Connect

Use fonts uploaded to your account with the MCP Server and Figma Agent

Note: This guide is a high-level look at what's offered by the Figma MCP server. For specific instructions about using the server and example prompts, see:

Get started with the Figma MCP server

Remote Figma MCP server installation (preferred)

Desktop Figma MCP server installation

Figma skills for MCP

Tools and prompts

The Figma MCP collection

Detailed articles are also available in the Figma developer documentation .

The tools within Figma's MCP server bring additional context from Figma into your workflow, so your code doesn't just match your existing systems, but your design, too. MCP servers are part of a standardized interface for AI agents to interact with data sources using the Model Context Protocol .

See our Figma MCP Collection to learn more about the MCP server and bringing Figma into your workflow → Note: This page is a general overview of the Figma MCP server. For detailed instructions and code samples, see the Figma MCP server developer documentation . With the server enabled, you can:

Let your agent write directly to the canvas in Figma Design and FigJam

Create and modify native Figma content directly from your MCP client. With the right skills, agents can build and update frames, components, variables, and auto layout in your Figma files using your design system as the source of truth.

Note: This feature requires the remote Figma MCP server . We're quickly improving how Figma supports AI agents. This will eventually be a usage-based paid feature, but is currently available for free during the beta period.

This feature is continuously being improved. If you encounter issues, you can report the issues using Fig, our support chatbot , or by emailing support (paid plans) .

Learn more about writing to the canvas

Generate designs from the live UI of your web apps and sites

Turn live UI from your browser (production, staging, or localhost) into editable design layers in Figma. Send pages, elements, or whole flows to Figma Design for exploration, alignment, and refinement.

Note: This feature requires the remote Figma MCP server and is currently supported by select clients.

This feature is continuously being improved. If you encounter issues, you can report the issues using Fig, our support chatbot , or by emailing support (paid plans) .

Learn more about generating designs from your interfaces

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.

Retrieve FigJam resources

Access content from your FigJam diagrams and use it in your code generation workflow. Incorporate early-stage ideas, flows, or architecture maps directly into development.

Retrieve Make resources

Gather code resources from Make files and provide them to the LLM as context. This can help as you move from prototype to production application.

Keep your design system components consistent 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

Set up the MCP server You can connect the Figma MCP server in two ways:

Remote MCP server (preferred) : Connects directly to Figma's hosted endpoint at https://mcp.figma.com/mcp . Learn how to install the remote MCP server.

Desktop MCP server : Runs locally through the Figma desktop app. Learn how to install the desktop MCP server. The desktop MCP server is primarily for specific use cases for organizations and enterprises. For the broadest set of features, use the remote MCP server.

Note: The MCP server and Figma Agent can access fonts uploaded to your account. Learn how to add a font to Figma.

--> Connect the MCP server to your editor Follow instructions for your specific editor to connect to the Figma MCP server, either locally or remotely. Some clients also support skills , which add agent-level instructions that help AI tools work more effectively with Figma designs:

Client Desktop server support Remote server support Write to canvas (remote only) Plugin/skills support

Amazon Q ✓

Android Studio

Augment Code

Claude Code

Figma plugin

Claude Desktop

Figma connector

Codex by OpenAI

Codex Skills

Copilot CLI

Cursor

Factory

Firebender

Gemini CLI

Extension

Kiro

Kiro Powers

Openhands

Replit

VS Code

Warp

Xcode (beta)

About Skills Skills provide guidance for how an agent should complete specific tasks, using a combination of MCP tool calls and detailed instructions. While the Figma MCP server exposes individual tools, Skills help agents understand which tools to use, how to sequence them, and how to apply the results when working with Figma designs. Skills can guide agents through workflows like:

Connect Figma design components to code components using Code Connect

Generate design system rules aligned to your codebase

Translate designs into production-ready code

Skills don't replace MCP connections or add new MCP capabilities. They reduce setup and guesswork by packaging recommended workflows into reusable instructions. To learn more about skills:

Use skills with the Figma MCP server

Note: Skills are also available from the Figma Community and via community contributions in the Figma community-resources repo on GitHub. Tip: For the latest list of supported editors and clients, check out our MCP Catalog . Prompt your MCP client The Figma 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. For a complete list of tools and examples, see Tools and Prompts . First, follow the instructions to install the Figma MCP server for your preferred MCP client. We provide instructions for:

Xcode

For other MCP clients, follow the instructions in your client's documentation for adding MCP servers. See the table under Connect the MCP server to your editor for links. Example: Get design context Getting design context and code from files is link-based. To get design context:

In Figma Design, select the layer you want to get design context for.

Right-click a frame or layer in Figma and select Copy link to selection .

In your MCP client, paste the URL and prompt your client to help you implement the design.

Your client won't be able to navigate directly to the selected URL, but it will extract the node ID that is required for the MCP server to identify which object to return information about. Example: Send UI to Figma Note: Currently available using the remote Figma MCP server with certain clients. See the table under Connect the MCP server to your editor for a list of supported clients. Sending the live UI of your web app or site to Figma is done through conversation with your MCP client:

Prompt your MCP client: "Start a local server for my app and capture the UI in a new Figma file."

Follow the steps your client provides. Your client will open a browser window for you, or give you a link to follow.

Use the capture toolbar to capture pages, elements, and states of your web app or site.

Let your client know when you're finished. Your client will give you a link to open the Figma file that was created.