https://github.com/storybookjs/addon-designs

A Storybook addon that embeds Figma, websites, or images in the addon panel.
https://github.com/storybookjs/addon-designs

addon figma javascript storybook

Last synced: about 2 months ago
JSON representation

A Storybook addon that embeds Figma, websites, or images in the addon panel.

• Host: GitHub
• URL: https://github.com/storybookjs/addon-designs
• Owner: storybookjs
• License: mit
• Created: 2019-03-20T09:23:01.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-04-12T21:15:08.000Z (5 months ago)
• Last Synced: 2024-04-14T01:30:34.024Z (5 months ago)
• Topics: addon, figma, javascript, storybook
• Language: TypeScript
• Homepage: https://storybookjs.github.io/addon-designs
• Size: 3.83 MB
• Stars: 850
• Watchers: 13
• Forks: 69
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Codeowners: CODEOWNERS

Awesome Lists containing this project

README

        


  

  

  


  


[![npm version](https://badge.fury.io/js/@storybook%2Faddon-designs.svg)](https://badge.fury.io/js/@storybook%2Faddon-designs)

[![Monthly download](https://img.shields.io/npm/dm/@storybook/addon-designs.svg)](https://www.npmjs.com/package/@storybook/addon-designs)

[![GitHub license](https://img.shields.io/github/license/storybookjs/addon-designs.svg)](https://github.com/storybookjs/addon-designs/blob/master/LICENSE)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)





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

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

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](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)