Add Component

To understand better, let's review a few tips before you can add your first component.


Components in Figma might be resembled by one or multiple variants, which are variations of a component.

Read what is a Component in Terminology page.
In Flutter, the TextButton, ElevatedButton, and OutlineButton are variants of a Button component. In addition, different Flutter states of a button (e.g., focused or hovered) might resemble in Figma as additional variants.

Figma Material button component with variants
Figma Material button component with variants

Components Vs. Use-cases#

Widgetbook features a component and use-case approach in which a single component has one or multiple use-cases.

A use-case might resemble a variant of a component or just a specific state of the component.

In Widgetbook, developers create a folder tree structure to organize and catalog components.

Add your first component#

Adding components to Widgetbook works differently based on your choice: manual approach or generator approach

Read how to optimize widget dependencies and mocking for testability and development on Mocking page.