https://github.com/bem/storybook-to-figma

The tool for importing Storybook components to Figma
https://github.com/bem/storybook-to-figma

figma storybook

Last synced: 15 days ago
JSON representation

The tool for importing Storybook components to Figma

• Host: GitHub
• URL: https://github.com/bem/storybook-to-figma
• Owner: bem
• Created: 2021-12-23T13:10:49.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2022-02-08T07:44:55.000Z (almost 3 years ago)
• Last Synced: 2024-04-13T06:52:17.866Z (7 months ago)
• Topics: figma, storybook
• Language: TypeScript
• Homepage:
• Size: 693 KB
• Stars: 14
• Watchers: 25
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# 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](https://github.com/bem/storybook-to-figma/issues/new).

**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



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



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



The variants generated by Storybook To Figma can be imported in Figma as [components](https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-Components-in-Figma) with a click of a button!