How to use storybook-addon-designs - 2 common examples

import { addParameters, configure } from '@storybook/react'
import { create } from '@storybook/theming'

import logo from '@storybook-addon-designs/assets/logo-with-text.png'

import pkg from 'storybook-addon-designs/package.json'

addParameters({
  options: {
    theme: create({
      brandTitle: 'storybook-addon-designs',
      brandImage: logo,
      brandUrl: pkg.homepage
    })
  }
})

// automatically import all files ending in *.stories.js
const req = require.context('../stories', true, /.stories.js$/)
function loadStories() {
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module)

.addDecorator(withDesign)
  .add('Embed multiple designs', () =&gt; <button>Button</button>, {
    design: config([
      {
        type: 'figma',
        url:
          'https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample'
      },
      {
        type: 'pdf',
        url: samplePdf
      }
    ])
  })
  .add('Set tab names', () =&gt; <button>Button</button>, {
    design: config([
      {
        name: 'Foo',
        type: 'figma',
        url:
          'https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample'
      },
      {
        name: 'Bar',
        type: 'pdf',
        url: samplePdf
      }
    ])
  })

storiesOf('Tests|Placeholder', module)
  .addDecorator(withDesign)