@storybook/addon-designs
TypeScript icon, indicating that this package has built-in type declarations

8.0.0 • Public • Published
logo

npm version Monthly download GitHub license code style: prettier


@storybook/addon-designs

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

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

Package Sidebar

Install

npm i @storybook/addon-designs

Weekly Downloads

320,126

Version

8.0.0

License

MIT

Unpacked Size

256 kB

Total Files

21

Last publish

Collaborators

  • thafryer
  • shaunlloyd
  • kylegach
  • ndelangen
  • shilman
  • alexandrebodin
  • hypnosphi
  • danielduan
  • igor-dv
  • pksunkara
  • tmeasday
  • gongreg
  • domyen
  • usulpro
  • kylesuss
  • ghengeveld
  • pago
  • dandean
  • mrmckeb
  • dannyhw
  • winkervsbecks
  • amalik2
  • phated
  • yannbf
  • dylanpiercey
  • darleendenno