Level-up!

🚀 Deploying your Component System

Build: yarn build-storybook

Drop your build from storybook-static to Netlify Drop

❗️ Make sure you are logged in, otherwise it will disappear after few hours

🔄 Sync your Component System with a design tool

1. Install

yarn add -D storybook-anima

2. Register the add-on in `.storybook/main.js`

// .storybook/main.js
module.exports = {
  addons: [
		// ...
		"storybook-anima"
	],
};

3. Set Anima access token

First get the access token from the Anima Figma plugin, or in your Anima team settings. Learn more about how to get the token from Anima.

You can then set the access token as an environment variable called STORYBOOK_ANIMA_TOKEN.

You can create .env file in your project's root folder, or you can provide the environment variable as a command line parameter when building or dynamically running Storybook.

# .env
STORYBOOK_ANIMA_TOKEN="<paste your TOKEN here>"

4. Sync all your components

1. Install the CLI

yarn add -D anima-storybook-cli

2. Add this script on package.json

"scripts": {
  //...
  "storybook-sync": "yarn build-storybook && anima-storybook sync"
}

3. Run easily by doing:

yarn storybook-sync

🧩 Prototyping with your production components