Storybook for frontend development

Airbnb

Background

Building UI is more complicated than ever. A single platform provides a variety of features and content. As services grow in scale, it becomes a greater role for frontend developers to consider design consistency across multiple components. The design system became an important topic because it helps to build a consistent design and also improves development productivity by documenting individual components of the app.

A photo by Anhvtn on Arrowhitech

Introduction to Storybook

Using Storybook is one solution to solve the issue above. Their website already has a good description of the tool. Storybook is an open-source tool to develop UI components in isolation. Often time when we develop react app, there are components that get thrown into other components. So in order to test one component, we sometimes should go through the entire user flow. But Storybook allows us to test and work on one component at a time. Since it organizes and shows how each component is rendered, developers can better understand the components their colleagues worked on as well.

Storybook makes documentation and collaboration easy

Storybook tutorial

With Storybook, we get a wide view of the entire component library. When your application grows quite large and you plan to add new components, you have no idea if this component already exists. It’s really hard to find it unless you already built a component tree or recorded them somewhere well. Storybook enables us to document each component and also multiple variations that component has. It’s easy to understand how the UI design shows in different situations like when there’s no data or how the default state for a graph looks like. This also makes developers manage corner cases better.

Storybook addons tutorial

Storybook supports a lot of add-ons that unlock advanced features and new workflows and allowing Storybook to integrate with design tools is one of the best. In the absence of this feature, developers would open and check the design file whenever necessary, or use two monitors. With Storybook, since it is possible to check the design specs in real-time while developing by importing the URL of the design file, the work efficiency would be increased.

Quick Start

First, set up a create-react-app.

npx create-react-app storybook-practice

Run the storybook package.

npx -p @storybook

Starts Storybook in development mode

npm run storybook

Pretty simple! But if you want to add design files to the storyboard, there are three more steps.

npm install --save-dev storybook-addon-designs

Once you install the addon from npm, add the code below to the main js.

module.exports = {  addons: ["storybook-addon-designs"],}

Copy the URL of your Figma file and paste it as the value for the URL property.

MyStory.parameters = {  design: {    
   type: "figma",    
   url: "<a URL for your Figma file (or frame)>"
}}

Thank you for reading!

Helpful resources:

Storybook: How to use it to create a component library in React

Storybook 5 Migration Guide

https://storybook.js.org/addons/@storybook/addon-actions

https://medium.com/storybookjs/storybook-figma-addon-7a399f094a0a