Screens

Screens is where your design system becomes product. Each screen is built from layers and your components, previewed at real sizes and designed in every state a real app reaches.

Sizes

Pick Phone (390 × 844), Tablet (768 × 1024), Desktop (1280 × 800) or All sizes to see them side by side. When a connected repository or your design tokens define breakpoints, the sizes use your app's own widths instead, and All sizes says where they came from.

Look

Look draws the screens in another theme from your design system, such as Dark, or with Long text or Right to left text, so you can catch overflow and mirroring problems before review. It changes only the view, never the screen. See screens from your code.

States

Every screen has six states: Default, Loading, Empty, Error, Denied and Session expired. A state you haven't designed says so instead of quietly showing the default, so missing states are visible in review. See Design a screen and its states.

The canvas

Key	Action
V	Select
H (or hold Space)	Move the canvas
C	Comment
P	Try the screens as a prototype
⌘ + / ⌘ −	Zoom in and out
Shift 1	Fit everything

Preview full window opens the screens without the editor around them. Buttons and links that lead to other screens work there, so you can click through a flow. See Link screens into a flow.

Export and check downloads a screen or a flow as PNG, SVG or PDF and checks a screen for accessibility problems. See Export and check a screen.

Variants shows a screen beside the variants made from it, each in its platform frame, and sets the platform preset it is designed to. See Platform presets and variants.

The minimap

Select Map in the zoom control at the bottom right to show a small map of everything on the canvas, with the part in view outlined. Click or drag on the map to move there. With the map focused, the arrow keys pan (hold Shift to go further) and Enter recentres on your content. If you pan or zoom away from everything, Back to content appears at the bottom left (Shift 1). The Board has the same map.

Screens from your code

When a repository is connected, its routes appear as screens found in code. Import as editable screen rebuilds one from your own components and the props in your code, and Components from code lets you place your real components. See screens from your code.