Figma just shipped the ability to bring UI work done in Claude Code straight into Figma as editable design frames. Use this to explore new ideas in Figma, view multi-page flows on the canvas, or reimagine user experiences.

You can then use the Figma MCP to go right back into Claude Code with your updated designs. To get started install the Figma plugin with the following command: /plugin install figma@claude-plugin-directory

This is fire. code becoming design and design becoming code - that wall is finally falling. We've been chasing the same idea at Dropstone with Share Chat - one link and devs, designers, AI agents are all in the same live workspace love seeing this from the Claude team. The whole ecosystem is moving in the right direction.

This will save me hours of “move the button to the right” and “add top padding” prompting.

We have a pretty solid Storybook, and I built an MCP that extracts the whole design system from it. Combined with Figma integration, I can go from design to consistent code really quickly. Feels like the right approach.

i would like the other way, send from claude code to figma

you can do this already as well :) just use the Figma plugin

used it just now to build 22 screens for onboarding from figma -> CC -> figma > too slow and opens up 22 windows in your face > does not tell you where it's saving the file so you need to search for it > does not organise screens for you so you have to manually arrange them Overall not a 10/10 experience at all. will look forward to the next version

So sick! I’ve been wanting this exact flow for months now. Thanks for bringing this to reality.

Until it's using components and bidirectional variables, it's practically useless.

this collapses the design-to-dev handoff loop entirely. the old cycle was: code something → screenshot → paste into figma → designer annotates → dev re-implements → repeat. now it's: claude code generates → figma shows you editable frames → iterate in place. for small teams and solo builders this is the bigger deal. the design review step was always the bottleneck between "i have an idea" and "this looks good enough to show someone." that step just got compressed dramatically. the deeper shift: "designer" stops being a role that sits between engineer and user, and becomes a perspective anyone with good taste can apply anywhere in the process. that's not a threat to designers — it's a massive leverage upgrade for the ones who lean into it.

I enjoy using Pencil a lot. Now with this I’ll definitely try Figma and see how they compare

this closes the loop i've been wanting. building UIs in claude code is fast but i always had to screenshot and recreate in figma for client reviews. editable frames change that completely

The Designers are in the belly of the borg already. Claude is actually quite good at tweaking designs. And combining design ideas/elements.

Oh, this is very useful! Round-tripping has been halved.

I'm good. I prefer

Does this reduce need for separate front end teams

Can it design in Figma using the existing figma design system instead of generating a design from already written code?

Love it, I was looking at this a few days ago

Editable frames are the point. Before this, moving from code to design killed structure and intent. If that stays intact, handoff stops being busywork.

@cashew_111

While this new feature does make Figma more accessible, I've found that seamless integration between code and design tools can also make designers overly reliant on pre-built UI components. Perhaps this integration could also enable more innovative use of code-generated components as custom UI elements, not just mere imports?

Can’t make this up. You guys are seriously working in reverse. You need to be working on how to get things OUT of Figma make into the broader distribution platforms – Wix, HubSpot, etc. I’d pay $5,000 to get my full Make prototype right now directly connected from Make to HubSpot so that I could make LLM changes and pipeline uodate over at Hubspot

YESSS!!!!!

this workflow is going to collapse the design-dev loop. how does it handle design tokens, does it map to figma variables/components or mostly raw frames?

wait so now i can prototype in claude and my designer can't tell me it's "not technically feasible" this changes everything (for my excuses)

can it generate directly or it needs existing code? i want to be able to directly generate from cowork/code

I use Claude Code to visually edit my UI, pretty good so far!

The handoff era is slowly dying

@TomAddis10

needed this a week ago hahaha looks great.

@trq212 @bcherny is this feature available in Claude desktop or the web? I'm finding that setting up Claude code is very cumbersome for non tech users and I'm facing resistance to adoption of Claude from the product/design folks because of it

Oh if this only existed a year ago! :)

This pretty much kills all UI-focused AI products like lovable..

This inverts the traditional design-to-code workflow. For a decade, designers handed off Figma files that developers never matched perfectly. Now AI generates code, and designers can refine the output. The bottleneck isn't moving from design → code. It's moving from idea → something that works.

This changes everything for designers—creativity just leveled up.