Connect Claude Code to Figma in 5 minutes
You will not memorise a single command in this tutorial. You start Claude Code, you say what you want, and it does the rest.
What you need
- Figma Desktop, installed and open. The browser version does not work here, it has to be the desktop app.
- Claude Code, Anthropic's AI assistant for your computer. If you do not have it yet, the install guide is one command and takes about a minute.
That is the whole list. No API key, no Figma plugin from the store, no developer account.
Copy the GitHub link and let Claude install it
figma-cli lives on GitHub. You do not need to know what git is. Copy this address:
https://github.com/silships/figma-cli
Then open Claude Code anywhere and paste it into a sentence like this:
Now that Claude Code is sitting inside the project, ask it to do the rest:
Claude handles every technical step. You watch. If anything is missing on your machine, Claude tells you and fixes it. In Cursor it is one line instead of two: "Install github.com/silships/figma-cli and connect it to my Figma."
Pick how it connects: Yolo, Browser or Safe
During setup, Claude connects the CLI to your open Figma Desktop. There are three ways, and Claude will pick or ask. Here is what they actually mean, so nothing feels mysterious:
Yolo mode
default, recommendedFully automatic. Claude applies a small, reversible patch to the Figma Desktop app so the CLI can talk to it directly. No plugin window to keep open, no clicking. The name sounds scary, the patch is not: Claude can undo it anytime, and nothing ever leaves your machine.
Browser mode
same speed, the Figma app is never touchedInstead of patching the desktop app, Claude opens Figma in a normal Chromium browser with remote debugging on, in its own dedicated profile, so your everyday browser and your Figma login stay untouched. You open your file there and keep working. Just as fast as Yolo and still fully local. This is the one to pick when the desktop app must stay unmodified, for example on a locked-down work machine or when macOS will not grant the App Management permission the patch needs.
Safe mode
zero changes to FigmaDoes not touch the Figma app at all. Instead you run a tiny built-in plugin once, from Plugins, then Development, then FigCli, and keep it open while you work. A little more manual, ideal if your company's IT policy says the app must stay unmodified.
All three do exactly the same things. Unsure? Take Yolo. Want the fast direct path without touching the Figma app? Take Browser. Prefer the official plugin route? Take Safe. To choose one, just say so:
Run your first prompt
When Claude says it is connected, you are done with setup, forever. Now try this and watch your canvas:
Everything it builds is real Figma: frames, auto-layout, components, variables. Not an image, not a locked group. Select any layer and edit it like you made it yourself.
A few more first prompts that show off what it can do:
- "Add shadcn colors as variables, light and dark"
- "Make a login form"
- "Check the color contrast on this screen"
Questions
How long does it take to connect Claude Code to Figma?
About five minutes. You start Claude Code with one word in a terminal, paste two sentences, pick a connection mode and run your first prompt. Claude installs the project and connects to your open Figma Desktop while you watch.
Do I need to know the terminal?
Only enough to type claude once. Everything after that is plain English inside Claude Code, and the agent runs the CLI commands for you.
Does it work with Figma in the browser?
No. Figma-CLI drives the Figma Desktop app on your machine, so the desktop app has to be installed and open. The browser version cannot be connected.
Ready to try it?
The project is open source and MIT licensed. Everything runs locally on your machine.
Get started