Nuclear Pumpkin Mayhem

    @ecomponent/storybook-addon-figma-extended

    1.0.0 • Public • Published

    storybook-addon-figma with extending light and dark theme

    Quickstart

    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'
    
    storiesOf('Button')
      .addDecorator(figmaLightDecorator({
        urllight: 'https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FLtDkaiW5hZhZhZbKEkPyZ9Pk%2FTesting-1%3Fnode-id%3D425%253A552',
        allowFullScreen: true
      }))
      .addDecorator(figmaDarkDecorator({
        urldark: 'https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File',
        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
    setOptions({
      downPanelInRight: true,
    });
    
    storybook.configure(() => require('./stories'), module);

    Install

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

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    14.9 kB

    Total Files

    6

    Last publish

    Collaborators

    • aditi.shah