Terminology

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.

Widget:#

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.

widgetbook#

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.

Catalog#

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.

Knobs#

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.

components#

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

Use-case#

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

Variant#

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.