@storybook/addon-designs

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.

README

---

@storybook/addon-designs

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

• Docs & Demo

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