Easy Tech TutsHow to Connect Figma to Claude AI | Design-to-Code Workflow | Easily 2026
By Impran M NLast checked against official docs
Handing a Figma file to a developer usually means someone re-reading every spacing value and colour by eye and retyping it as CSS. The Figma connector in Claude removes most of that.
It links Claude to Figma's remote MCP server, so Claude can read components, variables and layout data from a real frame instead of guessing from a screenshot. Setup takes a couple of minutes and works on Claude's free plan, which is what the recording uses.
The limit most people hit comes from the Figma side: how many design reads your Figma plan and seat allow. That table is below, after the steps.
01Pick the Figma file you want Claude to read
Open Figma and decide which file and frame you want to work from. The recording starts in the Recents view with several live projects visible.
The connector works on existing designs, so a populated file with real components and styles gives Claude far more to work with than a blank canvas. If your team keeps a shared component library in a separate file, note that as well. You can point Claude at it later.
02Open the connectors directory in Claude
In the recording, the route is the profile icon at the bottom left, then Get apps and extensions. Claude's help centre now documents a different entry point: click Customize in the left sidebar, open the Connectors tab, click the + button and choose Browse connectors.
Both land in the same Directory, with Skills, Connectors and Plugins tabs down the left. On a Team or Enterprise plan, an Owner or Primary Owner has to enable connectors for the organisation first. If you cannot connect anything, that is the likely reason.
03Search for Figma and add it
With the Connectors tab selected, type Figma in the search box. The recording shows two Figma results under Anthropic & Partners.
One is described as generating diagrams and better code from Figma context. The other describes the Figma MCP server pulling in Figma context to generate code aligned with your codebase. Click the + on the one you want.
04Authorize Figma and confirm the connection
Adding the connector opens a Figma sign-in and permission prompt. Approve it.
Closing the window without approving leaves the connector unauthorized. Once it completes, Claude opens a new chat with a small Connected to Figma notice at the top right.
The recording shows this on a Free plan account. Each person authorizes with their own Figma login, even inside a Claude team workspace, and Claude can only see files that Figma account can open.
05Give Claude a link to a specific frame
Figma's documentation recommends right-clicking a frame or layer and choosing Copy link to selection, then pasting that link into your prompt. The link carries the node ID the server needs to find the exact object.
Naming "the dashboard" in prose leaves Claude guessing between similar screens. Ask for something concrete: a React component for that frame, CSS variables for its colours, or a breakdown of its spacing and type. If the connector seems idle, click + in the chat box, hover over Connectors and check that Figma is switched on for this conversation.
06Extract tokens first, then review the code
For an ongoing codebase, ask for the colour, spacing and type values as a tokens file before generating components. It gives you one reference to check later output against, and it exposes inconsistencies in the Figma file itself, such as three near-identical blues.
Treat generated components as a first draft. Hover states, breakpoints and naming are still your call.
Check the output against the frame with both open side by side. On a limited Figma seat, batch your questions, since each read of the file counts toward the monthly cap.
| Figma seat | Starter plan | Professional | Organization | Enterprise |
|---|---|---|---|---|
| View or Collab | 20 per month | 6 per month | 6 per month | 6 per month |
| Dev or Full | 200 per day, 10 per minute | 200 per day, 15 per minute | 600 per day, 20 per minute | 600 per day, 20 per minute |
From Figma's rate-limits documentation, September 2026. Limits apply to tools that read from Figma; a few tools, such as whoami, are exempt. Figma changes these figures, so check the source before planning around them.
When it doesn't work
Figma replies stop partway through the month
Why: The Figma account has hit its MCP tool-call cap. View and Collab seats get 20 calls a month on Starter and 6 a month on paid plans.
Fix: Wait for the monthly reset, or move to a Dev or Full seat, which carries daily limits instead of a monthly one.
Claude says it cannot access the file
Why: The Figma account you authorized does not have access to that file, or the prompt names a file without linking to it.
Fix: Open the file in Figma under the same account, use Copy link to selection on the frame, and paste that link into the prompt.
No connect option on a Team or Enterprise Claude plan
Why: Connectors on those plans must be enabled for the organisation by an Owner or Primary Owner.
Fix: Ask your Claude workspace owner to enable the Figma connector, then authorize it with your own Figma login.
Frequently asked questions
Does the Figma connector work on Claude's free plan?
Yes. Anthropic lists directory connectors as available on all plans, and the recording completes the connection on a Free plan account. The tighter limit is on the Figma side.
Where is the connectors directory in Claude now?
Click Customize in the left sidebar, open Connectors, click + and choose Browse connectors. Older recordings, including this one, reach the same Directory through the profile menu's Get apps and extensions.
How do I tell Claude which design to use?
Right-click the frame or layer in Figma, choose Copy link to selection, and paste the link into your message. The link includes the node ID the Figma server uses to locate it.
Do I need the Figma desktop app?
No. The connector uses Figma's remote MCP server, which Figma hosts. The separate desktop server runs through the Figma app and requires a Dev or Full seat on a paid plan.
Sources and last check
Screens and click path come from the original recording in Claude on a Free plan account. The directory location, plan availability and Team/Enterprise owner requirement were re-checked against Claude's Help Center, and the frame-link method and tool-call limits against Figma's own documentation, in September 2026. That check added the current Customize > Connectors route (the recording uses the older Get apps and extensions menu) and Figma's per-seat limits, which the earlier version did not mention.
About the author
Impran M N
I've been hooked on technology for as long as I can remember — especially the new tools and AI apps that seem to land every other week. Easy Tech Tuts is where I write up whatever I've just worked out: I do the task in the real product, record the screen, and turn it into the guide I wish I'd found first.
