12 ms·

Figma to React

359 points by tomsoderlund 6y ago

bilater 6y ago
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 :)
threatofrain 6y ago
Is there already a reliable way to go from React to Figma?
- ibraheemdev 6y ago
  There is an HTML to Figma plugin that works pretty well. I don't remember what it was called though...
alvarlagerlof 6y ago
All I see is styles with with and hight set to an absolute value. How can this be useful?
- methyl 6y ago
  Easier prototyping with real data for one thing.
revskill 6y ago
It doesn't work with React Web + styled.jsx. All styles is broken.
flixic 6y ago
I can see a bright future for this approach. Figma is very "constructional" design tool, encouraging the use: - variablized colors and fonts, that can become CSS variables and classes - Components and component hierarchies, that can turn into React components - Auto-layout that is based on Flexbox - Component propertes (Variants in Figma, but with enough effort it can turn into attributes for React components). With a bit of annotation inside Figma, I can easily see pretty good results for this conversion.
camjw 6y ago
I'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?
- deleted 6y ago
  [deleted]
- andratwiro 6y ago
  The way design tools are built – Sketch, Figma, XD... – its an added burden. I believe this is the future for collaboration between front-end & UI designers, but I feel it won't have an easy adoption until its tightly integrated in the designer's workflow. I've recently made the switch to a similar workflow with Framer just a year ago, the difference here being that devs in my team use & maintain the same components that I use for prototypes/design, so the collaboration aspect is quite seamless: https://github.com/framer/framer-bridge-starter-kit https://github.com/framer/framer-bridge-starter-kit
- preommr 6y ago
  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, there's no chance given how they would have to re-implement to get actual feature-parity with actual target platforms. Disclaimer: I am in this space and basically building what we're talking about. All these people saying that this is the future of figma are out of their goddamned minds. Figma already has css exports, and maybe they'll get design tokens. More than that? It would be a completely different product and kind of insane to try. The focus and clarity that figma has is underrated. People think that just because it's all about web dev, these are all the same tools, but they're not.
  - jack_riminton 6y ago
joeblau 6y ago
Is there a working example of a website that is using this?
FractalHQ 6y ago
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.
- fermienrico 6y ago
  Ah yes, Svelte. What we're witnessing is a mass migration from an established society with great infrastructure, education, governance and stability moving to a barren uninhabitable land of opportunity and unlimited possibilities albeit full of traps, broken pipes, dangerous bugs and vicious wildlife. Troves-full are jumping on these new bandwagons, cramming themselves in, clueless but hopeful from the allure of a far promised land of the wild wild west.
  - ratww 6y ago
    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 using Figma.
    - fermienrico 6y ago
      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.
      - ggregoire 6y ago
        People are not moving away from React.
        pcthrowaway 6y ago
dhbradshaw 6y ago
Really good idea. I'd like this for Flutter as well.
- taylorwc 6y ago
  It exists! Disclosure: I am an investor in the company behind this project. https://github.com/Parabeac/Parabeac-Core https://github.com/Parabeac/Parabeac-Core
nindalf 6y ago
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.
- hanniabu 6y ago
  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.
  - couchpotatonews 6y ago
    I'm curious... 12mb of what? Was it HTML, CSS or JS that increased the size?
    - hanniabu 6y ago
      All around. HTML was massive nested div soup, CSS was a mess and every item had it's own styling, JS for these page position trackers and other mess where an entire library is added for only a few lines of js.
  - randall 6y ago
    Rapid prototyping is still a great thing... getting something from figma to usable regardless of filesize is still a good thing.
  - infogulch 6y ago
    Figma is the new dreamweaver?
- Rule35 6y ago
  That can't happen. When a tool like this gets complicated enough to fully specify a complex problem it becomes unusable by the semi-technical people it was made for. Best Figma knows their strength and stays with it, leaving the extensions to other companies so as to compartmentalize the difficulty. Developers aren't just people who know a programming language, they're people who can examine a problem in detail. If a designer was capable of this they'd be a dev who designed and they probably wouldn't use a GUI web design tool.
