Figma Dev Mode
Lets an agent read a selected Figma frame's structure, tokens, and measurements so generated UI matches the design.
What it does
Exposes the frame you have selected in the Figma desktop app: layer structure, spacing, colours, typography, and any design variables attached to it. The agent generates markup from real values rather than guessing from a screenshot.
Maintained by Figma.
Setup
This one runs locally inside the Figma desktop app rather than as a package you install. Enable the Dev Mode MCP server in Figma's preferences, then point your agent at the local endpoint:
claude mcp add --transport sse figma http://127.0.0.1:3845/sse
What to watch out for
Requires the Figma desktop app running with a file open, and a Dev Mode seat on a paid plan. It will not work from the browser version.
It reads the current selection, so if nothing is selected the agent gets nothing useful. Select the frame first, then ask.
Output quality depends heavily on how the file is built. A well organised file using variables and auto layout produces good code. A file of absolutely positioned rectangles produces bad code, and no MCP server fixes that.