Figma Dev Mode MCP Server
by Figma
Figma's official Dev Mode MCP server, running locally inside the Figma desktop app, lets a coding agent pull real code, design variables, and images directly from a selected frame.
Connect from your MCP client
claude mcp add --transport http figma http://127.0.0.1:3845/mcp
Source: https://help.figma.com/hc/en-us/articles/32132100833559
About
Figma's Dev Mode MCP server runs as a local server inside the Figma desktop app, giving a connected coding agent direct access to a selected frame or component: generated code that reflects the actual layout and styles, the design's variables and tokens, and exportable images, without a human manually translating the design first.
Because it reads live from the currently open Figma file, the agent works from the design as it exists right now, not a static export or screenshot that can drift out of date.
Key features
- Generates code from a selected frame that reflects real layout and styles
- Exposes design variables and tokens (colors, spacing, typography)
- Exports images directly from selected layers
- Runs locally against the Figma desktop app, no file upload required
Use cases
- Turn a selected Figma component directly into working frontend code
- Pull exact color and spacing tokens into a project's design system
- Export a specific icon or illustration from a design file for use in code
Available tools
get_code
Generates code for the currently selected frame or component.
get_variable_defs
Returns the design variables (colors, spacing, typography) used in a selection.
get_image
Exports an image of the selected layer or frame.
Frequently asked questions
Do I need the Figma desktop app running?
Yes. Dev Mode MCP runs as a local server inside the desktop app itself, so Figma needs to be open with the relevant file and Dev Mode enabled.
Does it work with the Figma web app?
The MCP server is a desktop app feature; check Figma's current documentation for web-app support, since this has been an actively evolving area of the product.