Live data from Hacker News

Figma to React

figma-to-react.vercel.app

51–60 of 121 posts

Re: Figma to React

#51
I get "Identifier 'ComponentInside' has already been declared" from "Test All Features".

And for the first example: "(0,_reactNative.requireNativeComponent) is not a function" (after importing the dependencies)

Re: Figma to React

#52
post #15

Earlier quoted context omitted.

Two things: 1) React also didn't have any of that when it started. 2) The "ecosystem" is a fallacy. It's merely used as propaganda, to win popularity arguments and to dismiss new technologies. 99% of the packages on the so-called ecosystem are badly written, unmaintained shit, and most projects don't really need third-party packages other than React/Redux anyway. Especially projects that have a dedicated designer usi…

I was mostly mocking how fast JS ecosystem moves. Evidently, HN didn't find it funny. Just about the time we have a matured React framework, we've got another framework to jump to.

Svelte is more of an alternative to Vue than it is React.

Re: Figma to React

#53

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…

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.

Re: Figma to React

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

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

Re: Figma to React

#55
post #50

Earlier quoted context omitted.

You need to have a pro account to use the desktop version and make the export, and as we speak they are refactoring this version to include it in the web version. On the – non Beta – Desktop version, it works as a single folder file (pretty sizeable, +150mb) that you can host anywhere, and renders the prototype within an iframe. The team at Farfetch did a custom component to do something similar to what you mention (…

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)

Re: Figma to React

#56
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…

I guess everyone learns differently, but for me, the best way to learn a visual gui tool is to just use it. Click around and try things and sure, sometimes you have to hunt for a feature or a quick search to figure out how to do something specific, but then the next time around, things will go quicker.

Re: Figma to React

#57

Earlier quoted context omitted.

Is the output suitable enough for a decent UX testing prototype?

I swear I don't work for Framer, but I've been using it very intensively for UX testing and users aren't capable of differentiating the prototypes from the actual real thing: https://www.framer.com/user-testing/ The prototypes can be heavy on the browser, but once you go past that the immersion level is deep. You can even add custom google analytics events for quant analysis.

Thanks for this, I'll keep this in mind.

Re: Figma to React

#58

Earlier quoted context omitted.

I was mostly mocking how fast JS ecosystem moves. Evidently, HN didn't find it funny. Just about the time we have a matured React framework, we've got another framework to jump to.

People are not moving away from React.

I mean, in 5 years Svelte could be the new React, and React could be the new Angular. I mean that there are plenty of people still using Angular for legacy apps, but it's not exactly "in vogue"; trends showed that people were generally more satisfied using react. React isn't going away, but if people are more satisfied with svelte (which the trends seem to indicate, and I understand why after learning a bit about svelte from a React background), I think it could dominate new projects in 5 years.

Re: Figma to React

#60

Sweet! I want this but for Svelte! Figma to Svelte would be the dream team and probably trivial to make thanks to .svelte files supporting vanilla html, css, and js.

ironically react is the worst framework to export from figma because its the one framework that doesnt have a built in styling solution
Post reply on HN