Reads Figma designs and ships them 1:1 as code.

What it is

The Figma MCP pulls your designs straight into Claude Code. Drop in a frame link, Claude builds the code — real colors, real spacing, real components. No more guessing from screenshots.

Install / Setup

Option 1 — Terminal (remote server, recommended):

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

First time you connect, it walks you through the Figma OAuth flow.

Option 2 — Prompt Claude Code:

Install the official Figma MCP server (https://mcp.figma.com/mcp) for me via claude mcp add, walk me through the OAuth login, and verify the connection with /mcp after.

Use cases

• Design 1:1 to code — Frame URL in, Claude builds React/Tailwind with real tokens.
• Extract style tokens — Pull colors, font sizes, spacing out of Figma and into a Tailwind config.
• Component matching — Claude maps Figma components to existing React components in your repo.
• Design review — Claude diffs your implemented code against the current Figma and lists what's off.
• Copy extraction — Pull text straight from the design into your i18n files, no copy-paste loop.

Pro tip

Before you tell Claude "build this frame": let it analyze first ("what components, tokens, and states do you see?"). Stops it from misreading design details and saves you three build iterations.

🚀 Anyone can install MCPs. Knowing which combo actually moves the needle for your workflow — that's what saves you weeks. Inside the community I walk you through my full MCP setup. → Join the Claude Code Mastery Community

Updated regularly — follow @vine.codes for more.