Here's a list of key terms and concepts related to Widgetbook and design systems. Familiarize yourself with these terms to have a better understanding of the topic.

Design System:#

A collection of reusable components, guidelines, and principles that help maintain design consistency and streamline the development process across products and platforms.


In the context of Flutter, a widget is a basic building block of the user interface. Widgets can be combined and customized to create a complete UI.


A Flutter package that helps developers catalog their widgets, test them quickly on multiple devices and themes, and share them easily with designers and clients.


A systematic organization of widgets in a design system, which makes it easy to browse, search, and reuse components.

Generator Approach#

A method for configuring Widgetbook that uses the widgetbook_generator and widgetbook_annotation packages to automatically synchronize the widget structure in Widgetbook with your application.

Manual Approach#

A method for configuring Widgetbook that involves manually maintaining the widget structure in Widgetbook to keep it in sync with your application.

Widgetbook Cloud#

A collaboration platform that simplifies the review process for professional teams, allowing them to share widgets, streamline reviews, and integrate with design tools like Figma.


Interactive controls that enable users to customize the appearance and behavior of a widget within Widgetbook.

Hot Reload#

A feature in Widgetbook and Flutter that allows developers to see the effects of their code changes instantly, without having to rebuild the entire app.

Figma Integration#

The connection between Widgetbook and the Figma design tool, which allows for seamless consistency between the design and the implemented widgets.


This documentation refers to widgets as components since design tools like Figma use this terminology to describe their reusable UI elements.


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


a variant refers to a specific version or configuration of a component. Variants can represent different visual styles, themes, or states of a component, making it easy to test and showcase the various ways a component can appear or behave.