New
Storybook for full-stack developersAutomate with Chromatic
Star75,291
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-addon-sketch
Get the sketch files for your stories in Storybook
npm install storybook-addon-sketch
Last updated almost 2 years ago
561
Downloads per week
Readme View on GitHub

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.

Join the community
5,867 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI