Styling Addon: configure styles and themes in StorybookAutomate with Chromatic
Storybook Day 2023
Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Storybook addon for embedding your Adobe XD design preview in addon panel
npm install storybook-addon-xd-designs
Last updated about 1 year ago
Downloads per week
Readme View on GitHub
[![npm version](]( [![Monthly download](]( [![GitHub license](]( [![code style: prettier](](


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



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

Join the community
6,060 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software

Maintained by
Special thanks to Netlify and CircleCI