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

41–50 of 121 posts

Re: Figma to React

#41

Post by DenseComet »

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…

Hey do you have some details on how do do this? I'm having some trouble figuring out how to do this from web app. Am I supposed to use the JSX details in the handoff pane along with the Framer react library? It seems like an incredibly useful feature and would really like to take a look.

Re: Figma to React

#42

Post by andratwiro »

sickcodebruh wrote: post #30
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…

Our designers are on Figma right now (they seem to switch every 12-18 months) but I kind of wish they’d switch to Framer, I’ve heard great things about the React export. We’ve been using Framer Motion, their animation library, for years and it is just phenomenal.

Framer motion is great, and its integration on the tool makes it deadly simple to use!

I think the export might not be so suited for bigger teams though. For reference, a simple 4-page navigation can lead to a +200mb file export, and its basically HTML within an iframe.

For the team as a whole, I think its more about having the designers speak the same language as devs on a shared interface. It empowers us as it makes exporting prototypes for user testing that can be easily hosted as if they were coded for real, and forces us to focus on interactivity & flows rather than the design per se.

Re: Figma to React

#43

Post by onelovetwo »

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…

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.

Re: Figma to React

#44

Post by andratwiro »

DenseComet wrote: post #41
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…

Hey do you have some details on how do do this? I'm having some trouble figuring out how to do this from web app. Am I supposed to use the JSX details in the handoff pane along with the Framer react library? It seems like an incredibly useful feature and would really like to take a look.

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 (if I understood you well): https://youtu.be/LEMGL2NH0r8?t=2760

Re: Figma to React

#45

Post by andratwiro »

onelovetwo wrote: post #43
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…

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.

You should check it out, because its actually the other way around. Framer is basically React you can tinker with and use actual React components, it just happens to have a great UI on top that makes designing with no code seamless, and whatever you design is React behind the scenes.

Page builders in my experience aren't efficient to design, this on the other hand makes designing easier (as I have access to interactive components, real client data, etc).

Re: Figma to React

#47

Post by andratwiro »

debaserab2 wrote: post #40
celim307 wrote: post #35

Earlier quoted context omitted.

Agreed with this, the tooling for pumping out presentational only components is already there.

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.

Re: Figma to React

#48

Post by hombre_fatal »

fermienrico wrote: post #20
ratww wrote: 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.

Why do you confuse a little bit of HN enthusiasm for mass exodus? Does it surprise you that the most vocal people on a forum of craftspeople are the ones in the honeymoon phase of new tools?

If you've been around for more than a few years, you've had plenty of opportunity to see how inaccurate this extrapolation is, like how HN enthusiasm for Elixir doesn't mean that more than a tiny fraction of us are using Elixir.

It's just kind of boring to hear someone complain/jest about "haha developers = lemmings seeking shiny amirite? XD" over and over again, thinking there's some novel witty snark to be had by repeating it for the millionth time. It's also confidently wrong. Most people aren't migrating to new tools just because some people are excited.

Re: Figma to React

#49

Post by treelovinhippie »

I think all design tools should have a component-first UX (eg Storybook but embedded in the tool). We devs obviously know how to think in components and understand how props work.

Designers who can't/won't learn to code have a tendency to either never implement a design component system, or they never stick to one.

Re: Figma to React

#50

Post by jiofih »

andratwiro wrote: post #44
DenseComet wrote: post #41

Earlier quoted context omitted.

Hey do you have some details on how do do this? I'm having some trouble figuring out how to do this from web app. Am I supposed to use the JSX details in the handoff pane along with the Framer react library? It seems like an incredibly useful feature and would really like to take a look.

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?
Post reply on HN