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

101–110 of 121 posts

Re: Figma to React

#101

Post by xyzzyrz »

sktrdie wrote: post #96

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…

Plasmic (https://www.plasmic.app) enables this workflow—you can visually edit the design while editing behavioral code side-by-side—but with a different approach than what you described, since we want to include non-developers. (I work on this.)

Re: Figma to React

#103

Post by xyzzyrz »

andratwiro wrote: post #16

This is why I use Framer, they have a built-in export to React function that is really powerful for early startups (as the whole tool is built on React) My team has been using our Framer export (with a few tweaks) as the actual final UI for our early product. Designing is as easy as in Figma, with the advantage that you have actual React components out of the box (working chart libraries, video components... any pack…

Framer is an awesome prototyping tool (I use it), but I would've wanted to know up-front that "export to React" comes with two huge caveats:

- There's nothing stopping you from using it in production, but it isn't designed for this. What you create does not even use real layout, does not use normal HTML elements, etc.: see https://www.framer.com/support/using-framer/creating-real-ap....

- Inevitably in any real-world project, various parts of the UI need to be changed/overridden from code. But you cannot iterate on the design once ejected, which is a significant limitation for any product that requires iteration.

For building prototypes, it works great, and it makes user-testing a "happy path" nice and breezy.

That said, would love to see/hear more about the projects you've shipped to production!

(Disclaimer: I work on https://www.plasmic.app.)

Re: Figma to React

#104

Post by andratwiro »

xyzzyrz wrote: post #103
andratwiro wrote: post #16

This is why I use Framer, they have a built-in export to React function that is really powerful for early startups (as the whole tool is built on React) My team has been using our Framer export (with a few tweaks) as the actual final UI for our early product. Designing is as easy as in Figma, with the advantage that you have actual React components out of the box (working chart libraries, video components... any pack…

Framer is an awesome prototyping tool (I use it), but I would've wanted to know up-front that "export to React" comes with two huge caveats: - There's nothing stopping you from using it in production, but it isn't designed for this. What you create does not even use real layout, does not use normal HTML elements, etc.: see https://www.framer.com/support/using-framer/creating-real-ap... . - Inevitably in any real-worl…

Agreed on both points, the export is definitely a hackish way of using Framer.

I'll be glad to share the project over DM, feel free to shoot me an email :)

Also, Plasmic looks really interesting, I'm looking forward to try it out.

Re: Figma to React

#105

Post by [deleted] »

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)

[deleted]

Re: Figma to React

#106

Post by BackBlast »

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.

I'm an efficiency freak, so I understand what you're saying.

But let us be realistic. I just loaded www.amazon.com - 17.8 MB transferred when it finally stopped. Arguably one of the most successful websites in the world.

A 5MB asset size for most sites is perfectly acceptable.

Re: Figma to React

#108

Post by nbzso »

nbzso wrote: post #86
tmpz22 wrote: post #83

Earlier quoted context omitted.

But how do you make the entire developer community conform to your idiosyncratic preferences if you don’t create a poorly designed DSL mixing multiple abstractions in a soup of future technical debt?

I don't remember having a single problem with developers with my idiosyncratic preference. Actually my process is driven by the lack of good prototyping tools and optimisation in implementation time. Mixing multiple abstractions? DSL? No. Last I checked - HTML and CSS are not soup of technical debt. Actually I am quite shocked to find out the lack of knowledge of CSS in developer community.

Oh. The irony :)

Re: Figma to React

#109

Post by neya »

BackBlast wrote: post #106
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.

I'm an efficiency freak, so I understand what you're saying. But let us be realistic. I just loaded www.amazon.com - 17.8 MB transferred when it finally stopped. Arguably one of the most successful websites in the world. A 5MB asset size for most sites is perfectly acceptable.

Yeah, I agree with you for the most part. And this argument comes up a lot. The difference is we're not Amazon yet. We don't have the same levels of user engagement, loyalty and whatever metrics that makes Amazon a success. To the end users, we're not as popular, one slow page load translates to a lost potential customer which when aggregated to even a few 100 potential customers could make or break a startup.

Re: Figma to React

#110

Post by nautilus12 »

RobertKerans wrote: post #98
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?

Personally, I dont feel threatened because I dont touch front end coding.
Post reply on HN