Using Claude Code with the Figma MCP Server

My project’s UI designs are provided as Figma files. Since Figma recently released an official MCP (Model Context Protocol) server, I decided to experiment with combining Claude Code and Figma MCP to generate and modify code based directly on design specs.

Requirements

1. Figma Permissions: You must have Dev mode access or full Editor permissions.
2. Claude Code Membership or API Key: Required for using the official Claude Code CLI. (If you use other MCP-compatible clients, you might only need an API key).

Claude Code Configuration

I used the local server installation for this setup. Once your local Figma MCP server is running, add it to Claude Code:

claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse

# Verify the setup
claude mcp list

Usage Workflow

1. Select a Layer: Open your design in Figma and select the specific layer or component you want to work on.
2. Copy the Link: Right-click the node and select “Copy Link” (or use the Cmd + L shortcut on macOS).
3. Instruct Claude: Paste the link into the Claude Code terminal and use natural language to tell the AI what you need (e.g., “Generate a React component based on this design link”).

Personal Impressions

1. Fidelity: The results are surprisingly good and save a lot of boilerplate coding time. However, it’s not a “100% perfect” translation yet. There are often minor CSS or layout discrepancies that still require manual adjustment and polishing.

Resources

• Builder.io Guide: Claude Code + Figma MCP
• Official Figma MCP Server: Local Installation Guide