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
- Figma Permissions: You must have
Devmode access or fullEditorpermissions. - 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
- Select a Layer: Open your design in Figma and select the specific layer or component you want to work on.
- Copy the Link: Right-click the node and select “Copy Link” (or use the
Cmd + Lshortcut on macOS). - 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
- 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.
