2 Questions about Figma and Storybook I couldn’t fully answer myself so far

• plasmic

  58 4,016 9.9 TypeScript

  Visual builder for React. Build apps, websites, and content. Integrate with your codebase.

  

Simply put, no. There are a lot of tools that claim to be able to translate from Figma to HTML/CSS (and in some cases React) but they are all terrible and always will be due to how Figma is built. Figma is an entirely custom rendering engine so it simply does not translate well to HTML/CSS and even less so React or JS frameworks. Some basic examples would be things like Figma has no directional borders, limited emulation of flex-box, no actual element types or real inputs (system would have no way of knowing this frame or rectangle in Figma is supposed to be an or in code), no margins, etc. Pretty much every design system management tool that integrates Figma (Supernova or Zeroheight are a couple other examples) only provides a live embed of a component or page that you can put next to your coded one, so this applies to Storybook as well. There is no way you can sync up things like a property in a code component to a property in a Figma component. Figma is a very limited product design tool when it comes to actually building for devs. There are new design tools coming out that are a lot like Figma but built on real HTML/CSS that let you actually design working or nearly-working code components, but there is a steeper learning curve. Personally I think https://www.plasmic.app/ is the nicest and most feature complete, but https://www.framer.com/ is quite popular too. These also can attempt to import from Figma, but it will be rather messy and non-functional. Honestly if the Figma team had originally built Figma on an actual HTML/CSS rendering engine we probably would have so many fewer problems with dev handoff and also a million cool features out of the box that Figma will likely never get to (auto-layout wrapping, working inputs, non pixel units, real responsive design with media queries, performant prototypes, etc, etc). But they didn't so here we are. My suggestion to all designers working with devs is to actually learn HTML/CSS (you don't need to be able to build stuff from scratch, just understand the basics) so you can communicate directly with devs. Figma is a great tool but will only get you so far, so its that or switch to another tool built on actual web rendering.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

Suggest a related project