Setting Up Claude Code + Figma
Step-by-step terminal integration guide for Windows
This guide walks you through installing Claude Code in your terminal and connecting it to Figma
using the Model Context Protocol (MCP). By the end, you'll be able to read Figma designs,
generate new ones, and turn designs into code — all from your terminal.
Heads up: Free Figma accounts get around 6 Figma tool calls per month through the remote
MCP server. Enough to try it out. Upgrading to a paid Figma seat (Professional plan or higher)
removes that limit.
What you'll need
• A Windows computer (this guide uses PowerShell)
• A free Anthropic account ([Link] login)
• A free Figma account
• Around 15-20 minutes
Step 1 — Install [Link]
Claude Code is installed through npm, which comes with [Link]. Check if [Link] is already
installed.
Open PowerShell and run:
node --version
What you might see:
• v20.x.x or higher — skip to Step 2
• v18.x.x or lower — install the newer LTS version below
• "not recognized" error — [Link] isn't installed, follow below
To install [Link]:
1. Go to [Link]
2. Download the LTS version (the big green button on the left)
3. Run the installer and click Next through defaults ("Add to PATH" stays checked)
4. Close PowerShell completely and reopen it (PATH changes don't apply to open
terminals)
5. Run node --version again to confirm
Step 2 — Allow PowerShell to run npm scripts
By default, Windows blocks PowerShell scripts (and npm is one of them). You'll need to change
the execution policy for your user account.
In PowerShell, run:
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
If prompted, type Y and press Enter. This change only affects your user account and still blocks
unsigned scripts from the internet — it's Microsoft's recommended setting for developer
machines.
Step 3 — Install Claude Code
In PowerShell, run:
npm install -g @anthropic-ai/claude-code
This takes one or two minutes. You'll see text scroll by, possibly some yellow warnings (those
are fine to ignore). When you get your prompt back, it's done.
Verify the install:
claude --version
You should see a version number like "2.1.150 (Claude Code)".
Step 4 — Create a project folder
Claude Code works from a folder, treating it as your project. Make one and navigate into it:
cd ~\Desktop
mkdir claude-test
cd claude-test
Step 5 — Launch Claude Code for the first time
Run:
claude
What happens on first launch:
6. Choose a color theme — Dark mode is pre-selected; press Enter
7. "Is this a project you trust?" — option 1 is highlighted; press Enter
8. Sign-in prompt — your browser opens, sign in with your Anthropic account
9. Once signed in, return to the terminal
You'll land on Claude Code's main interface — there's a text input box at the bottom and the
welcome banner above. You're ready to add Figma.
Step 6 — Add the Figma MCP server
Inside Claude Code, type this and press Enter:
Add the Figma MCP server at the user scope so it works in every project.
Use the URL [Link]
Claude Code will run the right command for you and ask permission. Pick option 1 (Yes).
Alternative: If you prefer to run the command yourself, exit Claude Code and run: claude
mcp add --transport http figma [Link] -s user
You should see a success message confirming Figma was added with scope: user.
Step 7 — Authenticate with Figma
Adding the server isn't enough — you need to log in to Figma so Claude is allowed to access
your account.
10. In Claude Code, type /mcp and press Enter
11. You'll see "figma" listed with an orange "needs authentication" warning
12. Use arrow keys to highlight figma if it isn't already, then press Enter
13. Choose Authenticate
14. Your browser opens a Figma login page — sign in and click Allow access
15. You'll see an "Authentication Successful" page; close the tab
16. Return to the terminal
Browser issue? If you see a "site can't be reached" error in the browser after clicking Allow,
try a different browser (Chrome or Edge). Brave's privacy settings sometimes block the local
callback. If you see "Authentication Successful," you're done — that error doesn't matter.
Step 8 — Verify it's working
In Claude Code, type:
What MCP tools do you have available from the figma server?
Claude should respond with a categorized list of Figma tools — read designs, write designs,
code connect, design system, diagrams, and a whoami check. If you see that list, the integration
is complete.
Step 9 — Try it out
Here are starter prompts in increasing order of cool. Each uses one of your free monthly Figma
calls, so pick carefully.
Verify the connection
Run whoami on the figma server
Confirms which Figma account is connected — zero risk.
Generate a Figma design
Create a new Figma file with a modern landing page for a fitness app.
Include a hero section, three feature cards, and a footer.
Claude builds the design inside Figma. Open Figma afterward to see it.
Generate a FigJam diagram
Create a FigJam diagram showing the user signup flow: landing page, signup
form, email verification, onboarding, dashboard.
Read a design and turn it into code
Open Figma, select a frame, right-click → Copy link to selection. Then in Claude Code:
Read this Figma frame and build it as a working HTML page with inline CSS.
Save it as [Link] in this folder. URL: [paste here]
Claude fetches the design, parses the layers, and writes an [Link] file you can open in your
browser.
Troubleshooting
Claude Code launches but nothing happens
First launch can take 10-30 seconds. Press Enter once to wake it up if it seems stuck. If still
nothing, press Ctrl+C and run claude --debug to see what's happening.
"claude" not recognized after install
Close PowerShell completely and reopen — npm's global PATH only applies to new sessions.
Figma not showing up after /mcp
If you added Figma in project scope (not user), it only works in that specific folder. Re-add it
globally with the -s user flag.
Auth keeps failing in the browser
Try Chrome or Edge instead of Brave or Firefox. Browser privacy extensions can block the
localhost callback Claude Code uses to receive the auth code.
What this unlocks
With Figma + Claude Code, you can:
• Pull a Figma design's structure into code and generate matching HTML/CSS/React
• Create new Figma designs from a text description, without opening Figma
• Generate FigJam diagrams (flows, architecture, mind maps)
• Extract design tokens (colors, fonts, spacing) into CSS variables
• Audit designs for accessibility, contrast, and spacing issues
• Bridge code components to Figma components via Code Connect
This setup is scoped to your user, so Figma is available in every folder you use Claude Code
from — not just claude-test.