story.to.design - Generate your UI Kit from code

image

tl;dr

story.to.design generates and updates Figma UI Kits from your component library code. Take your stories from Storybook or Backlight and get an updated Figma library. story.to.design does support Figma variants, so you don’t have to maintain those thousands of variants; they are automatically generated and updated when needed.

Some background

  • Design Tokens
  • Design Kit
  • Component Library
  • Content Design
  • Documentation site
image

Design Kits live in tools like Figma and are used by Designers to create new designs.

Component Libraries live in code repositories and are used by engineering to develop new features following design. Component libraries are usually backed by stories.

Both follow the Design System and are extremely similar. They help Design and Engineering be in sync, talking the same language and using the same system.

Why story.to.design?

If not maintained in sync, design and engineering misunderstand each other. Is this a new design that needs to affect code? Is this available on production today?

Maintaining both Design UI Kits and component libraries in code is not a small task.

When you start having hundreds of variants for a button, it’s a lot of labor to maintain.

https://www.figma.com/community/file/920331926743555626

A tiny code change in the design system can impact thousands of variants. It pushes the design team to architect UI Kit components in complex ways, sometimes hacking Figma to make maintenance bearable.

Design teams should not waste time maintaining the UI Kit in sync with code; they should focus on research for outstanding user experiences.

That’s why we created story.to.design.

Why generating from code-to-design when everybody tries to generate from design-to-code?

We believe that design tools are here to support creativity and research. It means maximum freedom to do, undo, redo, scratch, try, compare and repeat in every possible direction.

For design-to-code to work, a designer would need to comply with certain structural constraints that would allow proper code generation. These constraints are slowing down design process and limiting the exploratory possibilities.

We believe design tools need to keep the free form's agility to deliver the best possible results and leave the technical implementation of the final output to engineering members.

Design tools should be limitless.

On the other end, there is more than enough information on the code side to generate the Design UI Kits. Minor code changes can have thousands of visual impact and can be easily reproduced into the Design UI Kit.

Creating design from code doesn’t add any constraints to the design and just removes the uninteresting labor of maintaining the UI Kit in sync with code.

How does story.to.design work?

  1. Install story.to.design Figma plugin.
  2. Set the URL of your Storybook or Backlight design system in the plugin.
  3. Select your stories and GO!
  4. The plugin will load and generate the corresponding components in Figma with the correct variants.

image
image

story.to.design isn’t tied to any framework. It works with stories in React, Angular, Vue, Svelte, Stencil, Lit... It even works with stories in React-Native design systems in Backlight!

Tired of updating your design UI Kit?

We are hand-picking partners in this early phase of the product.

Who are we?

We are ‹div›RIOTS — creators of tools for front-end teams. We embrace modern/multidisciplinary front-end teams with tools for developers, designers, UX Writers and Product Owners.

Our flagship product is Backlight and story.to.design is our new baby!

Learn more about us at https://divRIOTS.com.

Stay tuned

Chat with us