# storybook-addon-designs

> Storybook addon for embedding your design preview in addon panel

Latest version **6.3.1** (published 2022-06-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install storybook-addon-designs
pnpm add storybook-addon-designs
yarn add storybook-addon-designs
bun add storybook-addon-designs
```

## Health

**Score 45/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 6.3.1 |
| Published | 2022-06-13 |
| First published | 2019-03-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 92.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 950 |
| Author | pocka |
| Maintainers | pocka |
| Keywords | storybook-addon, design, figma |

## Links

- npm: https://www.npmjs.com/package/storybook-addon-designs
- Repository: https://github.com/pocka/storybook-addon-designs
- Issues: https://github.com/pocka/storybook-addon-designs/issues
- npm.io page: https://npm.io/package/storybook-addon-designs

## Dependencies (1)

- [@figspec/react](https://npm.io/package/@figspec/react.md) ^1.0.0

## Recent versions

- 6.3.1 (latest) — 2022-06-13
- 7.0.0-beta.2 (beta) — 2022-11-22
- 7.0.0-alpha.3 (alpha) — 2022-10-18
- 7.0.0-beta.1 — 2022-11-05
- 7.0.0-beta.0 — 2022-10-18
- 7.0.0-alpha.2 — 2022-06-18
- 7.0.0-alpha.1 — 2022-06-18
- 7.0.0-alpha.0 — 2022-06-16
- 6.3.0 — 2022-06-13
- 6.2.1 — 2022-01-06
- 6.2.0 — 2021-10-02
- 6.1.0 — 2021-08-21
- 5.4.6 — 2021-07-03
- 6.0.1 — 2021-07-03
- 6.0.0 — 2021-05-17
- … 32 more at https://npm.io/package/storybook-addon-designs/versions

## README

<div align="center">
  
  <img src="./packages/assets/logo.png" width="104" alt="logo">
  <br/>
  <br/>

[![npm version](https://badge.fury.io/js/storybook-addon-designs.svg)](https://badge.fury.io/js/storybook-addon-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/pocka/storybook-addon-designs.svg)](https://github.com/pocka/storybook-addon-designs/blob/master/LICENSE)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](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://pocka.github.io/storybook-addon-designs)

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

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

### 2. Register the addon in `main.js`

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

### 3. Add it to story!

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

---
_Source: https://npm.io/package/storybook-addon-designs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._