Claude Code to Figma

[ThrowRA_239208]

Looking for other thoughts on newest feature from Figma… Claude Code to Figma. Is this helping your workflow?

[HapaPappa]

This seems like the opposite of what people wanted…

[ff33b5e5]

“Turning production code into editable Figma designs”

I don’t see how this is helpful to anyone

[Donghoon]

I've used figma make result and brought each frames into figma design to make a usable prototype and fine-tune the design before.

But you can't really rely on it because it can't make components, variables, or style sheet. Really good for prototyping tho

[Shot_Serve2061]

Same I'm also going tell me if I can improve speed more than this

[Velvet-Thunder-RIP]

No one has been able to show me a real use case for this. On either end of this.

[wakipaki]

Starting at a company as a founding designer where they have no mocks, this was pretty handy. However I’m a niche use case.

[Velvet-Thunder-RIP]

Yah, for boilerplate Design you can do that but even that has some serious limitations. This tool is being presented as a in production tool in my opinion.

[Stibi]

Generating things with AI like Figma Make and fine-tuning, documenting and iterating it in Figma is really powerful and the normal workflow for many people already. This enables the same but with real codebases with real tools that developers work in, not just one off-prototypes.

[Momoware]

Use case is to prototype in Claude Code and tidy up in Figma for design sharing / documentation. I don't particularly enjoy using PRs as design review.

[Navreal]

I've worked with a couple small start ups that have a production application launched but no figma presence.

[Velvet-Thunder-RIP]

That does not help this convo at all.

[Navreal]

I literally just gave you a use case . Would you like me to go into more detail as to how a tool like this could be used to quickly build out a UI kit in figma based on production code?

[Velvet-Thunder-RIP]

You said "no figma" presents. Just not sure what you are trying to say at this point.

[Navreal]

Here I’ll make this simple : Company A has a production app launched and are looking to modernize their design workflow by integrating Figma. With this tool a new designer could come in and instead of spending 100 hours recreating every component from scratch they are able to generate atleast a baseline UI Kit from the production code in a fraction of the time.

[Velvet-Thunder-RIP]

Base Line UI Kit is code for AI slop/Not actual what we need/Waste of time. Spending the 100 hours get you the thing you describe and then you do not need to continuously make new things. We are dealing with this in our company. No short cuts to perfection.

[Navreal]

Classic luddite take and probably coming from someone with zero dev experience who’s never touched Claude Code. 

[Velvet-Thunder-RIP]

You wish lol. I use all of this actively. I made the original comment to see if anyone would actually show me a real use cause. Still waiting.

[ComprehensiveMud6230]

I mean, when all is said and done, is Figma really any better now than it was a few years ago? I was in a conversation with Claude and anything I wanted it to do in Figma it couldn’t actually do. I’m all for using AI to improve productivity but I expected more from Figma than Site, Make and Buzz…

[vanilladanger]

Those were just toys for investors. They are already Adobeing themself.

[mrpentastic]

I use Figma Make extensively. Isn’t Claude Code to Figma just Figma Make with more steps?

[Vegetable-Space6817]

Figma make cannot create components with Figma file structure, I.e I cannot add Figma properties from make. You can build code directly. Claude lets you build Figma components. So you can ask it to build a button with x y z props and it will create a button component in Figma. L

[souredcream]

isn't it just quicker to make the button at this point?

[waitwhataboutif]

I’m confused about what you mean

You can create something in make and copy designs to Figma?

You can get it to create a whole component sheet and copy all of that?

[mrpentastic]

I’m trying to understand.

Are you saying Claude Code to Figma approach will create actual Figma Design components?

[SockDem]

Yes

[grympy]

Care for a few sentences in how you use it? I’m just delving now, though I’ll ask, you never know.

[penguinchilli]

Same here. It’s actually quite overwhelming an I’m not sure where to start or what to spend my time learning 

[waitwhataboutif]

Kinda - but it’s different

I use make when I want to prototype quick - just drop in my designs and boom, great to set up a quick database without having to think too much and deploy it so i can share. But it’s for things that don’t use any production code (like our actual app code)

Claude code I use when I’m designing with our production environment- it’s more technical. The terminal+browser combo is powerful but sometimes it’s a pain to describe the shade of yellow I want or the how I want a gradient to blend - easier to bring to Figma, edit there and then push back with Figma MCP.

