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](/docs/design/code-handoff).