Convert Figma designs to code with Claude Code

Connect Figma's official remote MCP server to Claude Code, extract design context from a frame link, and generate matching code.

[1] Install the official Figma plugin in Claude Code.

$ claude plugin install figma@claude-plugins-official

[2] Authorize access to your Figma account inside Claude Code.

$ claude

Type /plugin, navigate to the Installed tab, select figma, and press Enter to initiate authentication. When your browser opens, click Allow access. If you added the server manually, run /mcp, select figma, and choose Authenticate.

Authentication successful. Connected to figma

[3] Copy the link to the target frame in Figma.

Right-click the target frame or layer in Figma Design and click Copy link to selection. The client extracts the node ID from this URL to retrieve object details through the MCP server rather than navigating the webpage.

[4] Prompt Claude Code using the frame link to preserve design tokens and layout properties.

Paste the link into your Claude Code prompt and specify your framework, token mapping, and styling rules.

Read the design context from https://www.figma.com/design/EXAMPLE_FILE_ID/App?node-id=10-20 and create a responsive React component.- Map Figma Variables directly to design tokens and CSS variables.- Convert auto layout padding and spacing into Tailwind CSS utility classes.

[5] (Optional) Enable and connect the desktop Dev Mode MCP server locally.

In the Figma desktop app, switch to Dev Mode by pressing Shift + D with nothing selected. In the right sidebar under MCP server, click Enable desktop MCP server. Once active at http://127.0.0.1:3845/mcp, register it with Claude Code:

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

[6] Verify the registered MCP servers.

$ claude mcp list