Storybook addon for embedding your Adobe XD design preview in addon panel

View on Github

npm version Monthly download GitHub license code style: prettier

🚧 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)


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



  • 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


    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)
      .add('My awesome story', () => <Button>Hello, World!</Button>, {
        design: {
          artboardUrl: '',
       // Or, if it's 2019, you would have to use two urls like this:
      .add('My awesome story', () => <Button>Hello, World!</Button>, {
        design: {
          specUrl: '',
          reviewUrl: '',

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


Add withXD decorator then put design parameter after your story.

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

Similar projects