Breakpoints

A frame can have breakpoints: narrower views of the same design, such as Tablet (810 px) and Phone (390 px). The frame itself is the widest view (Desktop).

• Add a breakpoint from the frame’s Properties (nothing selected): Breakpoints → +, then Tablet 810, Phone 390 or a custom width. Each view appears to the right of the frame, labelled with its name and width.
• Click an element in a view to edit it there: the same element, with the view’s layout. The inspector shows an Editing: Phone badge; changed properties show “overridden in Phone” with Reset. Dragging and resizing in the view, and inspector changes, apply to that view only. Properties that cannot vary per breakpoint (text, colours, media) are not changed from a view: edit them on the frame. Undo works as usual.
• Click an element in the frame to edit the Desktop design, as before.
• Export a view by right-clicking its label or the view itself and choosing Export…. The image is the frame as it looks at that breakpoint, at the breakpoint’s width, named after it (for example Home Phone.png).
• A new breakpoint inherits everything. Nothing stacks, scales or hides by itself.
• A change made at a breakpoint applies there and at every smaller one, until a smaller breakpoint changes it again.
• Removing a change makes the element inherit from the next wider view.
• Stack on this breakpoint turns a stack row into a column at that width and makes its children fill the width. It is written as ordinary changes you can see and reset.

What can change per breakpoint: stack direction, wrap, gap, padding and columns; width and height sizing; column span; ignoring the stack; visibility; font size, line height, letter spacing, font axes, text alignment, text resizing and wrapping; position and size; the outline of a shape (so a rounded box keeps its corner radius when its size changes); constraints. Text, colours and media are the same at every width: a page imported with breakpoints brings layers of their own for what its tablet or phone layout shows differently.

With the agent

Ask the motion agent, or call the tools over MCP:

• add_breakpoint with preset tablet or phone, or a name and width.
• set_breakpoint_override with breakpoint_id, clip_id, key and value; value: null removes the change; stack: true stacks a stack row.
• remove_breakpoint removes a view and its changes.

In exported code

Export code turns each breakpoint into a max-width media query (HTML, Svelte) or a max-[…px]: Tailwind variant (React), widest first. Each query states only what changes at that width, and a layer hidden at a breakpoint is hidden there.