Guides / Connect your tools

Connect Figma to Claude and turn designs into working pages

Figma's MCP server lets Claude read your frames, variables and components, and even write back to the canvas. Here is the setup and how GTM teams use it.

Nicolas de la Guardia Nicolas de la Guardia · Co-founder · Engineering & data15 min setup · checked

You connect Figma to Claude through Figma's official MCP server at https://mcp.figma.com/mcp: one command in Claude Code, or a custom connector in the Claude app, then sign in with your Figma account. Claude can then read the frames you point it at and build from them instead of guessing from a screenshot.

What you need

  • A Figma account. A Dev or Full seat on a paid plan for regular use (see the limits below)
  • Claude Code, or the Claude desktop or web app on a paid plan
  • A Figma file you can open, ideally with named layers and variables

What the connection gives you

Figma's MCP server exposes a set of tools Claude can call. The ones you will use most:

  • get_design_context returns a structured, code-shaped description of a selected frame: layout, text, components and styles.
  • get_screenshot returns an image of the frame so Claude can check its work against the real design.
  • get_variable_defs pulls the variables and styles used in a selection, such as colours, spacing and type, so generated code uses your tokens instead of hard-coded values.
  • get_metadata returns a light map of a large file so Claude can find the right node before fetching the heavy detail.
  • Writing to the canvas, on the remote server, lets Claude create and edit frames, components and auto layout in your file. Figma describes this as a beta that will later become usage-based.

If MCP itself is new to you, start with what MCP servers are.

Set it up in Claude Code

  1. Install the Figma plugin (recommended). It bundles the server settings with Figma's own skills for common workflows. 
    claude plugin install figma@claude-plugins-official
  2. Or add just the server. If you only want the connection, add the remote server directly. 
    claude mcp add --transport http figma https://mcp.figma.com/mcp
  3. Sign in. Start Claude Code and run /mcp, choose the Figma server and complete the Figma login in your browser.
  4. Confirm it is connected. claude mcp list should show the Figma server as connected.
  5. Test with a real frame. In Figma, right-click a frame, choose copy link to selection, paste the link into Claude Code and ask it to describe the frame. If it can name the layers and styles, you are set.

Set it up in the Claude app

  1. Open Settings, then Connectors. If Figma is listed, add it from there. If not, choose add custom connector.
  2. Paste the server URL. Use https://mcp.figma.com/mcp and give it a name such as Figma.
  3. Connect and sign in. Approve the Figma login, then enable the connector in a chat from the tools menu.

Check your seat before you plan a workflow around this. Figma's guide says Starter plan users, and View or Collab seats on paid plans, are limited to a handful of tool calls per month. Dev and Full seats on Professional, Organization and Enterprise plans get per-minute rate limits instead.

How GTM teams use it

Design-to-code is the obvious use, but most of the value for a GTM team is speed on campaign surfaces:

  • Landing pages from a frame. Link a page design and ask Claude to build it with your site's existing components and tokens, then compare it against the screenshot.
  • Campaign variants. Ask Claude to duplicate a one-pager frame per industry and swap the headline, proof points and logos from your messaging notes.
  • On-brand assets. Pull your variables once so every generated email header, social card or deck slide uses the same colours and type.
  • Design checks. Ask Claude whether a built page still matches the Figma frame and list the differences.

Prompts that work

Be explicit about the frame, the target and the constraints. For example:

Build this frame as a page section: [link to selection]
Use our existing components in src/components and the
tokens from get_variable_defs. Do not hard-code colours.
Check the result against the frame's screenshot and list
anything that still differs.
  • Link to a frame, not the whole file. Large selections are slow and can be cut short. Work section by section.
  • Name your layers. "Hero / Headline" gives Claude far more to go on than "Frame 482".
  • Use variables and auto layout. Tokens and constraints translate into clean, responsive code. Absolute positioning does not.
  • Always ask for a screenshot check. It catches spacing and wrapping mistakes the structured data alone can miss.

Want campaign pages and assets produced from your designs as part of a running outbound motion? Book a GTM Engine Review.

Frequently asked

Does Claude change my Figma file?

Only if you ask it to use the write tools, and Claude Code asks for approval before running a tool you have not allowed. Reading a frame never changes it.

Do I need the Figma desktop app?

No. The remote server at mcp.figma.com works with your Figma account in the browser. You link frames by copying a link to the selection.

Why does Claude say it cannot find my frame?

Usually the link points to the whole file or a page rather than a frame, or the file belongs to a team your Figma login cannot see. Copy the link to the specific selection and check you can open it yourself.