Skip the MCP setup. Connect Claude to Figma in 60 seconds.
Yesterday, I tried using Claude Code to design in my Figma file.
The official way is MCP with a Figma API key.
Generate the key, configure JSON, deal with setup docs. I looked at it for 30 seconds and asked Claude:
"Is there a simpler way?"
TLDR: I was too lazy to go to the Figma settings and get the Figma API key.
Turns out, there is
Figma Desktop has Chrome DevTools built in. You can connect Claude Code "directly" to your Figma App. It runs Figma in debug mode.
No API key.
So we (me and Claude, 99% Claude) built a CLI that talks to Figma through DevTools.
And then I realized: this is actually better than MCP for designers because it burns less tokens.
What's the difference?
- 1 min to set it up
- No API key: Your Figma session is already authenticated
- Free Figma account works
- Less tokens burned
- It's faster because it uses the local server
How to Set It Up
What you need
- Figma Desktop (free account works)
- Claude Code installed (get it here)
Step 1: Download
Go to the GitHub repo: github.com/silships/figma-cli
Click "Code" then "Download ZIP". Unzip it.
Step 2: Open Terminal
On Mac: Open Terminal (Spotlight, then type "Terminal")
Type:
cd ~/Downloads/figma-cli-main
Step 3: Start Claude
claude
Step 4: First message
Setup: install dependencies and connect to Figma
Done.
Now talk to Claude about your Figma file.
The Real Power: Claude Learns Your Workflow
Every time you show Claude something and tell it what you want, you can tell Claude to write it to a file called CLAUDE.md.
Next time, it remembers.
You're training your own design agent.
Examples of what Claude can learn:
- How you name and organize layers
- Your preferred spacing and alignment
- How you structure pages and frames
- Your export settings
- Any repetitive task you do in Figma
Show it once, explain what you want. Claude saves it and next time it just works.
Building Your Own Design Agent
This is the part I'm excited about.
Every designer works differently. Your shortcuts, your naming, your process. Generic AI doesn't know any of that.
But Claude Code can learn.
Show it your workflow, tell it what matters.
It writes everything to CLAUDE.md (like a memory).
Copy that file to your next project, your agent comes with you.
Over time, you build an AI that works the way YOU work.
Feel free to create your own CLI version
This is a work in progress and I am still figuring out what is possible when you connect Claude Code directly to Figma. There is a lot to explore.
If you try it, I want to hear what works and what breaks.
Leave a comment below or open an issue on GitHub.
Your feedback is what shapes where this goes next.
And if you build your own version or improve on the idea, share it.
The whole point is making design tools that actually work the way we do.
Shoutout to
- Mark Anthony Cianfrani
- TJ Pitre - Figma Console MCP
- Dannote - Figma Use
For doing all the groundwork and inspiring me to create my own version!
Happy vibe coding! ✌️
Sil
P.S: I'm running a 2-day AI online conference for designers. 👉 Learn the AI and vibe coding workflows top design teams use
