Figma: Designs to Code

Translating a design by looking at screenshots

The standard workflow for implementing a design is: open Figma, navigate to the frame, take a screenshot or export an image, switch to Claude, attach the image, and ask for a component. Claude reads the screenshot and generates something that looks approximately right — but it is working from pixel data, not from the actual design values. The spacing might be 16px in the design and 18px in the output. The color might be hex #2563EB in Figma and #2460E8 in the code.

When Claude is connected to Figma, it reads the actual design data: the exact frame dimensions, the precise color values, the specific font sizes, the measured padding. The code it generates matches the design with the precision of the design file itself, not the precision of a screenshot.

Two connection options

Figma offers two ways to connect to Claude Code, with different setup steps and feature sets.

Option 1: The plugin approach

Install the Figma plugin from within a Claude Code session:

/plugin install figma@claude-plugins-official

If the marketplace is not found, add it first:

/plugin marketplace add anthropics/claude-plugins-official

Then reload plugins:

/reload-plugins

Open the MCP panel and authenticate:

/mcp

Select figma, choose Authenticate, and approve the OAuth connection in your browser. Once authenticated, Claude has access to your Figma files through the hosted server.

Option 2: Figma desktop Dev Mode

Open the Figma desktop application and open any file. Switch to Dev Mode by clicking the toggle in the toolbar (it looks like a code bracket icon). In the right sidebar, find the MCP server toggle and enable it. Figma shows a confirmation and a URL — click to copy it.

Add the server in Claude Code:

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

This connects Claude to the currently open Figma file. The server runs locally and only responds while Figma is open. Claude can read the file's frames, components, and properties, but cannot write back to the canvas through this connection.

Generating code from designs

With either connection, you can ask Claude to read and implement specific design elements:

Read the Figma frame called ButtonPrimary and generate a React component that matches it exactly. Use Tailwind for styling.

Claude calls the Figma MCP tools to read the frame's properties — dimensions, colors, typography, spacing, border radius — and generates a component using those exact values. The hex codes, font sizes, and padding come from the design file, not from a visual estimate.

For a full page:

Read the Login page frame in our Figma design file and generate the full React component tree. Identify any reusable sub-components.

Claude reads the frame hierarchy, maps it to component structure, and generates the full implementation with sub-components identified where the design uses repeating patterns.

Code Connect: staying aligned with real components

Figma's Code Connect feature lets you annotate Figma components with the real code components they correspond to. When Claude reads a frame that uses Code Connect-annotated components, it receives both the design properties and the actual component imports and usage patterns.

This prevents the common problem where generated code uses generic implementations (<div className="button">) when the codebase already has a real Button component (<Button variant="primary">). With Code Connect, Claude generates code that uses what already exists in your design system.

What Figma MCP cannot access

Understanding the limits helps you know where manual adjustment will be needed:

• Raster image content: Claude can see that an image exists and its dimensions, but cannot read the pixel content of embedded images or photos.
• Interactive prototypes: Prototype flows, animations, and hover states are not part of the design data Claude reads. You describe the interaction behavior separately.
• Files not in Dev Mode: Through the desktop connection, Claude only sees the currently open file. Draft files or files in design mode (not Dev Mode) may have limited access.