Storybook addon that embeds Zeplin resources such as screens and components in the addon panel for better design-development workflow.
This addon should work with any framework. If you find a case that the addon does not work, please open an issue.
npm install --save-dev storybook-zeplin# yarn add -D storybook-zeplin
2. Add Zeplin access token to your environment variables
In order to access your Zeplin resources, you need to provide your access token. You can create one from https://app.zeplin.io/profile/developer.
Please note that this token can be accessed from client side. For security reasons, it would be safe to use this addon on localhost or internal network.
3. Register the addon in
// .storybook/main.jsmoduleexports =addons: "storybook-zeplin/register";
If you're using Storybook@5.0.x;
4. Add a Zeplin link to your story
Storybook Zeplin takes parameter
zeplinLink as an array of elements containing a name and a link or just a string for the link.
For the link, you can use full web URL or app URI of Zeplin components/screens.
Example of adding Zeplin link to all stories in a file:
title: "Button"component: Buttonparameters:zeplinLink: "";const Default = <Button>Click me</Button>;const Secondary = <Button >Click me</Button>;Defaultstory =name: "Primary Button";Secondarystory =name: "Secondary Button";
Example of adding multiple Zeplin links to a story:
title: "Button"component: Button;const Default = <Button>Click me</Button>;const Secondary = <Button >Click me</Button>;Defaultstory =name: "Responsive Button"parameters:zeplinLink:name: "Desktop"link: "zpl://components?pid=pid1&coid=coid1"name: "Tablet"link: "zpl://components?pid=pid1&coid=coid2"name: "Mobile"link: "zpl://components?pid=pid1&coid=coid3";
Run following commands in separate tabs to start development
npm run watchnpm run storybook
MIT © Mert Kahyaoğlu