@storybook/addon-designs
Version:
Storybook addon for embedding your design preview in addon panel
81 lines (57 loc) • 2.27 kB
Markdown
<div align="center">
<img src="./packages/examples/assets/logo.png" width="104" alt="logo">
<br/>
<br/>
[](https://badge.fury.io/js/@storybook%2Faddon-designs)
[](https://www.npmjs.com/package/@storybook/addon-designs)
[](https://github.com/storybookjs/addon-designs/blob/master/LICENSE)
[](https://github.com/prettier/prettier)
</div>
<hr/>
## @storybook/addon-designs
A [Storybook](https://github.com/storybooks/storybook) addon that embed Figma or websites in the addon panel for better design-development workflow.
- [Docs & Demo](https://storybookjs.github.io/addon-designs)
## Requirements
- 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.
### Version compatibility
| 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 |
## Getting started
### 1. Install
```sh
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`
```js
export default {
addons: ["@storybook/addon-designs"],
};
```
### 3. Add it to story!
```js
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",
},
},
};
```
## Similar projects
- Adobe XD: [storybook-addon-xd-designs](https://github.com/morgs32/storybook-addon-xd-designs)
- Zeplin: [storybook-zeplin](https://github.com/mertkahyaoglu/storybook-zeplin)
- Abstract: [storybook-addons-abstract](https://github.com/amccloud/storybook-addons-abstract)