What is @storybook/addon-designs?
@storybook/addon-designs is an addon for Storybook that allows you to embed design resources directly into your stories. This helps in bridging the gap between design and development by providing a visual reference for developers.
What are @storybook/addon-designs's main functionalities?
Embed Figma designs
This feature allows you to embed Figma designs directly into your Storybook stories. By providing a URL to the Figma file, you can display the design alongside the component.
import { withDesign } from 'storybook-addon-designs';
export default {
title: 'Button',
decorators: [withDesign],
};
export const Primary = () => <button>Primary</button>;
Primary.parameters = {
design: {
type: 'figma',
url: 'https://www.figma.com/file/xyz123'
},
};
Embed Sketch designs
This feature allows you to embed Sketch designs into your Storybook stories. By providing a URL to the Sketch file, you can display the design alongside the component.
import { withDesign } from 'storybook-addon-designs';
export default {
title: 'Button',
decorators: [withDesign],
};
export const Primary = () => <button>Primary</button>;
Primary.parameters = {
design: {
type: 'sketch',
url: 'https://www.sketch.com/s/xyz123'
},
};
Embed images
This feature allows you to embed image files into your Storybook stories. By providing a URL to the image, you can display the design alongside the component.
import { withDesign } from 'storybook-addon-designs';
export default {
title: 'Button',
decorators: [withDesign],
};
export const Primary = () => <button>Primary</button>;
Primary.parameters = {
design: {
type: 'image',
url: 'https://example.com/design.png'
},
};
Other packages similar to @storybook/addon-designs
storybook-addon-a11y
storybook-addon-a11y helps you test the accessibility of your components. It provides tools to check for accessibility issues, whereas @storybook/addon-designs is focused on embedding design resources.
@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