ClaudeCode with Figma MCP Server

The project visual design is provided as a Figma file. Since Figma recently released its official MCP server, I’m trying to combine ClaudeCode with Figma MCP for design-to-code generation/modification.

Requirements

1. Figma Dev permissions or higher Full permissions
2. Claude Code membership or API Key (if using other clients, Claude Code membership is not required)

Claude Code Configuration

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

# Check MCP list to confirm correct addition
claude mcp list

Usage

1. Select a layer node in Figma
2. Right-click on that node and select the “Copy Link” option
   • On Mac, you can use the hotkey Cmd + L to copy
3. Paste the link in Claude Code and tell the AI in natural language to use that Figma design for code generation/modification

Experience

1. The results are quite good, but not 100% perfect. There are often some flaws that need manual adjustment.

Related Documentation

• https://www.builder.io/blog/claude-code-figma-mcp-server
• https://developers.figma.com/docs/figma-mcp-server/local-server-installation/