Connect Figma to your coding agent with the remote MCP server
Set up Figma's hosted MCP server in Cursor, Claude Code, Codex or VS Code and generate code from selected frames.
- Figma
- Cursor
- Claude Code
- Codex
- VS Code
From Figma
Custom rules for Figma to code implementation
A rules file that forces the agent to fetch context and a screenshot before coding and to reuse your design system tokens and components.
5 steps
- Run get_design_context for the exact node
- Fall back to get_metadata if output is too large
- Run get_screenshot for a visual reference
- Translate React plus Tailwind output into project conventions
- Validate 1:1 against Figma
Prompt
Run get_design_context first to fetch the structured representation for the exact node(s). Run get_screenshot for a visual reference. Only after you have both, download any assets needed and start implementation. Translate the output into this project's conventions, styles and framework. Reuse the project's color tokens, components, and typography wherever possible. Validate against Figma for 1:1 look and behavior before marking complete.