🚧 Repo looking for a good home 🚧

This addon is being poorly maintained by me and I'm out of touch with how Adobe XD is evolving. Let me know if you'd like to take ownership of this repo and addon (open an issue)

storybook-addon-xd-designs

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

• Demo

Credit

• Forked from https://github.com/pocka/storybook-addon-designs

Requirements

• storybook@>=6.0.0
• If you're using storybook 5... then some older versions might work... open an issue if you want me to find out which?

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.

Circa 2019 you had to get 2 urls

Detailed instructions here. It looks something like this:

Usage

Add withXD decorator then put design parameter after your story.

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

Similar projects

• storybook-addon-designs