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.<p>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.<p>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?<p>What do you think, HN?<p>Curious if anyone knows of great solutions for this problem or thinks that something like this should (or shouldn't / couldn't) exist.<p>What do folks think of Anima? https://www.animaapp.com/blog/design-to-code/how-to-export-figma-to-react/<p>Or Overlay? https://www.overlay-tech.com/<p>Figma's own blog post on this: https://www.figma.com/blog/introducing-figma-to-react/<p>A reddit discussion: https://www.reddit.com/r/FigmaDesign/comments/ht9krs/best_way_to_convert_designs_from_figma_to_react/<p>Is anyone else working on this?
I'm working on this with <a href="https://pygma.app" rel="nofollow">https://pygma.app</a>. 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.<p>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.<p>Also, always love to hear more details about precisely what's so painful and boring about the way you deal with it now?
This is painfully visible in big web agencies with tons of clients.<p>The flow of designs to be turned into code is relentless, it's almost like a factory.<p>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.<p>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.<p>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.<p>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.<p>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.<p>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.
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.<p>[0] <a href="https://knowyourmeme.com/memes/how-to-draw-an-owl" rel="nofollow">https://knowyourmeme.com/memes/how-to-draw-an-owl</a>
Yeah, we're working on this at Plasmic:<p><a href="https://www.plasmic.app/" rel="nofollow">https://www.plasmic.app/</a><p>(Our users include ex-PageDraw/Anima users.)
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.<p>OTOH, for the capability itself, you might want to look at <a href="https://reactstudio.com/" rel="nofollow">https://reactstudio.com/</a> .
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.