UI kits, components and variables

A design in Studio is not a drawing of components, it is built from them. UI kits, components, variables and styles are first-class objects on the canvas, and they are the same objects the code handoff reads.

UI kits

A kit is a starting library for a platform: the components, type and colour a native iOS screen or a web page already expects. You attach a kit to a design and its components become insertable, so the first screen is assembled rather than drawn.

Kits are per platform, because an iOS tab bar and a web navigation bar are not the same component with different padding.

Components

Components live in their own panel, and only libraries that actually hold components appear there: a variables-only library never shows up in a place you go to find something to insert.

• Create from selection authors what you have drawn into the components library.
• Search filters by name, and a grid or list control changes tile density.
• Multi-select exists because an import can drop a hundred components into a library at once, and pruning that one context menu at a time is not a real cleanup path. Select mode turns tiles into checkboxes, "All" takes the current search result so a query narrows the batch, and the delete is confirmed once.

Variants

Sibling components that share a name prefix are combined into a variant set automatically. Button/Primary, Button/Secondary and Button/Ghost become one component with a property, without a manual "combine as variants" step.

An instance then swaps between variants from the inspector, and a component property switch exposes booleans and enums the component author declared.

Variables and modes

Variables are values with a name, organised into collections and groups, and defined per mode. Light and dark are the obvious pair; brand, density or platform are the ones that make the feature earn its keep.

The editor is a tree of collections on the left and a name plus per-mode table on the right, so changing a value in every mode is one row rather than a hunt through a design. A compact panel handles the common edit, and a full editor opens for the work that needs room, with nothing lost between the two.

Design tokens

The variables are the tokens. There is no separate export step that turns one into the other and then drifts.

When a design hands off to code, the tokens travel with it, matched against the tokens already in your project where they correspond, so the handoff says "this is your --surface-2" rather than "this is #16191E". See Design to code.