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

11–17 of 17 posts

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

#11

Post by Etheryte »

robertnowell wrote: post #6
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?

Yes and no. For the literal first prototype you get out of the door, yes, having some baseline UI work done for you would be nice. For the sake of the argument, let's assume that the code generated by said tool is at least somewhat reasonably structured so refactoring the code isn't a nightmare either. You wire the UI up to some data and get it out of the door to get some feedback. The problem comes after that initial step — you show the first prototype to some test users or stake holders and figure out what needs to change. Integrating the now changed output of the updated UI with the code you already have will no longer be trivial. So long as the prototype is lean, this will be manageable for some time, but sooner or later it will not. The problem is that for most projects, the initial prototype stage is a very miniscule part of the whole product lifetime. Getting one prototype for cheap can be good, but there are UI prototyping tools that can do this. Using those tools instead of trying to reapply the updated output to your now-existing code base will most likely be less work.

In general I do think that tools in this niche will mature over time, but in my very subjective opinion, they won't be the holy grail of cutting down development time. Most of the time, the hard part of software development is the long haul, not the initial kickoff.

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

#12

Post by Jefro118 »

I'm working on this with https://pygma.app. I was too quite surprised that no one has done a better job of this yet. One obvious issue is that Figma works in absolute positions and this is generally a bad way of writing CSS, but this is mostly overcome with some simple heuristics. At the moment my product is more like Overlay, which produces code that is visually consistent but often not semantic or what the designer would have intended. I think this can largely be solved with machine learning, computer vision in particular. Uizard seems like the most impressive product in this regard but their use case is slightly different.

Another problem is that most product teams don't just need to generate code once but also keep it in sync with Figma. As far as I can tell, no one has solved the syncing problem in either direction particularly well. I actually think syncing from React -> Figma is not fundamentally difficult but you need to build a big hairy compiler to deal with any React + styling code which would be a PITA. Going in the other direction is more fundamentally difficult I think, probably needs very good machine learning as well.

Also, always love to hear more details about precisely what's so painful and boring about the way you deal with it now?

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

#13

Post by robertnowell »

Jefro118 wrote: post #12

I'm working on this with https://pygma.app . I was too quite surprised that no one has done a better job of this yet. One obvious issue is that Figma works in absolute positions and this is generally a bad way of writing CSS, but this is mostly overcome with some simple heuristics. At the moment my product is more like Overlay, which produces code that is visually consistent but often not semantic or what the designe…

Cool to hear about this

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

#14

Post by robertnowell »

Etheryte wrote: post #11
robertnowell wrote: post #6

Earlier quoted context omitted.

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?

Yes and no. For the literal first prototype you get out of the door, yes, having some baseline UI work done for you would be nice. For the sake of the argument, let's assume that the code generated by said tool is at least somewhat reasonably structured so refactoring the code isn't a nightmare either. You wire the UI up to some data and get it out of the door to get some feedback. The problem comes after that initia…

Ah, so what you're saying is that a big problem that dev+design teams will encounter is that they need to be able to iterate on designs together, so a real solution here would need to be able to integrate updates to the design into the codebase (and possibly vice versa). Am I understanding your point correctly?

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

#15

Post by robertnowell »

jokethrowaway wrote: post #10

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…

Interesting, do you have experience with web agency work? I've never thought about the challenges they face, but they must face this challenge all the time

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

#16

Post by Etheryte »

robertnowell wrote: post #14
Etheryte wrote: post #11

Earlier quoted context omitted.

Yes and no. For the literal first prototype you get out of the door, yes, having some baseline UI work done for you would be nice. For the sake of the argument, let's assume that the code generated by said tool is at least somewhat reasonably structured so refactoring the code isn't a nightmare either. You wire the UI up to some data and get it out of the door to get some feedback. The problem comes after that initia…

Ah, so what you're saying is that a big problem that dev+design teams will encounter is that they need to be able to iterate on designs together, so a real solution here would need to be able to integrate updates to the design into the codebase (and possibly vice versa). Am I understanding your point correctly?

Yes, exactly. This is a problem that many teams already struggle with when doing this manually, e.g. which design constraints are shared and which are unique. Context is hard to put into machine language and I see the above issue as one of the main hurdles in this space.

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

#17

Post by jokethrowaway »

robertnowell wrote: post #15
jokethrowaway wrote: post #10

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…

Interesting, do you have experience with web agency work? I've never thought about the challenges they face, but they must face this challenge all the time

Yes, I worked with some of them and I have close friends running them.

They definitely have this problem all the time.

Imagine having n PM from big brands who need to build some websites / landing pages and don't want to commit their own development resources (either they don't have them, or they do).

Agencies generally have internal project managers to match the clients and extract requirements.

A common pattern is to have some developers and designers on the payroll (but the pay is not great, it's hard to get good talent) and a few contractors you worked with on the side for more exotic projects (eg. if a client wants a 3d website).

The designers come up with the designs. Sometimes the client will have their own design.

Often times the design + some notes on the side can replace a standard requirements documents.

After that the designs are sent to the developers who convert it into code and deploy, usually with some sort of CMS (WordPress is still pretty popular, Django as well).

The project gets demoed and adjustments / bugfixing starts.

Post reply on HN