How to implement Chromatic plugin x Figma addon for Vue and Storybook
Tags: gitlab, storybook, figma, vue
Published: 2022-10-25 13:53:41


**<u>Table of Contents</u>**

- 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 ?
![chromatic-logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qqs044hxgu0gj9nh6fqh.png)

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

![chromatic-workflow-image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wcal5gwyv7mna0dtwd8c.png)

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](https://storybook.js.org/docs/react/get-started/introduction) to the Storybook documentation to get you started on integrating your application with your frontend application. 
![storybook-guide](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cn4b5s0052nortrpgpoq.png)
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`
![commands](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t2crglksrq11ut0nd4kg.png)

It is recommended that you add both scripts to your `package.json` like so: 
![scripts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jlot8u3sj1kg6vvhgdrs.png)

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:

![build](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w2dmvl6ttt4xq8891i7j.png)


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
![folder-structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qlcgaxiu35kyxsh9lnii.png)


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

![storybook-design-tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8x4u7t25syby6axkkwlr.png)

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](https://storybook.js.org/docs/react/writing-stories/parameters)

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](https://storybook.js.org/docs/vue/get-started/introduction)
[Chromatic](https://www.chromatic.com/docs/setup)


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