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:
- Building components
- Testing components
- 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.
Congratulations you have successfully implemented the chromatic plugin and the figma addon. See you when next I write something cool!
Top comments (0)