Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Why not generate React code from Figma? (a.k.a. why did PageDraw YC18 fail?)

news.ycombinator.com

Post reply on HN
Print view View original

1–10 of 17 posts

Why not generate React code from Figma? (a.k.a. why did PageDraw YC18 fail?)

#1

Post by robertnowell »

I've been a little obsessed recently with why PageDraw failed (https://news.ycombinator.com/item?id=16467387). Pagedraw promised to generate react code from sketch or figma designs.

It would make my life much easier if they had succeeded. In that world, when my cofounder and I finish polishing our designs in figma, we click a button and (most of) the React UI code is written for us. All we would have to do is wire up the generated components to data sources, and voila. Take the rest of the day off.

If it had worked well, it could automate a good amount of the boring UI work I need to do on a consistent basis. Why am I still manually writing styled components when the information is all there in figma already?

What do you think, HN?

Curious if anyone knows of great solutions for this problem or thinks that something like this should (or shouldn't / couldn't) exist.

What do folks think of Anima? https://www.animaapp.com/blog/design-to-code/how-to-export-figma-to-react/

Or Overlay? https://www.overlay-tech.com/

Figma's own blog post on this: https://www.figma.com/blog/introducing-figma-to-react/

A reddit discussion: https://www.reddit.com/r/FigmaDesign/comments/ht9krs/best_way_to_convert_designs_from_figma_to_react/

Is anyone else working on this?

Re: Why not generate React code from Figma? (a.k.a. why did PageDraw YC18 fail?)

#3

Post by Etheryte »

There have been attempts at tools like this more or less as long as I can remember. The earliest one I recall seeing was Adobe Photoshop exporting sliced designs, but I'm sure there were similar takes earlier too. There are two main issues that are more or less universal: generating reasonable code, and drawing the rest of the owl. The first part does not need much explanation, teaching a machine to generate reasonable code that's understandably structured is akin to teaching a machine to program in general. Context is hard and the output of such programs is generally a big mess. The second problem is drawing the rest of the owl [0]. Wiring up a frontend to a backend is not a trivial task, and one that I would argue to date does not have solid universal solutions. There are many companies and libraries trying to address this in different ways, but they all come with their own pains. Asking a tool to nail down both of the above issues is a very, very tall order and I don't expect anyone to succeed for the general case anytime soon. I do think great progress can be made in narrower scopes though.

[0] https://knowyourmeme.com/memes/how-to-draw-an-owl

Re: Why not generate React code from Figma? (a.k.a. why did PageDraw YC18 fail?)

#4

Post by hcho »

I suspect, genarating components from designs is a pain point for narrow subsection of companies which use React. I also suspect those which have this problem are not in a place to pay. Startups with limited runways, agencies with shoestring budgets are not the most lucrative.

Re: Why not generate React code from Figma? (a.k.a. why did PageDraw YC18 fail?)

#6

Post by robertnowell »

Etheryte wrote: post #3

There have been attempts at tools like this more or less as long as I can remember. The earliest one I recall seeing was Adobe Photoshop exporting sliced designs, but I'm sure there were similar takes earlier too. There are two main issues that are more or less universal: generating reasonable code, and drawing the rest of the owl. The first part does not need much explanation, teaching a machine to generate reasonab…

I appreciate the thoughtful response.

Wiring up a frontend to a backend isn't a trivial task, but is pretty typical software engineering. If part of the work (the ui) could be done for you, wouldn't that be a clear value-add?

Re: Why not generate React code from Figma? (a.k.a. why did PageDraw YC18 fail?)

#7

Post by sdrinf »

What I find particularly funny, looking at the big-picture capability of "designer tool generating extendable code", this was basically available since... visual studio 2005? Yet, no one have found a business model for interfacing figma-react reliably at scale.

OTOH, for the capability itself, you might want to look at https://reactstudio.com/ .

Re: Why not generate React code from Figma? (a.k.a. why did PageDraw YC18 fail?)

#8

Post by quickthrower2 »

sdrinf wrote: post #7

What I find particularly funny, looking at the big-picture capability of "designer tool generating extendable code", this was basically available since... visual studio 2005? Yet, no one have found a business model for interfacing figma-react reliably at scale. OTOH, for the capability itself, you might want to look at https://reactstudio.com/ .

The original ASP.NET of 2002ish had drag and drop interface design like VB6! Although the rails MVC model won out, for simple apps it wasn’t a bad way to develop. It had some pains though, by trying to follow desktop so closely it required a large amount of state data flowing up and down from the page.

Re: Why not generate React code from Figma? (a.k.a. why did PageDraw YC18 fail?)

#10

Post by jokethrowaway »

This is painfully visible in big web agencies with tons of clients.

The flow of designs to be turned into code is relentless, it's almost like a factory.

The reason this doesn't get solved is that you'll always need a developer to smooth the edges, making it responsive, check things work properly everywhere.

There is just too much cruft in the web for full proper automation and there are plenty of frontend developers who barely know how to code but knows how to write React component at a relatively low price.

For individual product companies the effort to create something like this would be too big. Adopting an emergent third party solution instead of throwing frontenders at the problem would be a risky proposition.

Agencies would be the perfect candidate for buying something like this but the cost of developers can easily be passed down to the customer - and if they're big enough to have a lot of clients, they make money because of their brand, not because they're particularly cheap.

I don't think we'll see a solution to this before General Artificial Intelligence; the incentives for building a custom solution for this problem are low and the cost is relatively high.

Maybe if the web as we know were to become simpler / standardised (imagine having native views with native components configured by web services, instead of the wild west of an html page) this could become doable.

Post reply on HN