Live data from Hacker News

Figma to React

figma-to-react.vercel.app

71–80 of 121 posts

Re: Figma to React

#71

Earlier quoted context omitted.

And from my experience Figma conversion exports are massive. Did a site last year and it spit out 12mb. Nice in terms of turnaround, but not in terms of performance.

I'm curious... 12mb of what? Was it HTML, CSS or JS that increased the size?

All around. HTML was massive nested div soup, CSS was a mess and every item had it's own styling, JS for these page position trackers and other mess where an entire library is added for only a few lines of js.

Re: Figma to React

#72
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.

And from my experience Figma conversion exports are massive. Did a site last year and it spit out 12mb. Nice in terms of turnaround, but not in terms of performance.

Rapid prototyping is still a great thing... getting something from figma to usable regardless of filesize is still a good thing.

Re: Figma to React

#74
post #36
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?

This'll generate the kind of code you'd expect to get from a $60 themeforrest template. If you don't care to or never need to dig into it or reuse anything out of context of the prefab template you'll be in an 'OK' place, but anything more than that and you'll likely be not much better of than if you just started from clean.

Those PSD auto export slicers never worked well either.

Same shit, different day.

Re: Figma to React

#75
post #68

Earlier quoted context omitted.

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.

A desktop app quickly runs to 200mb. Why do we think it is so unreasonable for a full app on the web to take even 5% of that amount?

Re: Figma to React

#76
post #53

Earlier quoted context omitted.

All these design tool to code plugins never actually work for anything realistic. If you're so keen on not writing code, you're better off using a page builder. Design tools are specialized to do one thing really well. You should always use the right tool for the job.

Yes, 150MB is crazy.

Isn’t that just a basic node_modules folder?

Re: Figma to React

#77
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?

We had this before: dreamweaver

Re: Figma to React

#78
post #68

Earlier quoted context omitted.

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.

I think they’re talking about testing prototypes exported from the design app, not what they’d necessarily ship as a finished product?

Re: Figma to React

#80
post #75
post #68

Earlier quoted context omitted.

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.

A desktop app quickly runs to 200mb. Why do we think it is so unreasonable for a full app on the web to take even 5% of that amount?

If you're talking a user downloading it with mobile data, it's gonna take a while before it can setup and show anything.

I think someone else said there are other optimizations that happen when you shop production code.

Post reply on HN