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

Figma to React

figma-to-react.vercel.app

Post reply on HN
Print view View original

61–70 of 121 posts

Re: Figma to React

#61

Post by mrzimmerman »

xrd wrote: post #29

This seems like a great conversation with both developers and designers. As a developer, I'm not having trouble learning about new tools on the developer side of things. But I'm struggling to learn about Figma and Sketch. Do any developers in this conversation have advice or tutorials that were effective in teaching them how to use Figma or Sketch, or perhaps just be effective in integrating artifacts from those tool…

Sketch has a lot of very easy to use and understand documentation about their features that helped me learn it. I’ll say this: start learning about symbols early and use them to their fullest. It’s like working with components and they are very powerful. I find them to Ed e the most intuitive part of you’re coming from a UI engineering background.

Re: Figma to React

#62

Post by jephson »

xrd wrote: post #29

This seems like a great conversation with both developers and designers. As a developer, I'm not having trouble learning about new tools on the developer side of things. But I'm struggling to learn about Figma and Sketch. Do any developers in this conversation have advice or tutorials that were effective in teaching them how to use Figma or Sketch, or perhaps just be effective in integrating artifacts from those tool…

https://www.figmacrashcourse.com/ helped me get started, though there's currently only content under the Auto Layout section.

Re: Figma to React

#63

Post by Rule35 »

nindalf wrote: post #10

If Figma has their eyes open, they'll run with this idea. Design once in Figma, generate UIs for React, Vue, Jetpack and SwiftUI. Designers become way more productive, doing part of the work of front end devs.

That can't happen. When a tool like this gets complicated enough to fully specify a complex problem it becomes unusable by the semi-technical people it was made for. Best Figma knows their strength and stays with it, leaving the extensions to other companies so as to compartmentalize the difficulty.

Developers aren't just people who know a programming language, they're people who can examine a problem in detail. If a designer was capable of this they'd be a dev who designed and they probably wouldn't use a GUI web design tool.

Re: Figma to React

#66

Post by sbarre »

preommr wrote: post #18
camjw wrote: post #5

I'd be interested in hearing a designer's view on this sort of tool? It seems really appealing for me as a developer (and I've thought about building something like this in the past) but I wonder where it fits in the designers workflow?

Won't work. It's a cool proof of concept, but practically, 0% chance of it being really useful. Converting figma layouts to code is fairly trivial. Converting it to code that's usable is a whole other story. There's the actual design related concerns such as nested layouts and dynamic behavior, as well as code base management concerns. At best this is a possibility for some tools like webflow, or framer. With figma,…

Do you potentially see a middle ground where you could export reliably optimizeable assets like CSS and design tokens, and then instead of trying to export a perfect representation of the design, you could export a high-level scaffold that would at least get the developers started, perhaps by laying out named - but not implemented - components (ideally following a predefined architecture template).

Code frameworks have long found success with this scaffolding approach, where you can provide structural hints/direction to the average intermediate/junior developer who can handle the component-by-component implementation but might need a hand with broader architecture decisions.

Most large enterprises I've seen are full of exactly these kinds of devs who are primarily tasked with component/page-level implementation, but if you leave them to make decisions about how to separate and lay out components, you get a lot of inconsistency across your teams, even when the designs are consistent.

This would be a valuable problem to solve that I haven't seen talked about much.

Re: Figma to React

#67

Post by xyzzyrz »

Kudos to the author for making this, these are not easy to build!

I noticed this doesn't yet support a number of things in Figma: autolayout, SVG shapes, masking, blend modes, transforms, filter effects, etc.

There are also numerous other Figma-to-React tools out there, but of varying quality. You need heuristics to address the impedance mismatch between the different representations and to yield something usable.

I work on https://www.plasmic.app, a design tool for building production (React) frontends and not just drawings or prototypes. We built our own Figma-to-React converter [1] - I haven't yet found another tool that yields higher-fidelity translations. I'm hoping to put together a comparison of the tools one day, if this is of interest.

[1] https://www.figma.com/community/plugin/845367649027913572/Fi...

Re: Figma to React

#68

Post by neya »

andratwiro wrote: post #55
jiofih wrote: post #50

Earlier quoted context omitted.

So you’re shipping a 150MB frontend to your users?

The actual load per page was around 1-5mb, so even when doing remote mobile testing in areas with low speed internet it wasn't an issue (although its definitely one of the main reasons to switch to a real react site when scaling the product)

I disagree. How did 1-5mb become an acceptable size to ship to your users? That's actually quite a lot. In a slow connection, this isn't even going to load anything except a blank screen for such a long time.

Re: Figma to React

#69

Post by presentation »

I haven’t tried this product yet but the CSS export functionality in Figma doesn’t seem to be that smart yet - for instance if I’m using an auto layout to space elements evenly, I want the spacing to be defined as margins on direct children from the parent so that my CSS remains DRY and the layout concerns lie on the parent, not each child; but it doesn’t seem to do that kinda thing unfortunately. I’ll play with Framer seeing that people are recommending it here, I wonder if it’s better.
Post reply on HN