@dreipol/storybook-figma-addon

Description

Figma storybook addon to embed private and public figma projects. This addon was designed and tested only in a react environment.

Installation

npm i @dreipol/storybook-figma-addon storybook-addon-designs -D

Usage

• Register the plugin in addons.js

  import '@dreipol/storybook-figma-addon/register';
  

• Set your figma project id and API token

  import { addDecorator } from '@storybook/react';
  import { withFigma } from '@dreipol/storybook-figma-addon';
  
  addDecorator(withFigma({
      apiToken: process.env.FIGMA_API_TOKEN,
      projectID: process.env.FIGMA_PROJECT_ID,
  }));
  

• Use it in your component stories

  stories.add(
      'Default',
      () => <ComponentExample/>,
      {
          // one or more figma image ids concatenated via commas
        figma: { 
           ids: '14%3A160,45%3A1939',
           names: ['Buttons', 'Buttons Hover']
        },
      },
  );