With the new revamped Storybook integration of Zeplin, you can now easily link your components in Zeplin to Storybook!

To connect your Storybook instance with Zeplin, head over to the project/styleguide dashboard and click on the “+” button near the Integrations section on the right panel. From the revealed integrations list, select the “Connect to Storybook” option.

Then, you'll see a modal opening up and asking for your Storybook instance's URL. You can put your URL into the textbox there and click on the “Link Stories” button.

☝️ You can use a localhost URL too, but note that stories won't be available for your team members if you use a localhost URL. We recommend you move your instance to somewhere accessible to collaborate with your team.

After linking your stories with a URL, you’ll be navigated to the Storybook integration page to start linking your components in Zeplin with stories in Storybook.

If you’re using the Zeplin Web app, you need to install Zeplin’s Storybook addon to connect with Storybook. You can run the following command on your Storybook instance to install the addon:

npm i --save-dev storybook-zeplin

If you already have this addon installed on your instance, you can run the following command to update it:

npm i --save-dev storybook-zeplin@latest

If you experience any issues while setting up the integration, you can visit the Troubleshooting tips for Storybook integration article.

Next up: Linking your components in Zeplin with stories in Storybook

Related articles

Did this answer your question?