storybook-addon-sketch

storybook-addon-sketch

Download sketch files straight from storybook.

Installation

yarn add -D storybook-addon-sketch
# or
npm i --save storybook-addon-sketch

Configuration

There are two ways you can install this addon.

Preset

Add the following to your presets.js.

module.exports = ['storybook-addon-sketch/preset'];

Manually

Add the following to your addons.js.

import 'storybook-addon-sketch/register';

Add the following to your storybook webpack.config.js.

module.exports = ({ config }) => {
  config.entry.push(require.resolve('storybook-addon-sketch/entry'));
};

And you are all done!

Options

To configure any options for storybook-addon-sketch change your addons.js to the following

require('storybook-addon-sketch/register-options')(options);

Stories for Kind

If you want to let your storybook users also download all the default renderings for a story kind (ex: Input).

require('storybook-addon-sketch/register-options')({ kind: true });

You will also need to have ran story2sketch with the option outputBy set to kind and the output set to out/sketch. This will output all the sketch files to a specific folder that users can download from.