storybook-addon-designs

What is storybook-addon-designs?

storybook-addon-designs is an addon for Storybook that allows you to embed design resources such as Figma, Sketch, and images directly into your Storybook 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 Figma URL, you can display the design alongside the component, making it easier for developers to reference the design.

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 Sketch URL, you can display the design alongside the component, facilitating better design-to-development handoff.

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 an image URL, you can display the design image alongside the component, which is useful for static design references.

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-figma

storybook-addon-figma is an addon for Storybook that specifically focuses on embedding Figma designs into your stories. While it offers similar functionality to storybook-addon-designs for Figma, it does not support other design tools like Sketch or image files.

storybook-addon-sketch

storybook-addon-sketch is an addon for Storybook that allows you to embed Sketch designs into your stories. It is similar to storybook-addon-designs in terms of Sketch support but lacks the versatility of supporting multiple design tools.

storybook-addon-a11y

storybook-addon-a11y is an addon for Storybook that helps in checking the accessibility of your components. While it does not offer design embedding features, it is useful for ensuring that your components are accessible, which complements the design-focused features of storybook-addon-designs.

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@>=6.0.0

This addon should work well with any framework: If you find the case the addon not works, please open an issue.

Getting started

1. Install

npm install --save-dev storybook-addon-designs
# yarn add -D storybook-addon-designs

2. Register the addon in main.js

module.exports = {
  addons: ['storybook-addon-designs'],
}

3. Add it to story!

import { withDesign } from 'storybook-addon-designs'

export default {
  title: 'My stories',
  component: Button,
  decorators: [withDesign],
}

export const myStory = () => <Button>Hello, World!</Button>

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