Component variations from Figma to storybook

One of the recurring issues that I have seen in growing products is consistency between design and available components in the front-end. A good example is the definition of variation for components that could be different from other components. Think of a button that signifies error, red is the first color that comes to mind because it’s associated with warning. Now think of a warning popup. It comes in different shapes or colors. How do we make sure component variations are consistent both in design and development?

A big concern in front-end is re-usability of components and by extension unit tests. By defining a simple system to handle component variations, we can make sure components are behaving consistently all through the application. Unit tests for each component also can be reused since variations have consistent behavior.

When it comes to defining variation for each element, consistency is the key. One of the usability heuristics is consistency and standards which helps users understand situations easier and take appropriate actions. Consistency in components’ status will help make the final product more usable.

---

Design system

A design system is a series of reusable components and guidelines that allow teams to design and develop a product following specific standards such as brand identity or corporate style guide. As a designer or web developer, have you ever worked at an organization that had a series of design guidelines for different web elements? At Least for me, It’s always hard to keep track of all those rules. I remember as a junior web developer, I used to get impressed when a designer could tell the rules without referring to the brand guidelines. Before my introduction to design systems it was really hard for me to keep track of all the rules.

Design systems help combine guideline information such as font, color palettes, icons, and more into one centralized place. For example, your design system may contain rules about brand colors and how to apply it on texts or icons. A design system typically includes colors, typography, animation, components, and illustrations.

---

Atomic design

A good way to add elements to the design system is to follow atomic design in creation of elements. Atomic design is a methodology that defines 5 stages where elements work together to create a design system as follows:

1. Atoms: basic building blocks of any element that cannot be broken down to smaller elements. For example color or label cannot be broken down to smaller elements with distinctive functionalities. Important thing is that the atom’s properties are unique so the choice of those elements should be aligned with the style guide otherwise the final design system may not be compatible with rules defined in the style guide.
2. Molecules: a group of two or more atoms that are bonded together for a functional reason. This element serves a specific purpose and usually has a simple UI. a search input and button together which provides search functionality is a molecule
3. Organisms: contains a group of molecules or atoms which create a standalone section in the webpage. For example, the header section of a webpage that typically contains search input(molecule), logo (atom), menu (molecule) and container (atom).
4. Templates: page level containers that outline structure of the webpage. It provides context for lower level elements i.e., atoms, molecules and organisms. A template on it’s own doesn’t introduce any new element rather focuses on underlying structure of contents.
5. Pages: is the real representation of the final webpage and includes all necessary elements. A web page is done when all templates are filled with real content and stakeholders sign off on that.

---

Component variation using atomic design methodology

Design system based on atomic design methodology focuses on creating hierarchical structures which help shape elements. In terms of component variations, it means a set of states that can be applied on different atoms and molecules to send particular messages to the users. In a way status can be considered as a collection of properties of an atom or molecule. For example, a warning variation of a button could contain red as background color which is a property of the button. Example below shows button components with two variants of primary and warning. Colors for primary and warning variants are stored in color styles in Figma. Aside from variants, the button component has other properties such as type, state, size and content.

---

Component variants implementation in Storybook

Storybook is a component library that allows creation and maintenance of reusable components in an isolated environment from the project. It helps developers to maintain variations as well as different states of a component with real-time UI presentation. I prefer to use it as it goes hand in hand with atomic design methodology in terms of creation of atoms and molecules, and respective properties. To get started with storybook start a new Angular project with this command:

ng new my-project
cd  my-project
Ng serve –open

This will get your Angular app setup. Now we need to add a Storybook to it.In the same folder as your application run the below command:

npx storybook@latest init

After installation you can access Storybook using this command:

ng run my-project:storybook

Now we need to introduce properties to the first component. Since I have designs with variations for a button, I’m going to focus on creating that. First thing is to define a button component.

This component needs definition of variations and different states. In the component file we need to introduce each property as a type with different variations so it can be reused later.

type ButtonVariation = 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger';
type ButtonType = 'submit' | 'button';
type ButtonSize = 'small' | 'medium' | 'large';

And then use HostBinding to apply CSS classes to the element when a property is selected. For example when warning variation is selected class warning will be added to the button.

 @HostBinding('class.primary')
  public get primary() {
    return this.variation === 'primary';
  }
 @HostBinding('class.warning')
  public get warning() {
    return this.variation === 'warning';
  }

here is the final version of the button component file.