@storybook/addon-designs NPM

@storybook/addon-designs

A Storybook addon that embed Figma or websites in the addon panel for better design-development workflow.

Docs & Demo

Requirements

Storybook@>=8.0.0 (Version 7 of this addon supports Storybook 7)

This addon should work well with any framework. If you find that the addon does not work, please open an issue.

Getting started

1. Install

npm install -D @storybook/addon-designs

yarn add -D @storybook/addon-designs

pnpm add -D @storybook/addon-designs

2. Register the addon in `main.js`

export default {
  addons: ["@storybook/addon-designs"],
};

3. Add it to story!

export default {
  title: "My stories",
  component: Button,
};

export const myStory = {
  parameters: {
    design: {
      type: "figma",
      url: "https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File",
    },
  },
};

Similar projects

storybook-addon design figma figspec image preview

@figspec/react

@everything-registry/sub-chunk-875 tdm-ui storybook-liana-test @campxdev/react-blueprint ads-components-icons-1 ads-components-icons-2 ads-components-icons-3 ads-components-icons-4 ads-components-icons-5 @arcteryx/core-ui @aircall/tractor @adaliszk/qwik-storybook @m4l/testing @mmb-digital/ds-lilly @nswdoe/doe-ui-core-v3 learn-storybook-using-react ads-components checkstep-uikit @tealhealth/storybook

9.0.0--canary.a49b556.0

3 months ago

10.0.0

3 months ago

10.0.1

2 months ago

9.0.0--canary.4af1b12.0

4 months ago

9.0.1--canary.51838ad.0

3 months ago

3 months ago

4 months ago

4 months ago

1 month ago

4 months ago

9.0.1--canary.d4148b6.0

3 months ago

9.0.0--canary.c6a12a9.0

4 months ago

10.0.1--canary.596fd64.0

3 months ago

10.0.1--canary.0a1b56e.0

3 months ago

9.0.0--canary.d648766.0

4 months ago

8.2.2--canary.74dc2f2.0

4 months ago

9.0.0--canary.a45b930.0

3 months ago

9.0.0--canary.4bc47f2.0

4 months ago

8.2.1

4 months ago

8.0.5--canary.09fa7ee.0

6 months ago

9.0.0--canary.29cd50d.0

5 months ago

8.1.0

6 months ago

8.0.5--canary.1ada788.0

6 months ago

8.1.1--canary.8aea436.0

5 months ago

9.0.0--canary.93d28f8.0

5 months ago

9.0.0--canary.628a98b.0

5 months ago

8.2.0

5 months ago

9.0.0--canary.1499c1a.0

5 months ago

8.0.4

9 months ago

8.0.4--canary.248.ec2d612.0

9 months ago

8.0.3--canary.240.2b4de44.0

1 year ago

8.0.3--canary.240.a2a11ab.0

1 year ago

8.0.3

1 year ago

8.0.3--canary.240.540483c.0

1 year ago

8.0.3--canary.240.9d8f448.0

1 year ago

8.0.2

1 year ago

8.0.2--canary.fa8a973.0

1 year ago

8.0.2--canary.34721f5.0

1 year ago

8.0.1

1 year ago

8.0.0--canary.232.a463deb.0

1 year ago

8.0.0

1 year ago

8.0.0--canary.232.785af00.0

1 year ago

8.0.0--canary.232.7bf8d2c.0

1 year ago

8.0.0--canary.232.fa1bc6b.0

1 year ago

8.0.0--canary.232.330d229.0

1 year ago

8.0.0-next.1

1 year ago

8.0.0-next.0

1 year ago

7.0.10--canary.cae3482.0

1 year ago

7.0.9--canary.225.0c28573.0

2 years ago

7.0.8--canary.223.e22dd72.0

2 years ago

7.0.8

2 years ago

7.0.9

2 years ago

7.0.8--canary.224.a1b85df.0

2 years ago

7.0.8--canary.223.4636c5d.0

2 years ago

7.0.8--canary.1f30e44.0

2 years ago

7.0.8--canary.190.369a889.0

2 years ago

7.0.7

2 years ago

7.0.6

2 years ago

7.0.6--canary.4e50696.0

2 years ago

7.0.6--canary.5500a94.0

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

7.0.2--canary.207.ad30797.0

2 years ago

7.0.2--canary.47ee54c.0

2 years ago

7.0.2--canary.077fdde.0

2 years ago

7.0.2--canary.a56cf39.0

2 years ago

7.0.1

2 years ago

7.0.0

2 years ago

7.0.0--canary.198.a3d6b5a.0

2 years ago

7.0.0--canary.198.c1879af.0

2 years ago

7.0.0--canary.198.5b615de.0

2 years ago

7.0.0--canary.7155bcd.0

2 years ago

7.0.0--canary.ca11952.0

2 years ago