Claude Figma connectorWhat Claude can do in your Figma account.
The Claude Figma connector exposes 9 tools. 7 read your files, from layer structure to design variables, 1 adds a diagram to FigJam, and 1 is described without a clear read or write effect. Here: what Claude pulls from Figma, what it produces, and where it stops.
Verified Trustpilot reviews · AI, automation & growth agency
What the Claude Figma connector changes between design and code
A front-end developer receives a finished screen in Figma and has to rebuild it in the product's codebase. Instead of measuring every margin and copying colour codes by hand, he pastes the frame link into Claude. Claude reads the layout, the variables and the components straight from the file and proposes code that follows what the designer drew.
Start from the real design, not a screenshot. get_design_context retrieves the design context of a layer or a selection, returned as React with Tailwind by default, and you can ask for another stack in your prompt. On a very large page, get_metadata first gives a light outline of layer names, types, positions and sizes, so Claude only fetches styling where it needs it.
Stay inside the design system. get_variable_defs lists the colours, spacing and typography tokens used in a selection, and get_code_connect_map tells Claude which Figma instances already match a component in your codebase. The generated code reuses your existing button instead of inventing a new one.
Sketch a flow in FigJam from a sentence. Describe a signup journey or a release plan and generate_diagram draws it in FigJam as a flowchart, a Gantt chart, a state or a sequence diagram, in a new board or an existing one.
What the Claude sheet does not offer: the canvas-editing tools Figma documents elsewhere, the ones that build frames and components inside a design file, are not in its list today. get_screenshot also only returns a description of the image when called from Claude. And nothing happens on its own: no tool reacts when a designer publishes a change. For that kind of trigger, the Figma n8n integration and the Figma Make integration are the right fit.
Five words before you connect Figma
- Connector
- The link you set up once between Claude and an account you already own, so Claude can work in it while it answers you.
- Tool
- One named action the connector opens to Claude. Claude picks the ones it needs on its own; the directory lists each by name.
- Authorization
- Figma's own sign-in screen, where you hand Claude the access it will use afterwards. Granted once per person and revocable later.
- Approval
- The confirmation Claude waits for inside the conversation before it goes ahead with something that would alter your account.
- MCP
- The common standard connectors rely on: the piece that lets an assistant such as Claude talk to an outside service like Figma.
Connect Figma to Claude in three steps
- 01
Find Figma in Claude
Open Claude's settings, go to Customize, then Connectors, and find Figma in the list. On a Team or Enterprise workspace, an Owner or Primary Owner must enable the connector first; members can then sign in one by one.
- 02
Launch the connection
Hit Connect on the Figma row and log in to Figma in the window Figma opens itself. If the connection breaks one day, choose Disconnect and connect again from the same list.
- 03
Check the authorization screen
Read Figma's authorization screen before you accept. It belongs to Figma, not to Claude, and it sets what the access covers. You can take that access back later from your Figma account as well.
The 9 tools, sorted by what they do
Figma gives Claude 9 tools: 7 that read your account, 1 that change something in it, and 1 no official source describes.
Three groups: what Claude reads from your files, what it adds to FigJam, and one tool no source ties to a read or a write. Tool names stay as Claude shows them.
- 7 read
- 1 write
- 1 not documented
What Claude reads (7)
7 toolsSeven tools that pull context out of Figma without touching your files.
get_design_context
Reads a layer or your current selection and returns what a developer needs to rebuild it: structure, styling and layout, expressed as React with Tailwind unless you ask for something else.
get_screenshot
Captures your selection so the code keeps the same layout as the design.
get_metadata
Returns a sparse outline of your selection in XML: layer IDs, names, types, positions and sizes, with no styling. Claude can then zoom into the parts that matter.
get_variable_defs
Lists the variables and styles a selection relies on, such as colours, spacing and type scales, so generated code points at your tokens rather than raw values.
get_code_connect_map
For each component instance in your selection, tells Claude which component of your codebase it corresponds to, based on your Code Connect setup.
get_figjam
Pulls a FigJam diagram as XML metadata, similar to the design outline, plus screenshots of the nodes, so an early architecture sketch can feed the build.
whoami
Tells Claude who is signed in to Figma: the email address, the Figma plans the account belongs to, and the seat held on each.
What Claude adds (1)
1 toolOne tool that puts something new into FigJam. No source describes a confirmation specific to it: the general rule below applies.
generate_diagram
Approval: see the ruleDraws a FigJam diagram from a plain description or from Mermaid syntax: flowchart, Gantt chart, state or sequence diagram. You do not need to write the syntax yourself, and the result lands in a new FigJam file or an existing one.
Not classified (1)
1 toolFigma describes it, but no source says whether it reads or writes anything, so we leave it unclassified.
create_design_system_rules
Figma presents this one as a prompt for a rules file that guides code generation toward your design system. No source says whether it reads or writes anything in your account, so this page leaves it out of both groups.
What Claude asks before acting
By default, Claude stops and asks for your go-ahead before each action it takes on an account for you. The request appears in the conversation when it matters.
On a Team or Enterprise workspace, owners decide whether members may let certain actions through without being asked every time. They can also restrict what a connector may do across the organization, for instance keeping reads and closing writes, and that choice applies to everyone. Claude also works with your Figma rights and nothing beyond them: a file you cannot open, Claude cannot open. The official per-tool label, read-only versus write, only shows in the settings of a connected account, which is why this page classifies tools from published sources alone.
Which plans include it
Of the 819 sheets in the official directory, none states availability by plan. That connector-by-connector answer is published nowhere, and it is a real gap in the catalogue.
What is public is the general rule: remote connectors are open to all users on Claude, Cowork, Claude Desktop and mobile. On Team and Enterprise, an Owner or Primary Owner turns a connector on for the organization before members can sign in. Figma seats and plans are a separate matter, handled by Figma. For the up-to-date state of this connector, look at its sheet in the official directory.
Where the Claude Figma connector stops
A connector is not an automation. Claude calls these tools while it answers you: nothing starts when a designer publishes a library or comments on a frame.
Only Figma documents this connector: no Claude help article covers it, so these limits come from Figma's pages and the directory sheet. The tool list is an observed floor, not a promise, since an administrator can open actions that appear on no public sheet. The partner badge in the directory is not a security audit, and Anthropic states on each sheet that it does not pick the tools a publisher exposes nor guarantee how they behave. The Integrations hub lists every other way to connect Figma.
Need help connecting Figma to Claude?
A person reads every message.
