/storybook-to-figma

The tool for importing Storybook components to Figma

Primary LanguageTypeScript

Storybook to Figma

This project is in early beta

It may be unstable and lacking features.

Please, share your problems and improvement ideas by opening an issue.

Storybook-to-figma is a tool that allows you to open Storybooks inside Figma, import components by Drag-and-dropping, generate variants for components and import them into Storybook as Components

Installation

To function, Storybook To Figma requires two parts installed - Figma plugin and Storybook addon

Figma Plugin

TBD

Storybook Addon

TBD

Features

Drag'n'drop

Screen Shot 2022-02-03 at 11 58 05

Import components to Figma by dragging them and dropping in your editor.

Their HTML markup will be automatically converted to Figma element format.

Due to the project being in beta, there could still be many issues with the accuracy of conversion.

Please, report any problems regarding that matter

Variants generation

Screen Shot 2022-02-03 at 11 58 05

Storybook To Figma can generate variants by combining props of your story!

Use toggles in dedicated addon panel to check what props you want to combine.

Individual variants can also be dragged - just as single, non-combined components

Variants import

Screen Shot 2022-02-03 at 13 53 42

The variants generated by Storybook To Figma can be imported in Figma as components with a click of a button!