Skip to content
The Briefing archive

8,600+ readers · Every Tuesday

The Briefing·Edition 112·

We plugged Claude Code into Figma but not the way you think.

How Claude Code + open-source Figma Console MCP creates a side-by-side design flow that draws straight into your Figma file—no credits or rate limits.

Kieran BallJames Devonport

Kieran Ball & James Devonport

Co-founders · 4 min read · 7 sections

ShareLinkedIn
Tools in this editionFigmaClaudeMakeSupabase

Last issue we mentioned Figma's new official MCP server in the radar section. James has been using a different one. It's a free, open-source tool called Figma Console MCP, and it has turned Claude Code and Figma into a side-by-side design workflow he now uses daily. In this deep dive we'll cover what it is, how the workflow looks, and where the rough edges are.

01 / 07

What it actually does

MCP (Model Context Protocol) is the standard way of connecting an AI to outside tools, a bit like a universal plug socket. Figma Console MCP is an open-source MCP server that plugs Claude Code into the Figma file you have open on your screen.

Once connected, Claude can see what's on your canvas and draw straight onto it. You describe the screens you want in plain English and they appear in your file, where you can edit them like anything you'd design by hand.

02 / 07

Why not Figma's own AI tools

Figma has its own answers to this, and James tried both first. Figma Make generates designs and apps from prompts, and Figma's official MCP server connects AI tools to your files in a similar way.

Both showed promise, but both have usage meters attached. Make runs on AI credits that vary with the model and the complexity of the task, while the official MCP server has rate limits on reading your designs, from 20 reads a month on the free plan up to a few hundred a day on paid seats.

That seems fair enough, as the AI costs Figma money to run. In practice though, James kept being pulled out of the flow mid-design, which is what sent him looking for an alternative.

03 / 07

The setup

After seeing Figma Console MCP recommended repeatedly on X, James pasted the GitHub repo into Claude Code and asked it to configure the integration for him. Claude handled most of the setup on its own.

On the Figma side you need the desktop app plus a small bridge plugin that comes with the tool. The daily routine from there is simple. Open Figma, open the file you want to work on, and run the plugin from the plugin menu. Claude Code then talks directly to that file.

04 / 07

How it fits a working day

James keeps Figma on the left of his screen and Claude Code on the right. He describes what he wants and Claude builds it on the canvas.

A full app flow on the Figma canvas with Claude Code open alongside
James's setup, a full app flow on the Figma canvas with Claude Code alongside

He mostly uses it to design whole app flows. Ask for every screen in a user journey and Claude creates them, and because it can read the canvas as well as write to it, you can keep refining the same work. Add missing states, expand a flow, change the visual direction. It feels like an ongoing design conversation rather than a one-off generation.

05 / 07

The unexpected win: App Store screenshots in ten languages

The most useful application so far has been outside product design. James uses it to produce App Store screenshot sets in ten languages, translating the copy and keeping every language's set aligned whenever the source design changes.

Rows of localised App Store listing screenshots in German, French, Spanish and Italian
The localised App Store listing sets, kept in step with the source design

What used to take hours of duplicating, editing and checking is now handled through the same conversation with Claude.

06 / 07

The reality check

  • This is a community-built open-source project, not an official Figma product. A Figma update could break it, and there's no support team to lean on.
  • It needs the Figma desktop app, and remembering to run the bridge plugin each session is a small but real bit of friction.
  • Your Claude usage still costs money. The Figma side has felt effectively unlimited to James on Figma's cheapest paid plan, which is $16 a month, but Claude Code has its own usage limits and heavy design sessions eat into them.
  • James started on Figma's free plan and it worked, so you can trial the whole thing without paying Figma anything.

07 / 07

How to start

If you already use Claude Code and the Figma desktop app, the setup cost is small. Paste the GitHub repo into Claude Code, ask it to configure the integration, then import the bridge plugin when prompted.

Start with something contained, a single user flow or a repetitive job like localised screenshots, and expand from there.

This tool has changed the role AI plays in my (James') design process. Instead of generating an idea somewhere else and manually rebuilding it in Figma, Claude Code works as a collaborator inside the actual canvas. It helps me design the app, then helps me package and market it once it's ready. The time it has given back to me has been substantial.

Worth passing on?

ShareLinkedIn
Kieran Ball

Written by

Kieran Ball

Co-founder, Create With

James Devonport

Written by

James Devonport

Co-founder, Create With

The Create With Briefing

Get the next edition first.

Real-life use cases, the tool changes that matter, and the best events near you. Free, every Tuesday, to 8,600+ readers.