One component, several widths. A screen is a breakpoint over the same element tree — never a separate design — so nothing can drift between your desktop and mobile versions: there is only one version, seen at different widths.
Every screen in a file shares a single Body. Add an element on any screen and it exists on all of them; what changes per screen is styling, not structure. (An element can still be dropped from specific screens — see skip, below.)
A new component file starts with one screen at 450px wide — the Default (W450) you met in Your first component. A new page starts at 1200.
Add a screen from the screen header, at any width — screens are not fixed presets. A new one is seeded slightly narrower than your current narrowest, and its width is an ordinary style value you edit like any other, so set it to the real breakpoint you care about.
There is no limit that matters in practice — this site's own components ship with up to nine widths.
Select an element on the narrower artboard and edit it. The change lands in that screen's layer automatically — same panel, same controls, no special mode. Any style property can be overridden per screen, including interaction states: a screen can carry its own hover.
The cascade is desktop-first. The widest screen is the base; each narrower screen inherits everything from above and applies only what you overrode on it. Override a color at 768 and it holds at 375 too, until 375 says otherwise.
When several layers could apply, the resolved order is: interaction state, then component variants, then per-element style variants, then screen — so a hover set on the base still wins on a narrow screen unless that screen overrides the hover itself.
Skip removes an element from chosen screens — genuinely removes it: the element is taken out of the rendered tree and out of the exported JSX for those widths, not just hidden.
Skip is per-screen removal; Hide is an editor-only convenience that still exports. Canvas and elements draws the distinction.
The active screen is visible to logic — a condition can read which breakpoint the component is currently rendering at, and it updates on resize.
Timelines offer a per-screen mode in the editor, but it does not survive export today — an exported timeline plays the same on every width. Design animation for all screens at once.
Screens export as CSS container queries, not media queries:
@container (width < 768px) { ... }The component's own body declares container-type: inline-size, so every breakpoint responds to the component's container, not the viewport. That is the consequence worth designing for: the same exported component lays out correctly full-bleed and squeezed into a sidebar, because each instance measures its own box.
An artboard is a fixed width, and responsiveness comes only from the overrides you author. A file with three screens and no overrides renders identically at every width — three screens is the workspace for responsive design, not the result. Check each screen and shape it.
Design — the sizing and layout controls the overrides are made of.
How export works — where the container queries land in the output.