Cursor turns design systems into Figma components
Cursor announced an automated workflow that generates Figma components from design systems in a demo shared by Karan, speeding the bridge between design tokens and front‑end components ( ).
Figma released a Dev Mode Model Context Protocol (MCP) server in public beta on June 4, 2025, opening a direct channel for AI coding tools to access Figma files. (figma.com) The MCP server surfaces design tokens, component hierarchies, variables and layout metadata so AI editors can fetch structured design context instead of relying on screenshots. (builder.io) Community MCP bridges such as GLips/Figma-Context-MCP and oarvladlen/Figma_mcp provide ready-to-run adapters and demo videos that let Cursor and other agents read Figma layers and emit framework-specific code. (github.com) Hands-on guides and demo videos have shown a Cursor+MCP workflow converting a complete Figma design system into React components in roughly 20 minutes in tutorial runs. (mejba.me) A consultancy case study reported 20–60% faster frontend delivery after adopting Cursor with Figma MCP, and authors recommend adding small rule sets (for example a.cursor/rules directory) to constrain generation for production quality. (fortegrp.com) Multiple writeups flag fidelity gaps and AI improvisation—generated components still need developer review, targeted prompt engineering, and integration testing before shipping. (opentools.ai) Platform-level two‑way workflows are arriving too: GitHub’s changelog notes Copilot can now create design layers and send rendered UI back to Figma, while Figma’s updates to MCP and Code Connect aim to make design context available inside IDEs and agents. (github.blog)
