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

91–100 of 121 posts

Re: Figma to React

#91

Post by andratwiro »

neya wrote: post #68
andratwiro wrote: post #55

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.

The idea of these tools is to allow teams to test a wide array of hypothesis to then have data-backed flows that make sense to code efficiently. The size is an unfortunate trade-off for testing speed.

Of course the initial users will experience a slow product, but the idea is to discover faster what a useful product looks like without investing development resources.

Re: Figma to React

#93

Post by tenaciousDaniel »

Aeolun wrote: post #75
neya wrote: 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?

You download a desktop app exactly once. You download a web app (almost) every time you navigate to the site.

Re: Figma to React

#94

Post by AndriyKunitsyn »

tenaciousDaniel wrote: post #93
Aeolun wrote: post #75

Earlier quoted context omitted.

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?

You download a desktop app exactly once. You download a web app (almost) every time you navigate to the site.

This is, generally, not true for a web app with a caching service worker.

Re: Figma to React

#95

Post by joeblau »

xyzzyrz wrote: post #67

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…

You may be losing some conversions on your figma page because of a typo in the url to your site which includes a period after your .app TLD.

Re: Figma to React

#96

Post by sktrdie »

I think all these approaches for code-generation have been around for a while and are interesting for web-agencies but as soon as you need to have more finer grained control they lose their initial benefits.

SwiftUI has really shined in this regard where instead of offering a visual canvas and code-generation behind the scenes it does both things [1]. It has code and preview side-by-side so you can write code and see the preview but also change the preview and do a tiny bit of code generation for you. Making the whole coding experience much more interactive and fun. In this "in-between" world the code on the left becomes like an actual UI widget in Figma - instead of modifying and learning the ways the auto-layout widget works, you can just modify the code on the left. With proper TypeScript definitions I can imagine the widget automatically generating based on the props (or something fun like that).

To me this is what's missing in webdev, someting in between like SwiftUI. DevTools cannot do this - for instance dragging DOM elements around cannot be persisted because, well, JS kicks in can change everything when you page reload. But we have stuff like React that shifts the paradigm to make it more like SwiftUI hence for React-like frameworks this world should be possible.

I explain some of my dreams in this thread: https://twitter.com/lmatteis/status/1375557621789384705 and also here https://twitter.com/lmatteis/status/1375551822740488198

1. https://twitter.com/lmatteis/status/1376146147975303171/phot...

Re: Figma to React

#97

Post by RobertKerans »

Aeolun wrote: post #76
k__ wrote: post #53

Earlier quoted context omitted.

Yes, 150MB is crazy.

Isn’t that just a basic node_modules folder?

It's normally slightly larger on average. I get you're joking, but the joke doesn't even make sense. A full build of LLVM + Clang is 15-20Gb, and yet, weirdly, IOS apps are not all that size.

Re: Figma to React

#98

Post by RobertKerans »

nautilus12 wrote: post #64

This is why I avoid front end coding. This seems eerily close to automating front end development

I mean we've had these tools for two decades now and yet front-end coding seems fine. There are numerous tools for (eg) mapping UML diagrams to code: I assume you don't feel threatened by those?

Re: Figma to React

#99

Post by infogulch »

hanniabu wrote: post #14
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.

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.

Figma is the new dreamweaver?

Re: Figma to React

#100

Post by xyzzyrz »

joeblau wrote: post #95
xyzzyrz wrote: post #67

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…

You may be losing some conversions on your figma page because of a typo in the url to your site which includes a period after your .app TLD.

Great catch, thank you!
Post reply on HN