Designs
Storybook addon for embedding your design preview in addon panel
npm install @storybook/addon-designs
346.3k
Downloads per week
Made by Storybook
Readme View on GitHub
![logo](https://raw.githubusercontent.com/storybookjs/addon-designs/HEAD/packages/examples/assets/logo.png)
@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
- Adobe XD: storybook-addon-xd-designs
- Zeplin: storybook-zeplin
- Abstract: storybook-addons-abstract