As someone who likes to stay up to date with the design world, I’ve seen a lot of content around integrating Claude with Figma lately. And it honestly feels like it’s primarily aimed at people who code - as someone who doesn’t code at all, I felt a bit left out. Setting up MCP servers and bridging your design tokens to a codebase aren’t in my wheelhouse. It’s genuinely useful stuff, but not for someone who uses Figma the way an average designer does.

What I found when I actually started testing the integration is that there’s a whole workflow here that nobody’s really talking about, and it’s built for the non-developer side of the Figma user base. You can push structured diagrams straight to FigJam, and also use Claude to build design files complete with editable layers in the design canvas. It’s a total design collaborator that can reach into your workspace. Here’s why I started using it, and what a workflow like this can actually do for your designs…

Why use Claude with Figma?

When Figma already has its own AI

Figma has been building its own AI pretty aggressively. There’s the First Draft feature for generating UI from a text prompt, text tools for rewriting copy directly in your designs, and the biggest one: Figma Make, which lets you transform design files, images, or text instructions into working prototypes through a conversational AI interface. So why bring Claude into the mix at all when Figma already has AI?

The difference is less about output quality and more about how it lets me actually work. Figma Make is a prompt-in and design-out tool. You describe something, it generates, and then you can iterate on it, which is great for speed and experimentation. But it takes a clean prompt and runs with it, whereas Claude is more of a back-and-forth. You can spend twenty minutes working through a design problem, changing directions multiple times, reference your documents, debate UX decisions, and then say “okay now put that into Figma”. The whole conversation context goes with it, whereas Figma Make doesn’t have that thread.

Claude also handles messy inputs in a way Figma’s AI doesn't. I can get really messy with disjointed ideas, spelling errors, and screenshots that don’t make sense, and Claude just gets me. It’s excellent at inferring what I’m trying to convey and hands me something structured back.

Setting up Figma with Claude

There’s nothing technical about it

Again, I’m not talking about setting up an MCP server here, but simply integrating Figma with a Claude.ai connector. It does use MCP under the hood, but Anthropic hosts and manages it for you. There are a few things worth knowing before getting started: you will need a Claude Pro account, unfortunately, since the connector isn’t usable on the free tier. But a free Figma account is fine though.

In Claude, go to Settings > Connectors, browse the Figma connector, hit Connect, and follow the authentication prompts to grant Claude access to your account. It’ll open a Figma login in the browser, click Allow, and that’s pretty much it. You can configure the permissions if needed. Then it’s just a matter of prompting Claude for whatever you want.

Here’s what you can do with the Claude Figma connector:

• Create brand new Design or FigJam files from scratch
• Read and edit any file you give it the URL or file key to
• Create and modify elements and layers inside a file (basically, it can design for you)

What it can’t do:

• Browse your Figma workspace or list your files
• Rename existing files
• Move files between projects
• See anything about your Figma profile or history

What I actually use this integration for

And how I get the most out of it

The most useful thing about the FigJam side of the integration isn’t the diagramming itself, but what you can throw at it. I’ve pushed a typed-out wall of notes, screenshots of competitors’ onboarding flow, and a document of the product requirements and asked Claude to map it all into a user flow, and it just does it. It shows up as a preview in the chat first so you can keep tweaking it before it lands in FigJam.

And then there’s Figma Design. This part is basically vibe-coding but for design files. You describe your screen - layout, theme, the elements you need, and so on - and Claude builds it as actual native Figma layers, frames and all. The trick is being more specific than feels necessary, unless you’re just experimenting or short on ideas. But I recommend feeding it your design brief and any other notes or reference materials. It’s not going to be a finished design either way, the point is for it to act as a template of sorts so you can iterate on your own.

And lastly, I also use this integration to point Claude at what I’ve already designed and get feedback. The get_design_context tool pulls a screenshot of the node plus all the metadata - it can basically analyze the entire design file, see it visually, and read all its properties, as long as you give it the URL. This is an excellent way to spar with the chatbot about your process, constraints, and ideas. It can pull from its training data, UX research, design conventions, whatever’s relevant, and apply all of it specifically to what it’s looking at in your design file.

Not just for the devs

The Claude and Figma integration has a bit of an image problem - most of the content around it seems aimed at developers, which makes it easy to write off if you can’t code. But the designer-facing side of it is genuinely useful in its own right. FigJam can diagram from messy inputs, you can design files from conversation context, and get feedback grounded in what’s actually in your file. If you’re already on Claude Pro, connecting it to Figma takes just a minute and it’s worth finding out what it can do for your specific workflow.