Storybook integration

UXPin Merge Storybook integration

Design faster with Storybook components. Connect your own or a public Storybook to UXPin account, and feel the power of Merge technology – design with code, within minutes.

Use the integration to bring fully interactive UI code-based components from Storybook and use them to design in UXPin. Now, you can build prototypes that are consistent with all the design and development standards, by using the same components as your devs do. You don’t even need to know how to code and it doesn’t matter which framework you use – we support all Storybook frameworks (as listed here).

Storybook integration is an alternative to our other Merge technology integration – Git repository. They both allow you to design with pre-built code components, the main difference is how you add components to UXPin.

Note

This documentation won’t show you how to create a Storybook library, but how to integrate an already existing library with UXPin. For a little more information, Storybook is a development environment for UI components. It allows you to browse components as a library, add interactions, view them in different states, and test in a safe environment. For more details on Storybook, see this official Storybook guide.

Before you start

First, you need two things:

Access to Merge technology in UXPin. Don’t have it yet? Request it here.
Storybook URL. If you’re using an open or a public Storybook, you can proceed with the integration.
In case your Storybook is a private one, please contact us at sales@uxpin.com for more information.

Note

In case you use Vite and Storybook for the integration, you will need to configure a few more steps before integrating with UXPin. As Vite assumes assets are located on the root directory, the following config should be added: In your Storybook 'main.* file', add config.base = ' ' in your 'viteFinal'. More information about this option can be found at https://vitejs.dev/config/#base.

How to Integrate?

Public:

1. Open a new or existing prototype from the UXPin Dashboard

2. Select ‘Design System Libraries’ menu tab to the bottom left then click ‘+ New Library’

3. Select ‘Import Components from Storybook’

Private:

1. Follow same steps as Public integration, but just select “Private” and copy a token

2. Install @uxpin/storybook-deployer to your design system:

yarn add -D @uxpin/storybook-deployer
npm install @uxpin/storybook-deployer --save-dev

3. Deploy your Storybook in UXPin:

npx uxpin-storybook-deployer -t TOKEN -s path/to/your/storybook

Note

With Private Storybook integration, your Storybook is protected with a UXPin login session. This also means you will not be able to see Storybook components on preview without logging into the account having a permission to the library.

You’re good to go! Just start dragging and dropping the components!

How to change component properties?

With Storybook’s mechanism – Args, you can dynamically change properties, slots, styles, inputs, etc., in the UXPin editor. So, there’s no need to alter a component in Storybook – you can do that right away while designing in UXPin.

Just make sure:

You have 6+ version of Storybook
Your Story is written just like Storybook defines it here

Note

There’s a similar feature called “knobs” that we don’t support as Storybook has already announced that it will be deprecated in future versions.

How to Update Storybook Components in UXPin?

As you integrate Storybook with UXPin, all the components will be automatically updated whenever you make changes to a component in your Storybook. Also, the updated component will look and work exactly like in your Storybook, so don’t worry about your components being a bit off after the sync.