Skip to content
Sam DespoNewsletter
Design

Figma MCP

Lets Claude read your Figma designs and build matching code, or draw new ones.

FreemiumBy Figma
View on the web

What is it?

Figma is where most product and web design happens. This official connector lets Claude look at a design and build it, or go the other way and draw a design from a description.

Paste a link to a frame, ask for "this screen in React", and Claude reads the actual spacing and colours rather than guessing from a screenshot. The hosted server needs no desktop app. Writing to the canvas is free during the beta; the desktop version needs a Dev or Full seat.

What Claude can do once it's connected

  • Read a selected frame's layout, colours, text and spacing
  • Turn a design into working front-end code
  • Reuse your real components so the code matches your system
  • Create and edit designs directly on the Figma canvas
  • Work in Figma Design, FigJam and Slides

Install in Claude Code

Open your terminal in the project folder and run:

Command
claude mcp add --transport http figma https://mcp.figma.com/mcp

You'll be asked to sign in or paste an API key the first time you use it.

Who it's for

Designers handing work to developers, and developers tired of eyeballing mockups.

Best for

  • Design to code
  • Checking a build matches the design
  • Generating first-draft layouts

Why it made the list

It is the official bridge between design and code, and it now works in both directions.

More MCPs like this

  • Canva MCP

    Design

    Lets Claude search your Canva designs, create new ones and export them as files.

    Freemium

  • 21st.dev Magic

    Design

    Gives Claude a library of polished interface components to drop into your app.

    Freemium

  • Playwright MCP

    Browser & Search

    Gives Claude a real web browser so it can click around, test and screenshot sites.

    Open source

  • Higgsfield MCP

    Design

    Lets Claude generate images and videos with models like Nano Banana and Seedance.

    Freemium