Name: Claude Code to Figma
Uploaded: 2026-03-06T04:45:04.000Z
Duration: 3 min 20 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

I'm the design director on the AI team at Figma.

Past simple

And I'm Alex, an engineer who worked on the feature that we're showing you here today.

I'm really excited to show you this workflow that we've been working on.

Ideas can come from anywhere from doodles to code these days, and

code is really interesting because it can get you to somewhere real very quickly,

but it also runs this risk of just rabbit holing down and kind of missing out on a lot of the exploration stage.

Exploring in code really means changing code.

It also means creating new git branches, feature flags, threading variables and state and data through all these different code paths.

Ultimately, versions that you end up with, they really just live on your laptop.

They're not something that you can easily share and collaborate and show to other folks.

And so oftentimes I find that the feedback is often shared in the form of screenshots and video recordings and things like that.

The decisions that you make in code often are also ultimately very single file.

They have to happen in a certain order and it kind of limits your ability to explore horizontally and think about the big picture.

And so for us, the canvas is key to a lot of our workflow.

It's easier to engage as a team, you can see the differences side by side immediately, and

exploration just feels cheaper and more carefree.

Today we're releasing Claude code to Figma, a new feature in the Figma MCP server.

It can capture any running UI, state your browser and paste those as editable Figma frames right on the canvas.

I have some working code that I really want to explore, so I'm going to spin up Claude and ask it to spin up a dev server.

Looks pretty cool, but we could probably make it work a little bit harder.

So what I'm going to do is I'm going to go back into Claude code and I'm going to ask it to send the My Pantry page to Figma.

I also wanted to capture a small detail here.

I can select element and I can pick up one of these cards that I think could be better explored.

So just by clicking it, it's already sending it to Figma, I can open up my file and there it is.

Now I can come and get my whole design team and we can start exploring variations on these designs.

And so for us, it's not really about polish, it's about exploration.

We want to try out as many variations until we get to something that we feel really excited about.

So we've jammed with the team on this and we've landed in these four different solutions that all really address the problem in quite different ways.

As an engineer, I also have this great context that is a bird's eye view of all the different trade offs and can make really clear engineering scope considerations based on this.

That way no time is wasted on the implementation details of figuring out how to pull off each of these ideas before we're even ready to commit to which direction we want to go.

And finally, once we have selected one of those ideas, it's really easy for me to use the Figma MCP server to bring those frames back into my code editor and keep us moving forward as a team.

So what's really great about this is that it uses the best of both worlds.

Code helps us get you to something that feels real quicker, but

Canvas helps you explore and choose direction and really decide what's worth building.

We've had a great time building code to Canvas and we're so excited to see what you end up building with it.

Subtitles ListPlay Video

Claude Code to Figma

ultimately

context

figure

engage