Line up, reuse and inspect what you draw

Align and space parts, stack them, reuse components, step back through your changes and copy what a developer needs.

In short

On a drawn page, "More page tools" holds the tools that keep a screen tidy. Line parts up, lay a box out as a column or a row, and reuse a part on every page.

You can also step back through your changes and copy the sizes and code a developer needs.

Before you start

Who: someone who can edit the design. Anyone who can open it can inspect and copy.
Plan: any plan with the Designer.
First: a drawn page (see /help/designer/draw-a-screen).

Line parts up

Select two or more parts: hold Shift and click them, or drag a box around them.
Open "More page tools", then "Align".
Choose a line, such as "Align left edges" or "Align tops". With three or more, "Space evenly across" and "Space evenly down" share out the gaps.

Stack a box

Select a box that holds other parts, such as a panel.
Under "Stack", switch on "Stack what it holds".
Pick a "Direction", "Column" or "Row", and set the "Gap" and "Padding".

What it holds stays in line as you add, move or resize. Drag one part past another to change the order.

Reuse a part

Select a part and switch on "Reusable" under "Component".
On any page of the same component, open "More page tools" and choose "Insert component".
Change the original and every copy changes. To change one copy alone, press "Detach".

Undo history and shortcuts

"Undo history" lists your steps with their time. Pick one to go back to it, or forward again.
Press ? on a page, or choose "Keyboard shortcuts", to see every key.

Inspect for developers

Select a part and open "Inspect": "Position", "Size", spacing and the gaps to the parts beside it.
Copy the part as "CSS" or as "React".
From "More page tools", choose "Copy page as React" or "Save page as SVG" for the whole page.

Let AI do it

Ask AI to tidy a page: line parts up, space them evenly or stack a box. "Undo" takes it back while nothing else changed.

"From a card", beside the page's AI box, draws a first screen from a card's words.

/help/designer/draw-a-screen
/help/designer/clickable-prototype
/help/designer/export-a-design