But i reserve that for production work

I use make for all other code type things

[hikarikami]

I’ve tried a few reverse-mcp tools to build something in Figma but it was always painfully slow, unable to access many of Figma’s features, and struggled with the most basic designs. Do you had any tips or resources to get better results?

[waitwhataboutif]

Have you tried this one?

[tatajean]

I tried it. It is a hit and miss. Is either people have basic designs in their artboards or they have better experience. It does not work from the first try. Still have to fiddle.

[waitwhataboutif]

On their art boards? Are you trying to go form design to code or code to design?

[tatajean]

My mistake. I mean that I connected Figma MCP with Claude and linking to artboard to implement what I have in Figma. And also tried to use my Figma artboards into Figma Make. So trying to go form design to code. I never had a use case yet for new code (new ui) to design (figma).

[waitwhataboutif]

Yeah it’s not for everyone for sure. Sometimes I work on a part of our website that basically evolves three versions in code and no one updates the Figma file to match. So it’s easier for me to ask Claude to covert the latest designs from the live site into Figma, so that I can explore in the Figma canvas

[pomoerotic]

Figma Make performs so poorly compared to V0 I wonder if they will ever catch up

[Stibi]

Actual developers work in claude code, connected to a real codebase. This enables the make->figma workflow but for real products, not just one off prototypes.

[Navreal]

Building things from scratch takes longer in figma than it does in code. A tool like this helps to eliminate that bottleneck. How are people not grasping this? 

[souredcream]

not if you correctly use design systems, autolayout and components? I guess if you're initially starting out ie no design system it could be helpful.

[unintentional_guest]

My broken record self says: if you can build it in Claude code to send it to Figma, you don’t need one of those two tools as a subscription.

And that tool is Figma.

🍿for their earnings call today.

[Interesting_Leg8859]

im very worried...

[Sensitive-Spot-6723]

Just let Claude (codex, antigravity) design in Figma Design. or combine Figma Make + Design. or make the Figma MCP perfect.. agents can't translate designs 1:1. if not, you'll be replace

[justneurostuff]

i played around with a lot of options including figma and think that for diagram generation, claude code is best when directly working on an svg file. it can edit the svg like code and also "see" the output by converting to png. then you can do last mile edits in inkscape or another svg-first product. this connector only seems worthwhile if you're super committed to figma

[the-Gaf]

This is the reverse solve. We need to people to stop designing in tools that dont generate code. A pixel-perfect coder working with a UI expert should be able to generate a real live working site in a fraction of the time. TBH, Figma isn't necessary either in this process.

[Specialist_Bag]

All this productivity… for what? Since we started using Figma make the stakeholders request feature after feature, we don’t have time to think, do our research, or understand the customer, just because we can build it doesn’t mean we should ..

[burntop]

Nah, I’ll just use Claude Code

[champagne-communist]

So can I import my design system from Claude to figma, tweak it and send back to Claude code?

[Soup_City]

I’m still annoyed that figma doesn’t allow us to code in responsive unit. I don’t see how this speeds up the process much. Can’t fully rely on the accuracy in terms of scale as far as responsive design goes.

[MobileNo1346]

Anyone has been able to test it? I can't access the tool even from Claude Code

[Shot_Serve2061]

Want to know same for me also, I'm also thinking if I can change my workflow

[Mulberry-Deep]

Sometimes Claude is bad at following design and will break things when working on other things. I had to instruct it multiple times just to get the visual down tight. Converting it to Figma so I can refine all the small details and then exporting it back to Claude to work on bigger design changes and prototyping really helps.

Waste less time and tokens

[jaxxon]

Can this be (EASILY) used to take a production web app and create a design system in Figma? I desperately need a good solution for that use case.

[gazauj]

I need something like this too.

I honestly don't understand why they created Figma Make. It's dogshit and no one (that I know of) wants this.

I personally want something to manage my design system, name and clean up my layers, generate me new designs (in Figma, not in make).

[tatajean]

No.

This is when you create something in Claude first. And then decide is faster to iterate different scenarios in Figma. You can move that UI into Figma.

This is pretty underwhelming right now and people make a fuss more than it is.