L_226 6y ago
Definitely a good business opportunity here, go for it.
andratwiro 6y ago
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.
rafaelturk 6y ago
There goes my last excuse preventin me abandon adobe and migrate to figma once and for all..
jack_riminton 6y ago
Awesome. Does anyone know if there's plans for a Tailwind export option? That would be a killer feature for me
xrd 6y ago
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 tools that others on the team are using?
- jjeaff 6y ago
  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.
- mrzimmerman 6y ago
  Sketch has a lot of very easy to use and understand documentation about their features that helped me learn it. I’ll say this: start learning about symbols early and use them to their fullest. It’s like working with components and they are very powerful. I find them to Ed e the most intuitive part of you’re coming from a UI engineering background.
- jephson 6y ago
  https://www.figmacrashcourse.com/ https://www.figmacrashcourse.com/ helped me get started, though there's currently only content under the Auto Layout section.
steveharman 6y ago
Another one to watch: https://www.supernova.io https://www.supernova.io
- jonmc12 6y ago
  Overlay too: https://overlay-tech.com/ https://overlay-tech.com/. Their Figma plugin is very good for React/Vue code and SCSS. It manages nested components and extracts design tokens automatically.
Shmebulock 6y ago
What about Figma to Angular?
- deleted 6y ago
  [deleted]
treelovinhippie 6y ago
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.
dorianmariefr 6y ago
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)
chrisweekly 6y ago
I'd love to hear from devs and designers who have experience with Playroom https://github.com/seek-oss/playroom https://github.com/seek-oss/playroom ... also, where does Storybook fit into tbe picture?
nautilus12 6y ago
This is why I avoid front end coding. This seems eerily close to automating front end development
- RobertKerans 6y ago
  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?
  - nautilus12 6y ago
    Personally, I dont feel threatened because I dont touch front end coding.
    - RobertKerans 6y ago
      No, nothing to do with frontend code, as in auto-generation of application code. There are a vast plethora of tools for generating code that have nothing to do with web frontends: why are they somehow less threatening?
steve8708 6y ago
If anyone is looking for something like this but uses flexbox positioning (no absolute positioning) and support for other frameworks (Vue, Svelte, plain HTML/CSS, etc) - https://github.com/BuilderIO/figma-html https://github.com/BuilderIO/figma-html
xyzzyrz 6y ago
Kudos to the author for making this, these are not easy to build! I noticed this doesn't yet support a number of things in Figma: autolayout, SVG shapes, masking, blend modes, transforms, filter effects, etc. There are also numerous other Figma-to-React tools out there, but of varying quality. You need heuristics to address the impedance mismatch between the different representations and to yield something usable. I work on https://www.plasmic.app https://www.plasmic.app, a design tool for building production (React) frontends and not just drawings or prototypes. We built our own Figma-to-React converter [1] - I haven't yet found another tool that yields higher-fidelity translations. I'm hoping to put together a comparison of the tools one day, if this is of interest. [1] https://www.figma.com/community/plugin/845367649027913572/Figma-to-Code-by-Plasmic https://www.figma.com/community/plugin/845367649027913572/Fi...
- joeblau 6y ago
  You may be losing some conversions on your figma page because of a typo in the url to your site which includes a period after your .app TLD.
  - xyzzyrz 6y ago
    Great catch, thank you!
presentation 6y ago
I haven’t tried this product yet but the CSS export functionality in Figma doesn’t seem to be that smart yet - for instance if I’m using an auto layout to space elements evenly, I want the spacing to be defined as margins on direct children from the parent so that my CSS remains DRY and the layout concerns lie on the parent, not each child; but it doesn’t seem to do that kinda thing unfortunately. I’ll play with Framer seeing that people are recommending it here, I wonder if it’s better.
x89k 6y ago
What's figma?
jerrygoyal 6y ago
great, now next challenge is figma to tailwind classes.
- edenvidal 6y ago
  You can create/re-use functional CSS libraries (such as Tailwind) using Relate - example https://relate.app/edenvidal/ecommerce-product-notifications https://relate.app/edenvidal/ecommerce-product-notifications
