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

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[Unreleased]

[6.3.1] - 2022-06-14

Fixed

• Include blocks.d.ts in published tarball. (d966871)

[6.3.0] - 2022-06-14

Added

• Export panel name as PanelName. (851b486)

Fixed

• Add type definition file for storybook-addon-designs/blocks. (4bf0125)

[6.2.1] - 2022-01-06

Fixed

• Fix Design tab does not appear when renderTarget: "tab". (#134)

[6.2.0] - 2021-10-03

Deprecated

• experimental-figspec type. Use figspec type instead. The parameter interface is same, just replace the type property. (#127)

Added

• figspec type (#127).

[6.1.0] - 2021-08-22

Added

• An ability to customize addon tab name via name property (#112).
• Show the number of design specs in addon tab name (#112).

[6.0.1] - 2021-07-04

Fixed

• Fix our Doc Blocks causes a runtime error on some Storybook versions (#110).

[6.0.0] - 2021-05-17

Removed

• PDF embedding (5085b1c).
• Support for Storybook@v5.x (6598be6).

Added

• Experimental Figspec embedding (enchanced Figma embeds powered by Figma API), see here for the usage (7066b62).

Fixed

• Improve reliablity between story/design changes (#97).
• Remove peerDependencies, which is used as constraints for transitive dependencies (94bcd84).

[5.4.6] - 2021-07-04

Fixed

• Fix our Doc Blocks causes a runtime error on some Storybook versions (61ce68e).

[5.4.5] - 2021-02-20

Fixed

• Fix tab contents does not switch between stories (#83).

[5.4.4] - 2021-02-18

Fixed

• Hide loading placeholder for type: "iframe" when the embedded iframe is loaded (#81).

[5.4.3] - 2021-01-13

Fixed

• Fix allowFullscreen option is outdated on each render (#78).

[5.4.2] - 2020-09-16

Added

• Support for Storybook 6.x (#67).

[5.4.1] - 2020-07-31

Fixed

• Fix blocks.js is missing from published package (#64).

[5.4.0] - 2020-06-27

Added

• Doc Blocks. (PR: #62)

[5.3.0] - 2020-06-20

Added

• offscreen option. (PR: #40)
• renderTarget preset option. (PR: #47)
• An addon preset file so you can write addons: ["storybook-addon-designs"] in main.js.
• Export an addon name as PARAM_KEY and an interface type of config as Config from entry file. (PR: #57)

Fixed

• Fix Figma preview's scale value goes too small when the preview located at second tab or later one. (PR: #40)
• You can now disable this addon by disabled: true option. (PR: #57)

[5.2.1] - 2020-05-05

Fixed

• Fix the addon code is not being transpiled down to ES5. (PR: #51)
• Provide CommonJS modules for non-webpack environments (e.g. Storyshots+Jest). (PR: #52)

[5.2.0] - 2020-02-01

Added

• link type. (PR: #32)

[5.1.2] - 2020-01-22

Fixed

• Fix crashing when there is no design parameter. (PR: #30)

[5.1.1] - 2019-06-06

Fixed

• Do not persist design panel. (PR: #15)

[5.1.0] - 2019-05-12

Added

• multiple designs tab support. (PR: #9)