Dev Mode MCP Server lets VS Code and Cursor read the Figma file directly, without manual handoff

Dev Mode MCP Server lets VS Code and Cursor read the Figma file directly, without manual handoff

Figma's Dev Mode MCP Server exposes design tokens, components, and specs directly in the code editor via the MCP protocol. The gain is real, but human curation remains part of the workflow.

Editor's note: this article describes Dev Mode MCP Server features based on official documentation from the Figma Help Center. Features such as canvas writing and the figma-spec skill are in open beta and subject to change; the editorial team did not independently test the MCP server's behavior, so details of practical operation may differ from real-world usage.

The problem manual handoff always had

Anyone who works at the bridge between design and engineering knows the ritual: the design team finishes a frame in Figma, exports specs, annotates measurements, writes a comment explaining a component's behavior, and waits for the developer to open the file, interpret all of it, and translate it into code. In that middle ground, information gets lost. A color token becomes a hardcoded value, a component variant becomes a loose if/else, and the context for why that spacing exists simply never reaches the code editor.

The Dev Mode MCP Server, documented in Figma's Help Center, tackles this problem head-on: instead of the developer leaving the editor to look at Figma, the AI agent inside the editor itself reads the Figma file as a data source. The bridge stops being an intermediate document and becomes a connection via the MCP protocol (Model Context Protocol), the standard that lets AI agents query external data sources in real time.

How the connection works under the hood

Figma's MCP server can run in two ways, with clear trade-offs between them.

• Remote server (recommended): connects directly to the endpoint hosted by Figma at https://mcp.figma.com/mcp, without needing the desktop app. It offers the broadest set of features, including canvas writing and live UI capture.
• Desktop server: runs locally through the Figma desktop app and requires a Dev or Full seat on Professional, Education, Organization, Government, or Enterprise plans. It's aimed at specific needs of organizations and companies, such as Figma for Government environments, which only support the desktop server.

The remote server offers the broadest set of features: canvas writing and live UI capture, for example, require this option exclusively. The choice between one and the other, therefore, directly changes what the team can do afterward.

From selected frame to context in the editor

The workflow documented by Figma is link-based, not a free search through the entire file. The developer right-clicks the desired frame or layer inside Figma Design and selects Copy link to selection. That link, pasted into the MCP client (VS Code, Cursor, and other clients listed in Figma's MCP catalog), isn't opened as a page: the server extracts the node ID from it and uses that to fetch the actual data for that object.

From that node ID, the agent can pull variables, components, and layout data directly into the IDE. This is particularly useful for design-system-based workflows, where the value isn't just in the frame's visuals but in the structure of tokens and components behind it. The same mechanism works to generate code from a selected frame, a feature designed for product teams building new flows or iterating on existing features.

Code Connect and Figma Specs: context beyond the pixel

Extracting variables and layout solves part of the problem, but not consistency with the code that already exists in the repository. That's where Code Connect comes in: it maps Figma components to the actual components in the codebase, so the code generated by the agent reuses what already exists instead of recreating a button from scratch with every prompt.

The guide also describes the figma-spec skill, currently in open beta, which lets the agent read, create, and update the team's specs. In practice, this flips the usual order of work: instead of the product team writing requirements in a separate document the agent never sees, the spec becomes an artifact the agent itself consults before starting and updates with decisions and findings as it progresses. Writing to a spec requires the remote MCP server and edit access to the file.

It's worth separating what are tools from what are skills, because the guide treats the two as different layers:

• Tools: the individual functions the MCP server exposes, such as extracting variables or getting code from a frame.
• Skills: agent instructions that combine multiple tool calls with a script for how to use them, reducing the chance that the agent picks the wrong tool or skips a step. Skills don't add new capability, they just package recommended workflows.

Writing back to the canvas, and what that means

The most structural feature in the package is the reverse path: the agent being able to write directly to the canvas in Figma Design, FigJam, and Figma Slides, creating or updating frames, components, variables, and auto layout using the team's design system as the source of truth. This feature requires the remote server and a Full seat to edit outside the user's own drafts. Figma makes it explicit that it's free during the beta period and will become a pay-per-use feature.

Along the same lines, the MCP server allows capturing the real UI of an app running in production, staging, or localhost and turning it into editable layers in Figma. The workflow is conversational: the developer asks the MCP client to start a local server and capture the UI, uses a capture toolbar to choose pages and states, and gets back a link to the generated Figma file. It's the reverse path of design-to-code: live code becoming design material.

Where human curation remains mandatory

In short: the MCP server reduces the distance between the design file and the code editor, but doesn't eliminate the need for human review on either end. Three points deserve attention from anyone adopting the workflow:

• Code Connect fidelity depends on correct mapping. If the component in Figma isn't actually connected to the component in the codebase, the agent generates plausible code that diverges from what the team actually uses.
• Specs and canvas writing are in beta. Treating automatically captured decisions as final, without review from someone on the team, means taking on unnecessary risk while the feature is still being hardened by Figma itself.
• Nothing in the guide addresses the accessibility of the generated code. Extracting layout and variables doesn't guarantee correct semantic structure, ARIA labels, or a coherent focus order; that remains review work for someone who understands the product's accessibility requirements, not the agent.

Automatic extraction of tokens and components takes repetitive work off the developer's hands. But the judgment about whether that resulting code truly serves the end user, including the user who relies on a screen reader or keyboard navigation, remains human. The MCP server shortens the distance between design and code; it doesn't replace the decision of whoever validates whether the result is correct.

Source

Official Dev Mode MCP Server guide, Figma Help Center: https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server.