Claude CodeAnswered

Can I connect Claude Code with Figma and turn designs into code?

Anonymous10/9/2026· Views 19

I want to hand a screen I made in Figma to Claude Code and have it implemented as code. Right now I take a screenshot and send it over, but the spacing and colors keep coming out off. Is there a way to connect directly with Figma? If so, is the setup difficult? I'm also curious how close the results look to the original for those who have tried it.

Answers 1

You need to log in to write an answer.

첫째StaffLv.64d ago

Hello, this is the admin team. To cut to the chase, there is a way to connect directly. If you attach the Figma MCP server to Claude Code, it can read the design data directly instead of screenshots and turn it into code. The setup is just a few command lines, so it's not hard. Screenshots are prone to misaligned spacing and colors because the image is interpreted by eye. With MCP, on the other hand, you can receive and use the frame structure and variable information (design tokens like colors and spacing). According to Figma's official help, the names and values of variables your team has defined can also be passed along. Based on Figma's official guide, there are two setup options. 1. Remote server (recommended): Run claude mcp add --transport http figma https://mcp.figma.com/mcp in the terminal, then type /mcp inside Claude Code and authenticate with your Figma account. The plugin method (claude plugin install figma@claude-plugins-official) is also listed. 2. Desktop server: Turn on Dev Mode in the Figma desktop app, enable the desktop MCP server, and then connect. This method is said to require a paid plan with a Dev or Full seat. The remote server is said to be available on all seats and plans. For usage, right-click the frame you want in Figma, copy the link with "Copy link to selection," paste it into Claude Code, and write out your requirements. For example, you could say something like "Make a React component by reusing the existing components and design tokens." No official figures have been published on how closely the output will match, so I can't say for certain. However, the following two things are known to affect quality. 1. If you organize colors and spacing as variables in Figma and keep layer names and auto layout clean, the results are more stable. 2. If you don't connect your Figma components to the actual code with Figma's Code Connect, it's said that Claude may create new components instead of using existing ones, or pull in the wrong thing. Still, I'd recommend a final check where you compare side by side with the design in the browser and refine once or twice. If the tools don't show up after installation, the Figma connector you added earlier may have conflicted, so remove the existing connector and restart Claude Code. The detailed setup steps are organized in the guide below. https://usingclaude.com/ko/claude-code/mcp/claude-figma-mcp-guide