Home / Tutorial · ✦ Official

Figma to Code in Cursor with the Dev Mode MCP Server

Cursor Team · Cursor Docs ·

How to wire Figma's Dev Mode MCP server into Cursor so the agent reads frames, variables and Auto Layout directly — turning selected designs into clean, token-aware React and Tailwind components.

Publisher summary

Connect Figma to Cursor via the Dev Mode MCP server so the agent reads frames, variables and Auto Layout, then turns selected designs into clean, token-aware React and Tailwind components.

In this article

  • Why MCP beats pasting screenshots
  • Enabling Figma Dev Mode MCP
  • Wiring the server into Cursor
  • Selecting a frame and prompting
  • Keeping output token-aware

Source: Cursor Docs

Read original Content lives on the original publisher's site.
Curated for the Cursor-Design community as a first-party reference on designing with Cursor.