How to implement Chromatic plugin x Figma addon for Vue and Storybook

Table of Contents

• What is the chromatic plugin
• How it works + use cases
• Chromatic setup
• Vue project setup
• Figma plugin Integration with storybook
• Conclusion

What is the chromatic plugin ?

The chromatic plugin is a third party software package developed by Storybook maintainers to help dev and design teams improve their workflows with storybook. It helps teams visualize built components, test and iterate faster with less manual work.

How it works

The chromatic plugin synchronizes four different software to give you an optimal experience.

• Your internet hosting service (Github, Gitlab or bitbucket)
• Your preferred frontend framework (React or Vue)
• Storybook
• Figma

Use cases include:

1. Building components
2. Testing components
3. Reviewing components

Setting up Chromatic on your local repository

The first step is to ensure that you have built your Vue (this article is based on vue) application with storybook and that you have published your stories on storybook.

Since this article does not discuss how to interact with storybook here's a link to the Storybook documentation to get you started on integrating your application with your frontend application.

Hit the dropdown button for the framework specific to you

The next step is to create a chromatic account on chromatic.com and connect your account to the hosting service that contains the project you want to work with: github, gitLab or bitbucket.

After connecting your project you will see your project name on the top left corner of the screen and two commands to run on he center page. The second command contains your project token which is auto generated and should be added as a script to your package.json

It is recommended that you add both scripts to your package.json like so:

After you have done that, you have to ensure that chromatic recognizes all the stories on your repository by running your first build npm run chromatic. Your builds will show up on your chromatic project like so:

Each build shows the updated components and the changes made to the component library.

Congratulations, you have successfully connected the chromatic plugin to your application.

Implementing the Figma Addon with Storybook

The Figma addon helps you view your component's designs in storybook. To install it you would need to first run

npm install storybook-addon-designs

then add the addon to the array of addons in your main.js file in the .storybook folder.

module.exports = {
   stories=["../src/components/**/*.stories.js"],
   addons=["storybook-addon-designs"]
}

Your folder structure should look like this

After this is done, run yarn storybook and your storybook should look like this with the design tab activated

To get the specific design frame for a component into your component's story, you need to add the link to that frame or design to your component's story parameter

Example: for a primary Button component you would insert this in the Button.stories.js file.

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};
Primary.parameters = {
  design: {
    type: "figma",
    url: "https://www.figma.com/file/ahdbchdsiuvgldiuagauidvgu/Project_Name?node-id=253%3eh",
  },};

For more details if you get stuck you should read the docs for each tool.

Storybook
Chromatic

Congratulations you have successfully implemented the chromatic plugin and the figma addon. See you when next I write something cool!