4 ms·

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 tea

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 package you want to use). Whatever you design is responsive, can be connected via API to any database, and all of this is done collaboratively in the same document. It has been a mind-blowing experience in terms of product shipping speed, and as a designer, it really makes you connect in a deeper way with the complexity of the final code.

sickcodebruh 6y ago
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.
- andratwiro 6y ago
  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.
DenseComet 6y ago
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.
- andratwiro 6y ago
  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 https://youtu.be/LEMGL2NH0r8?t=2760
  - jiofih 6y ago
    So you’re shipping a 150MB frontend to your users?
    - andratwiro 6y ago
      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)
      - neya 6y ago
        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.
        Aeolun 6y ago
        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?
        dlhavema 6y ago
        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.
onelovetwo 6y ago
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.
- andratwiro 6y ago
  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).
- k__ 6y ago
  Yes, 150MB is crazy.
  - Aeolun 6y ago
    Isn’t that just a basic node_modules folder?
    - throw14082020 6y ago
      Umm pretty sure my node_modules is 1GB+ xD
      - elc0c0 6y ago
        Lmao
    - RobertKerans 6y ago
      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.
xyzzyrz 6y ago
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-apps/ 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 https://www.plasmic.app.)
- andratwiro 6y ago
  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.
- rundmc 6y ago
  I'm testing and absolutely loving Plasmic right now. Sent you a dm
  - xyzzyrz 6y ago
    Thanks for the kind words, that's great to hear! We are in a very fortunate position financially (multiple years of runway), and I am YZ. :) We also have companies big and small relying on Plasmic in production. Lastly, you fully own the code that you generate, and can always eject with clean React.

sickcodebruh 6y ago

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.

andratwiro 6y ago
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.

DenseComet 6y ago

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.

andratwiro 6y ago
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 https://youtu.be/LEMGL2NH0r8?t=2760
- jiofih 6y ago
  So you’re shipping a 150MB frontend to your users?
  - andratwiro 6y ago
    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)
    - neya 6y ago
      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.
      - Aeolun 6y ago
        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?
        dlhavema 6y ago
        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.

onelovetwo 6y ago

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.

andratwiro 6y ago
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).
k__ 6y ago
Yes, 150MB is crazy.
- Aeolun 6y ago
  Isn’t that just a basic node_modules folder?
  - throw14082020 6y ago
    Umm pretty sure my node_modules is 1GB+ xD
    - elc0c0 6y ago
      Lmao
  - RobertKerans 6y ago
    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.

xyzzyrz 6y ago

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-apps/ 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 https://www.plasmic.app.)

andratwiro 6y ago
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.
rundmc 6y ago
I'm testing and absolutely loving Plasmic right now. Sent you a dm
- xyzzyrz 6y ago
  Thanks for the kind words, that's great to hear! We are in a very fortunate position financially (multiple years of runway), and I am YZ. :) We also have companies big and small relying on Plasmic in production. Lastly, you fully own the code that you generate, and can always eject with clean React.