nbzso 6y ago
Call me old-head, but I design with code first. In my practice this is effective. I usually start with low-fidelity prototype with some tool and move directly in html/css to create design system containers. My final step is to work on visual parts, fonts, illustration, ui elements, animation.
- tmpz22 6y ago
  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?
  - nbzso 6y ago
    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.
    - nbzso 6y ago
      Oh. The irony :)
sktrdie 6y ago
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 the preview but also change the preview and do a tiny bit of code generation for you. Making the whole coding experience much more interactive and fun. In this "in-between" world the code on the left becomes like an actual UI widget in Figma - instead of modifying and learning the ways the auto-layout widget works, you can just modify the code on the left. With proper TypeScript definitions I can imagine the widget automatically generating based on the props (or something fun like that). To me this is what's missing in webdev, someting in between like SwiftUI. DevTools cannot do this - for instance dragging DOM elements around cannot be persisted because, well, JS kicks in can change everything when you page reload. But we have stuff like React that shifts the paradigm to make it more like SwiftUI hence for React-like frameworks this world should be possible. I explain some of my dreams in this thread: https://twitter.com/lmatteis/status/1375557621789384705 https://twitter.com/lmatteis/status/1375557621789384705 and also here https://twitter.com/lmatteis/status/1375551822740488198 https://twitter.com/lmatteis/status/1375551822740488198 1. https://twitter.com/lmatteis/status/1376146147975303171/photo/1 https://twitter.com/lmatteis/status/1376146147975303171/phot...
- xyzzyrz 6y ago
  Plasmic (https://www.plasmic.app 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.)
  - unityByFreedom 6y ago
    On the pricing page, what is "Content Ownership" and why is that only granted for enterprise customers? https://www.plasmic.app/pricing/ https://www.plasmic.app/pricing/
shinework 6y ago
Checkout https://figside.com https://figside.com, it ships your Figma project as a Next.js website right on Vercel

359 points by tomsoderlund 6y ago

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 :)

threatofrain 6y ago

Is there already a reliable way to go from React to Figma?

ibraheemdev 6y ago
There is an HTML to Figma plugin that works pretty well. I don't remember what it was called though...

alvarlagerlof 6y ago

All I see is styles with with and hight set to an absolute value. How can this be useful?

methyl 6y ago
Easier prototyping with real data for one thing.

revskill 6y ago

It doesn't work with React Web + styled.jsx. All styles is broken.

flixic 6y ago

I can see a bright future for this approach. Figma is very "constructional" design tool, encouraging the use: - variablized colors and fonts, that can become CSS variables and classes - Components and component hierarchies, that can turn into React components - Auto-layout that is based on Flexbox - Component propertes (Variants in Figma, but with enough effort it can turn into attributes for React components). With a bit of annotation inside Figma, I can easily see pretty good results for this conversion.

camjw 6y ago

I'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?

deleted 6y ago
[deleted]
andratwiro 6y ago
The way design tools are built – Sketch, Figma, XD... – its an added burden. I believe this is the future for collaboration between front-end & UI designers, but I feel it won't have an easy adoption until its tightly integrated in the designer's workflow. I've recently made the switch to a similar workflow with Framer just a year ago, the difference here being that devs in my team use & maintain the same components that I use for prototypes/design, so the collaboration aspect is quite seamless: https://github.com/framer/framer-bridge-starter-kit https://github.com/framer/framer-bridge-starter-kit
preommr 6y ago
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, there's no chance given how they would have to re-implement to get actual feature-parity with actual target platforms. Disclaimer: I am in this space and basically building what we're talking about. All these people saying that this is the future of figma are out of their goddamned minds. Figma already has css exports, and maybe they'll get design tokens. More than that? It would be a completely different product and kind of insane to try. The focus and clarity that figma has is underrated. People think that just because it's all about web dev, these are all the same tools, but they're not.
- jack_riminton 6y ago

