Why Storybook + Zeplin

Connect design components to code

Paste your Storybook instance URL to a Zeplin project or styleguide to get rolling. Then link components one by one; Zeplin will suggest design components to match what's found in Storybook.

Toggle to highlight already-built components in the designs

Highlight existing Storybook components that have already been built on each screen and skip the rework. See supporting information including code snippets, link status, and link to edit in Storybook.

Compare code to final designs in addon

See a side-by-side comparison between live code and design in Zeplin's addon for Storybook — it’s that simple.

Note: Zeplin’s integration works with React, Vue, Angular, and all 15 frameworks that Storybook supports.

Connect your Storybook instance to Zeplin

1. In any project/styleguide dashboard, click on the + button on the Integrations section of the right panel and select “Connect to Storybook”.
2. In the modal that pops up, copy-paste your Storybook instance URL and click the “Link Stories” button to connect.
3. ☝️ If you’re using the Zeplin web app, you’ll need to install Zeplin's Storybook addon to connect with Storybook.
4. Once installed, you’ll be navigated to the Storybook integration page to start linking components in Zeplin with stories in Storybook. You can link your entire Zeplin project/styleguide to your global story parameters (recommended) OR link individual components one by one.

Install the Zeplin addon for Storybook

1. Requirements: Storybook 5.0.0 or higher.
2. This addon works with any framework. If you run into issues, please let us know.