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 Figma Dev permissions or higher Full permissions 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 Select a layer node in Figma Right-click on that node and select the “Copy Link” option On Mac, you can use the hotkey Cmd + L to copy Paste the link in Claude Code and tell the AI in natural language to use that Figma design for code generation/modification Experience 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/
Nov 1, 2025