joeblau 6y ago

Is there a working example of a website that is using this?

FractalHQ 6y ago

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.

fermienrico 6y ago
Ah yes, Svelte. What we're witnessing is a mass migration from an established society with great infrastructure, education, governance and stability moving to a barren uninhabitable land of opportunity and unlimited possibilities albeit full of traps, broken pipes, dangerous bugs and vicious wildlife. Troves-full are jumping on these new bandwagons, cramming themselves in, clueless but hopeful from the allure of a far promised land of the wild wild west.
- ratww 6y ago
  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 using Figma.
  - fermienrico 6y ago
    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.
    - ggregoire 6y ago
      People are not moving away from React.
      - pcthrowaway 6y ago

dhbradshaw 6y ago

Really good idea. I'd like this for Flutter as well.

taylorwc 6y ago
It exists! Disclosure: I am an investor in the company behind this project. https://github.com/Parabeac/Parabeac-Core https://github.com/Parabeac/Parabeac-Core

nindalf 6y ago

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.

hanniabu 6y ago
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.
- couchpotatonews 6y ago
  I'm curious... 12mb of what? Was it HTML, CSS or JS that increased the size?
  - hanniabu 6y ago
    All around. HTML was massive nested div soup, CSS was a mess and every item had it's own styling, JS for these page position trackers and other mess where an entire library is added for only a few lines of js.
- randall 6y ago
  Rapid prototyping is still a great thing... getting something from figma to usable regardless of filesize is still a good thing.
- infogulch 6y ago
  Figma is the new dreamweaver?
Rule35 6y ago
That can't happen. When a tool like this gets complicated enough to fully specify a complex problem it becomes unusable by the semi-technical people it was made for. Best Figma knows their strength and stays with it, leaving the extensions to other companies so as to compartmentalize the difficulty. Developers aren't just people who know a programming language, they're people who can examine a problem in detail. If a designer was capable of this they'd be a dev who designed and they probably wouldn't use a GUI web design tool.

L_226 6y ago

Definitely a good business opportunity here, go for it.

andratwiro 6y ago

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.

rafaelturk 6y ago

There goes my last excuse preventin me abandon adobe and migrate to figma once and for all..

jack_riminton 6y ago

Awesome. Does anyone know if there's plans for a Tailwind export option? That would be a killer feature for me

xrd 6y ago

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 tools that others on the team are using?

jjeaff 6y ago
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.
mrzimmerman 6y ago
Sketch has a lot of very easy to use and understand documentation about their features that helped me learn it. I’ll say this: start learning about symbols early and use them to their fullest. It’s like working with components and they are very powerful. I find them to Ed e the most intuitive part of you’re coming from a UI engineering background.
jephson 6y ago
https://www.figmacrashcourse.com/ https://www.figmacrashcourse.com/ helped me get started, though there's currently only content under the Auto Layout section.

steveharman 6y ago

Another one to watch: https://www.supernova.io https://www.supernova.io

jonmc12 6y ago
Overlay too: https://overlay-tech.com/ https://overlay-tech.com/. Their Figma plugin is very good for React/Vue code and SCSS. It manages nested components and extracts design tokens automatically.

Shmebulock 6y ago

What about Figma to Angular?

deleted 6y ago
[deleted]

treelovinhippie 6y ago

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.

dorianmariefr 6y ago

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)

chrisweekly 6y ago

I'd love to hear from devs and designers who have experience with Playroom https://github.com/seek-oss/playroom https://github.com/seek-oss/playroom ... also, where does Storybook fit into tbe picture?

nautilus12 6y ago

This is why I avoid front end coding. This seems eerily close to automating front end development

RobertKerans 6y ago
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?
- nautilus12 6y ago
  Personally, I dont feel threatened because I dont touch front end coding.
  - RobertKerans 6y ago
    No, nothing to do with frontend code, as in auto-generation of application code. There are a vast plethora of tools for generating code that have nothing to do with web frontends: why are they somehow less threatening?

