Figma-to-code
Unanswered
Cuban Crocodile posted this in #help-forum
Cuban CrocodileOP
is there any real good way of transforming figma design pixel-perfect to code without using ai? AI Is really messing up the design. I tried builder.io, anima, figma-to-html nothing worked it always turned out horrible, either wrong sized, images incorrectly placed etc.
12 Replies
@Cuban Crocodile is there any real good way of transforming figma design pixel-perfect to code without using ai? AI Is really messing up the design. I tried builder.io, anima, figma-to-html nothing worked it always turned out horrible, either wrong sized, images incorrectly placed etc.
Im not really sure how to perfectly do it without AI. You could give v0 a shot. They just released an update: https://x.com/v0/status/2080632084662775954?s=20
Cuban CrocodileOP
oh crap , i knew those left over credits from a while ago would come in clutch one day
nice 🔥
@erikcodez nice 🔥
Cuban CrocodileOP
I'm disappointed to say after spending 30$ just for this feature, it sucks at it. Lol this is what it gave me, and the second image is the actual design
@Cuban Crocodile is there any real good way of transforming figma design pixel-perfect to code without using ai? AI Is really messing up the design. I tried builder.io, anima, figma-to-html nothing worked it always turned out horrible, either wrong sized, images incorrectly placed etc.
Try using Figma MCP server with something like claude, or were you already using it with v0
@Anay-208 Try using Figma MCP server with something like claude, or were you already using it with v0
Cuban CrocodileOP
i was js in v0's web app
try using a mcp server with some agent
it got the navbar and then fumbled
Yellow Wagtail
I don't think AI will be able to copy designs pixel perfectly. They'll always go off track even if they make the layout identical. You'll absolutely notice the difference
@Yellow Wagtail I don't think AI will be able to copy designs pixel perfectly. They'll always go off track even if they make the layout identical. You'll absolutely notice the difference
Cuban CrocodileOP
yes exactly which is why i was searching for a plugin or some kind of tool that actually does it through genuine methods not just ai. Like i'm really really surprised figma doesn't have a genuine method to do so when web design in it has become such a big aspect on why people use it.
@Cuban Crocodile yes exactly which is why i was searching for a plugin or some kind of tool that actually does it through genuine methods not just ai. Like i'm really really surprised figma doesn't have a genuine method to do so when web design in it has become such a big aspect on why people use it.
Yellow Wagtail
I don't know if you can fully automate it, but you can ask AI to convert the design to code. Then, use the Figma DevTools to tweak the values like font sizes, color, and spacing.
As a designer focused developer myself, I think AI isn't there yet to replace humans. My company hired me over graduated candidates solely because of my design capabilities.
As a designer focused developer myself, I think AI isn't there yet to replace humans. My company hired me over graduated candidates solely because of my design capabilities.