# How to set up Figma MCP with Claude Code (and design before you build) How to set up Figma MCP with Claude Code is a playbook on connecting Claude Code to Figma, having Claude design a screen in Figma before any code exists, fixing the design there, and then building the code from the finished frame. Playbook · By Lior · Works with Claude Code · Updated 2026-10-21 I don't let Claude write UI code first anymore. I have it design the screen in Figma, fix what I don't like there, and only then ask it to build. Changing a frame is quicker than changing code that's already wired up, and I'm reviewing a picture instead of a diff. It helps a lot. Here's the setup and the whole loop, run for real for this guide on a made-up habit app called Streak. ## What you need - Claude Code. - A Figma account. Your seat decides how much Claude can read from Figma, so check the limits below first. - A Figma design file for Claude to work in. A new page in an existing file is fine. > Limits, October 2026: Reading from Figma counts toward a limit. Writing to the canvas doesn't. A Full or Dev seat on the Professional plan gets up to 200 reads a day and 10 a minute (Organization: 15 a minute; Enterprise: 600 a day and 20 a minute). View and Collab seats get 20 a month on any plan. Writing to the canvas is free during Figma's beta, and Figma says it will become a paid, usage-based feature. [Figma's current limits](https://developers.figma.com/docs/figma-mcp-server/rate-limits-access/). ## Set it up 1. Install Figma's plugin from Anthropic's official marketplace: ```sh claude plugin install figma@claude-plugins-official ``` 2. If Claude Code is running, restart it. 3. Type `/plugin`, open the Installed tab, select `figma` and press Enter twice to sign in. 4. Click Allow access in the browser that opens. Back in Claude Code, run `/plugin` again: figma should show as connected. The plugin also installs Figma's skills, which teach Claude how to work with Figma reliably. That matters most when it writes to the canvas. > Can't install plugins?: Add the server by hand. You won't get Figma's skills this way: > > Then start a new session, run `/mcp`, select figma and choose Authenticate. ```sh claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp ``` ## 1. Ask Claude to design the screen Give Claude a link to your Figma file and describe the screen. I asked for the main screen of Streak: today's date, the current streak with this week's days, a list of habits with a check for each, and a button to check in the next one. It's an iPhone app, so I asked for SF Pro and iOS sizes. ![First draft in Figma: an iPhone screen titled Today, with a 47-day streak card, a week row, four habit rows with icons and check marks, and a black pill button reading Check in: Drink water](https://www.liorpesoa.com/library/guides/figma-mcp-claude-code/first-draft.webp) _The first draft, straight from Claude._ It built the screen on a new page with auto layout and a reusable Habit row component, used four times. Everything is real Figma: every text, frame and component can be edited. It was also forgettable: clean cards, soft colors, the same screen as every other habit app. ## 2. Fix it in Figma, not in code This is the step that saves the time. Changing the whole direction of a screen is one sentence while it's still a design. I asked for something bold and editorial: a huge condensed number, ruled lines like a newspaper, a numbered list instead of cards, and one strong accent color. Then two small notes: the space next to the number was empty, and the habit names didn't line up because the numbers 01 to 04 have different widths. Claude added a column of stats beside the number and gave the numbers a fixed-width column. ![Two versions of the redesigned screen side by side. Left: a STREAK masthead, a huge condensed 47, a ruled row of dates and a numbered habit list on warm paper. Right: the same screen with a column of stats beside the 47 and the habit names lined up](https://www.liorpesoa.com/library/guides/figma-mcp-claude-code/editorial-redesign.webp) _Left: one sentence later. Right: after two small notes._ You can also fix things yourself in Figma. When you ask Claude to build, it reads the frame as it is right then. ## 3. Build from the frame Right-click the frame, choose Copy link to selection, and ask Claude to build it. It reads the frame's layout, colors and text, downloads the icons, and writes the code. ![Side by side: the Figma frame on the left, and the page built from it running inside an iPhone on the right, nearly identical](https://www.liorpesoa.com/library/guides/figma-mcp-claude-code/figma-vs-code.webp) _Left: the Figma frame. Right: the code Claude built from it, on an iPhone._ The built screen matched the frame closely, down to the font widths, and it works: tapping a habit checks it off, and the button checks in the next one. [Try the built page](https://www.liorpesoa.com/library/guides/figma-mcp-claude-code/demo/index.html) (it uses SF Pro, so it looks best on Apple devices). ## If you hit the limit Building from the frame failed the first time with: "You've reached the Figma MCP tool call limit for your Full seat on the Professional plan." It was the 10-reads-a-minute limit, not the daily one. Waiting a minute and asking again worked. > Save reads: Designing and editing the canvas doesn't count toward the limit, but every screenshot and every design read does. Ask for one screenshot after a batch of changes, not after each one. ## Questions ### Is the Figma MCP server free? Reading designs is included with your Figma seat, within the limits above. Writing to the canvas is free during the beta, and Figma plans to make it a paid, usage-based feature. ### How do I connect Figma to Claude Code? Install Figma's plugin, restart Claude Code, then sign in from `/plugin`: ```sh claude plugin install figma@claude-plugins-official ``` ### Can Claude edit my existing Figma designs? Yes. With the remote Figma MCP server it can create and change frames, components, variables and auto layout in files you can edit. ### Does it work with Cursor or Codex? Yes. In Cursor, run `/add-plugin figma` in the agent chat. Other tools can add the server by its address, https://mcp.figma.com/mcp. ## Related - [Design Crit](https://www.liorpesoa.com/library/design-crit.md) - [Claude in Chrome: what it does and how I use it](https://www.liorpesoa.com/library/claude-in-chrome.md) - [Frontend Design](https://www.liorpesoa.com/library/frontend-design.md) --- Page: https://www.liorpesoa.com/library/figma-mcp-claude-code Library: https://www.liorpesoa.com/library