Design to Code with Figma MCP and Cursor
A tutorial by Sergei Chyrkov. Featured in the OTF curated resource library.
What is Figma MCP?
Figma's Model Context Protocol (MCP) is a standardized interface that allows AI coding tools to read your Figma designs directly. Instead of manually describing a design to your coding agent, MCP gives the agent structured access to your components, layouts, spacing, colors, and typography.
This means when you tell Cursor "implement the hero section from my Figma file," the agent can actually see the design—not just interpret a vague description. The result is dramatically more accurate code that matches your design intent.
Figma's MCP server exposes design data including component hierarchies, auto-layout configurations, color styles, text styles, and even component variants—everything an AI needs to generate faithful code.
Setting Up the Connection
Connecting Figma MCP to Cursor takes about 5 minutes. Here's how to set it up.
Install the Figma MCP server
Figma provides an official MCP server that runs locally and connects to your Figma account. Install it using npm or run it directly.
npx figma-mcp-server@latest --token YOUR_FIGMA_TOKEN
Configure Cursor to use the MCP server
In Cursor's settings, add the Figma MCP server as a context provider. Navigate to **Settings → MCP Servers** and add the local server URL. Cursor will now have access to your Figma files when generating code.
Share the relevant Figma file or frame
When prompting Cursor, reference the specific Figma file or frame URL. The agent will fetch the design data and use it to generate matching code. For best results, share direct frame links rather than entire files.
Translating Designs to Components
Once connected, the workflow becomes remarkably simple. Describe what you want in natural language and reference the Figma design:
"Look at the card component in the Figma file and create a React component that matches it exactly. Use Tailwind CSS for styling and make it responsive."
The agent reads the Figma component's structure—auto-layout direction, padding, gaps, border radius, colors, and text styles—then generates code that matches. This is especially powerful for:
- Design system components: Buttons, cards, inputs, and badges that need to match Figma specs precisely
- Complex layouts: Multi-column grids, sidebars, and responsive breakpoints that are tedious to hand-code from a visual reference
- Typography tokens: Exact font sizes, weights, line heights, and letter spacing from your Figma text styles
Handling Design Tokens
Design tokens are the bridge between your Figma design system and your code. Here's how to handle them effectively.
Export tokens from Figma
Use Figma's built-in variables or a plugin like Tokens Studio to define your design tokens. The MCP server can read these directly, giving your coding agent access to your color palette, spacing scale, and typography system.
Map tokens to Tailwind config
Ask Cursor to map Figma tokens to your `tailwind.config.ts`. For example: "Read the color tokens from Figma and add them to my Tailwind config as custom colors." The agent will create semantic color names that match your Figma variables.
Use tokens in generated components
Once tokens are in your Tailwind config, all subsequently generated components will use them automatically. This ensures design consistency across your entire codebase without manual token translation.
Tips for Pixel-Perfect Results
Use Auto-Layout in Figma
Components built with auto-layout translate much more accurately to flexbox/grid code. Avoid absolute positioning in Figma when possible—it creates harder-to-maintain code.
Name Your Layers Semantically
Layer names like `hero-title`, `nav-link`, and `card-thumbnail` give the AI better context than `Frame 42` or `Group 7`. Semantic names lead to semantic class names and component structure.
Reference Specific Frames, Not Pages
Point the agent to exact frame URLs rather than full Figma pages. This focuses context and avoids confusion when pages contain multiple design iterations.
Review Responsive Behavior
Figma designs are typically static at one breakpoint. After generation, explicitly ask: "Make this component responsive—add mobile and tablet breakpoints." The agent can infer reasonable responsive behavior from the desktop design.
