storybook-addon-xd-designs
TypeScript icon, indicating that this package has built-in type declarations

6.0.0 • Public • Published

npm version Monthly download GitHub license code style: prettier


storybook-addon-xd-designs

A storybook addon that embeds Adobe XD specs in your addon panel for better design-development workflow.

Credit

Requirements

This addon should work well with any framework. If not, open an issue.

Getting started

  1. Install

    npm install --save-dev storybook-addon-xd-designs

    or

    yarn add -D storybook-addon-xd-designs

    Make sure you have these peer dependencies installed:

    • @storybook/addons
    • @storybook/components
    • @storybook/theming
  2. Register the addon in addons.js

    // .storybook/manager.js
    
    import 'storybook-addon-xd-designs/register'
  3. Add your spec to the story!

    import { withXD } from 'storybook-addon-xd-designs'
    
    storiesOf('My stories', module)
      .addDecorator(withXD)
      .add('My awesome story', () => <Button>Hello, World!</Button>, {
        design: {
          artboardUrl: 'https://xd.adobe.com/view/ae7472ea-b4ac-47c4-4eb9-7aff91446d91-d845/screen/ca95c951-f010-498f-84c6-1cf10f344616/Desktop',
        }
      })
    
       // Or, if it's 2019, you would have to use two urls like this:
      .add('My awesome story', () => <Button>Hello, World!</Button>, {
        design: {
          specUrl: 'https://xd.adobe.com/spec/181eaf80-9e7a-4ea6-7dc8-e21dfd9b2d80-6e2f/screen/58270c9e-502b-4737-be32-a5dfe9523bb5/Color/',
          reviewUrl: 'https://xd.adobe.com/view/813cbece-c467-47ce-67e3-b60caacc2ff8-f70d/',
        }
      })

How to make and find your spec url.

Circa 2020

Detailed instructions here.

In short, create a "Development" url to share. Then view it in a browser, find the specific page you want to use in storybook, and copy that URL.

How To

Circa 2019 you had to get 2 urls

Detailed instructions here. It looks something like this:

How To

Usage

Add withXD decorator then put design parameter after your story.

NOTE: If you omit design parameter, the addon does nothing.

Similar projects

Readme

Keywords

none

Package Sidebar

Install

npm i storybook-addon-xd-designs

Weekly Downloads

1,023

Version

6.0.0

License

MIT

Unpacked Size

50.5 kB

Total Files

53

Last publish

Collaborators

  • morgs32