Great idea! I think the biggest objection will probably be that the styles are too 'vanilla'. If folks are using some framework like Tailwind CSS they still have to map the classes. It's still a great start though :)
Figma to React
21–30 of 121 posts
Re: Figma to React
#22All I see is styles with with and hight set to an absolute value. How can this be useful?
Re: Figma to React
#23I'd be interested in hearing a designer's view on this sort of tool? It seems really appealing for me as a developer (and I've thought about building something like this in the past) but I wonder where it fits in the designers workflow?
I'm a designer who used to be a React developer (2 years out of the game though). I don't have a strong opinion about the engineer's choice for how to implement my designs, but if this makes their lives easier and gives us a little extra time to make improvements, I'm all for it.
Call me skeptical, but I wonder how useful it would be for the FE devs on my team. In the past, I've never had a great experience with code generators, I've usually ended up ripping out the results and redoing it myself. Sometimes there's an unexpected limitation ("oh yeah, we use tailwind, this is useless to us!"), or a bug, or sometimes it just doesn't produce something I would stand by.
I'm also a little scared of showing this to other designers, or project managers, because I'd be worried about it setting unrealistic expectations. "Great, there's the front-end problem solved, guess you developers can do about twice as much work in a day now, right?"
Re: Figma to React
#24All I see is styles with with and hight set to an absolute value. How can this be useful?
Easier prototyping with real data for one thing.
Re: Figma to React
#25There goes my last excuse preventin me abandon adobe and migrate to figma once and for all..
Re: Figma to React
#26I'd be interested in hearing a designer's view on this sort of tool? It seems really appealing for me as a developer (and I've thought about building something like this in the past) but I wonder where it fits in the designers workflow?
I think a good parallel of this is Webflow, which I find to be an incredibly powerful tool and gives design teams a lot of freedom to build and deploy their designs, however it’s incredibly cumbersome if you’re using it to mock up options and explore iterations. That work still happens in Sketch for our team, and when it’s approved that same team brings it into Webflow and “does it for real.”
I expect exporting from Sketch/Figma into React components would be cumbersome in this same way.
If I may pose another example from my days of industrial design, Rhino is a great tool for rapidly iterating designs and building CAD for renderings, however when your design is approved you really need to rebuild it in Solidworks for it to be made.
The real solution here is for companies to adopt a Design Ops/Design Systems Manager that can design and code in the front end. This would remove burden from the engineering team so they don’t have to worry about doing tiny design tweaks, etc.
Re: Figma to React
#27I'd be interested in hearing a designer's view on this sort of tool? It seems really appealing for me as a developer (and I've thought about building something like this in the past) but I wonder where it fits in the designers workflow?
Won't work. It's a cool proof of concept, but practically, 0% chance of it being really useful. Converting figma layouts to code is fairly trivial. Converting it to code that's usable is a whole other story. There's the actual design related concerns such as nested layouts and dynamic behavior, as well as code base management concerns. At best this is a possibility for some tools like webflow, or framer. With figma,…
Interesting
I hear what you're saying about nested layouts and dynamic behaviour but do you think this would be good for individual components (even if these are large components such as page layouts?)
Re: Figma to React
#28Awesome. Does anyone know if there's plans for a Tailwind export option?
That would be a killer feature for me
Re: Figma to React
#29This 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 tools that others on the team are using?
Re: Figma to React
#30This 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.