New
Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Star82,067
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-addon-xd-designs
Storybook addon for embedding your Adobe XD design preview in addon panel
npm install storybook-addon-xd-designs
Last updated about 2 years ago
925
Downloads per week
Readme View on GitHub
[![npm version](https://badge.fury.io/js/storybook-addon-xd-designs.svg)](https://badge.fury.io/js/storybook-addon-xd-designs) [![Monthly download](https://img.shields.io/npm/dm/storybook-addon-xd-designs.svg)](https://www.npmjs.com/package/storybook-addon-xd-designs) [![GitHub license](https://img.shields.io/github/license/morgs32/storybook-addon-xd-designs.svg)](https://github.com/morgs32/storybook-addon-xd-designs/blob/master/LICENSE) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/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)


storybook-addon-xd-designs

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

Credit

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.

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

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

Maintained by
Chromatic
Special thanks to Netlify and CircleCI