Live Demo: https://hharnisc.github.io/storybook-addon-zeplin
Install the addon
npm i --save-dev storybook-addon-zeplinRegister the plugin
// in .storybook/addons.js
import "@storybook/addon-actions/register";
// register the zeplin addon
import "storybook-addon-zeplin/register";Link a zeplin design to your story
import React from "react";
import { storiesOf } from "@storybook/react";
import { WithZeplin } from "storybook-addon-zeplin";
storiesOf("Button").add("With zeplin", () => (
<WithZeplin
url={"https://www.zeplin.com/file/LbcvMJxDtshDmYtdyfJfkA72/Button-Primary"}
>
<button>My Button</button>
</WithZeplin>
));import Vue from "vue";
import { storiesOf } from "@storybook/vue";
import { WithZeplin } from "storybook-addon-zeplin/vue";
storiesOf("Button").add("With zeplin", () => ({
components: { WithZeplin },
template: `
<with-zeplin url="https://www.zeplin.com/file/LbcvMJxDtshDmYtdyfJfkA72/Button-Primary">
<button>My Button</button>
</with-zeplin>
`
}));import React from "react";
import { storiesOf } from "@storybook/react";
import { WithZeplin } from "storybook-addon-zeplin";
storiesOf("Button")
.add("primary", () => (
<WithZeplin
url={
"https://www.zeplin.com/file/LbcvMJxDtshDmYtdyfJfkA72/Button-Primary"
}
>
<button>My Button</button>
</WithZeplin>
))
.add("secondary", () => (
<WithZeplin
url={
"https://www.zeplin.com/file/LbcvMJxDtshDmYtdyfJfkA72/Button-Secondary"
}
>
<button>My Secondary Button</button>
</WithZeplin>
));import React from "react";
import { storiesOf } from "@storybook/react";
import zeplinDecorator from "storybook-addon-zeplin";
import App from "./components/App";
storiesOf("App")
.addDecorator(
zeplinDecorator({
url: "https://www.zeplin.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File"
})
)
.add("My App", () => <App />);If you find that the zeplin panel at the bottom is not big enough to fit your designs, it is possible to move the panel to the right of the window instead, where it is possible to give it more space. This requires the @storybook/addons-options addon. Note however that it is only possible to do this for all stories at once, and will move all addon panels to the right. A simple setup is shown here.
Install the addon
npm install --save-dev @storybook/addon-optionsRegister the options addon in your addons.js
// in .storybook/addons.js
import "@storybook/addon-actions/register";
import "storybook-addon-zeplin/register";
// register the options addon
import "@storybook/addon-options/register";Import and use the setOptions function in your config.js file
// in .storybook/config.js
import * as storybook from "@storybook/react";
// import the options function
import { setOptions } from "@storybook/addon-options";
// set option to show panel in right side
setOptions({
downPanelInRight: true
});
storybook.configure(() => require("./stories"), module);