Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Storybook addon for figma with light and dark theme
npm install @ecomponent/storybook-addon-figma-extended
Last updated almost 5 years ago
Downloads per week
Readme View on GitHub

storybook-addon-figma with extending light and dark theme


Install the addon

npm i --save-dev @ecomponent/storybook-addon-figma-extended

Register the plugin

// in .storybook/addons.js
import '@storybook/addon-actions/register'
// register the Figma addon
import '@ecomponent/storybook-addon-figma-extended/register'

Link a Figma design to your story

import React from 'react'
import { storiesOf } from '@storybook/react'
import { WithFigma } from 'storybook-addon-figma'

    urllight: '',
    allowFullScreen: true
    urldark: '',
    allowFullScreen: true
  .add('With Figma', () => (
      <button>My Button</button>

Show Figma design in right panel

If you find that the Figma panel at the bottom is not big enough to fit your designs, it is possible to move the panel to the right of the window instead, where it is possible to give it more space. This requires the @storybook/addons-options addon. Note however that it is only possible to do this for all stories at once, and will move all addon panels to the right. A simple setup is shown here.

Install the addon

npm install --save-dev @storybook/addon-options

Register the options addon in your addons.js

// in .storybook/addons.js
import '@storybook/addon-actions/register'
import '@ecomponent/storybook-addon-figma-extended/register'
// register the options addon
import '@storybook/addon-options/register';

Import and use the setOptions function in your config.js file

// in .storybook/config.js
import * as storybook from '@storybook/react';
// import the options function
import { setOptions } from '@storybook/addon-options';

// set option to show panel in right side
  downPanelInRight: true,

storybook.configure(() => require('./stories'), module);
Join the community
6,501 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software

Maintained by
Special thanks to Netlify and CircleCI