steve8708 6y ago

If anyone is looking for something like this but uses flexbox positioning (no absolute positioning) and support for other frameworks (Vue, Svelte, plain HTML/CSS, etc) - https://github.com/BuilderIO/figma-html https://github.com/BuilderIO/figma-html

xyzzyrz 6y ago

Kudos to the author for making this, these are not easy to build! I noticed this doesn't yet support a number of things in Figma: autolayout, SVG shapes, masking, blend modes, transforms, filter effects, etc. There are also numerous other Figma-to-React tools out there, but of varying quality. You need heuristics to address the impedance mismatch between the different representations and to yield something usable. I work on https://www.plasmic.app https://www.plasmic.app, a design tool for building production (React) frontends and not just drawings or prototypes. We built our own Figma-to-React converter [1] - I haven't yet found another tool that yields higher-fidelity translations. I'm hoping to put together a comparison of the tools one day, if this is of interest. [1] https://www.figma.com/community/plugin/845367649027913572/Figma-to-Code-by-Plasmic https://www.figma.com/community/plugin/845367649027913572/Fi...

joeblau 6y ago
You may be losing some conversions on your figma page because of a typo in the url to your site which includes a period after your .app TLD.
- xyzzyrz 6y ago
  Great catch, thank you!

presentation 6y ago

I haven’t tried this product yet but the CSS export functionality in Figma doesn’t seem to be that smart yet - for instance if I’m using an auto layout to space elements evenly, I want the spacing to be defined as margins on direct children from the parent so that my CSS remains DRY and the layout concerns lie on the parent, not each child; but it doesn’t seem to do that kinda thing unfortunately. I’ll play with Framer seeing that people are recommending it here, I wonder if it’s better.

x89k 6y ago

What's figma?

jerrygoyal 6y ago

great, now next challenge is figma to tailwind classes.

edenvidal 6y ago
You can create/re-use functional CSS libraries (such as Tailwind) using Relate - example https://relate.app/edenvidal/ecommerce-product-notifications https://relate.app/edenvidal/ecommerce-product-notifications

nbzso 6y ago

Call me old-head, but I design with code first. In my practice this is effective. I usually start with low-fidelity prototype with some tool and move directly in html/css to create design system containers. My final step is to work on visual parts, fonts, illustration, ui elements, animation.

tmpz22 6y ago
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?
- nbzso 6y ago
  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.
  - nbzso 6y ago
    Oh. The irony :)

sktrdie 6y ago

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 the preview but also change the preview and do a tiny bit of code generation for you. Making the whole coding experience much more interactive and fun. In this "in-between" world the code on the left becomes like an actual UI widget in Figma - instead of modifying and learning the ways the auto-layout widget works, you can just modify the code on the left. With proper TypeScript definitions I can imagine the widget automatically generating based on the props (or something fun like that). To me this is what's missing in webdev, someting in between like SwiftUI. DevTools cannot do this - for instance dragging DOM elements around cannot be persisted because, well, JS kicks in can change everything when you page reload. But we have stuff like React that shifts the paradigm to make it more like SwiftUI hence for React-like frameworks this world should be possible. I explain some of my dreams in this thread: https://twitter.com/lmatteis/status/1375557621789384705 https://twitter.com/lmatteis/status/1375557621789384705 and also here https://twitter.com/lmatteis/status/1375551822740488198 https://twitter.com/lmatteis/status/1375551822740488198 1. https://twitter.com/lmatteis/status/1376146147975303171/photo/1 https://twitter.com/lmatteis/status/1376146147975303171/phot...

xyzzyrz 6y ago
Plasmic (https://www.plasmic.app 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.)
- unityByFreedom 6y ago
  On the pricing page, what is "Content Ownership" and why is that only granted for enterprise customers? https://www.plasmic.app/pricing/ https://www.plasmic.app/pricing/

shinework 6y ago

Checkout https://figside.com https://figside.com, it ships your Figma project as a Next.js website right on Vercel