120
DE🔥 Claude Code to Figma
Did you know that Claude Code now has a two-way connection to Figma? It means that you can modify the design in Figma and turn it into code, and vice versa.
This connection works via MCP (Model Context Protocol), and the setup process in Claude Code takes a couple of minutes.
The only important thing you need to check during setup is to make sure you provide access to the right Figma account if you’re using multiple accounts. When I set up the connection for the first time, I accidentally provided access to the wrong Figma account, saw the “Cannot access design in Figma” error message from Claude when it tried to use the design from Figma file, and had to start the authentication process again.
My use-case for this feature:
1️⃣ Create a design in code using Claude Code.
2️⃣ Send design to Figma.
3️⃣ Refine design in Figma.
4️⃣ Prompt Claude Code to apply changes from the Figma file.
It makes it easier to introduce design changes (compared to plain-text follow-up prompts), as Claude Code can rely on Figma for specific details.
👍 Nice that you can export the design of a specific element on the page (e.g., a UI component) to Figma.
👎 The major problem with this feature is that the design exported to Figma often has visual defects. I’ve noticed dozens of spacing issues and even missing sections from the original coded design in the Figma design. Of course, you can fix this with follow-up prompts, but it will take time. So you cannot rely on this feature to get an exact copy of the coded design, which makes this feature not very useful for activities like design handoff.
📕 Complete guide to Claude Code and Figma: https://lnkd.in/ewTCBg96
#design #ai #aidesign #productdesign #figma claude claudecode
@designnova24
