Components

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.