A Storybook addon that embed Figma or websites in the addon panel for better design-development workflow.
- Storybook@>=10.0.0
- This addon should work well with any framework. If you find that the addon does not work, please open an issue.
| Addon designs version | Storybook version |
|---|---|
| ^11.0.0 | ^10.0.0 |
| ^10.0.0 | ^9.0.0 |
| ^9.0.0 | ^9.0.0 |
| ^8.0.0 | ^8.0.0 |
| ^7.0.0 | ^7.0.0 |
npm install -D @storybook/addon-designs yarn add -D @storybook/addon-designs pnpm add -D @storybook/addon-designs
export default { addons: ["@storybook/addon-designs"], };
const meta = { title: "My stories", component: Button, }; export default meta; export const MyStory = { parameters: { design: { type: "figma", url: "https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File", }, }, };
- Adobe XD: storybook-addon-xd-designs
- Zeplin: storybook-zeplin
- Abstract: storybook-addons-abstract