Frames & layout
A frame is a box that holds other items. Use frames to group things that belong together - a card, a navigation bar, a pricing column - so they move, resize and behave as one.
Making a frame
- From a selection - select two or more items and press
Ctrl + G(or use Group in the panel). A frame is drawn around them; nothing moves. - Empty - click Frame on the toolbar, then drag items into it.
- By dropping - hold
Altwhile dropping one item onto another to combine them.
To take an item out of a frame, drag it outside the frame. To remove the frame but keep its contents where they are, select the frame and press Ctrl + Shift + G (ungroup). Deleting a frame deletes everything inside it (undo brings it back).
Arranging what's inside
| Arrange contents | How it behaves |
|---|---|
| Free (place anywhere) | Items keep the exact positions you give them inside the frame. |
| In a row | Items line up left to right with an even gap - like a toolbar or a row of cards. Drag to reorder. |
| In a column | Items stack top to bottom with an even gap. Drag to reorder. |
Rows and columns also offer Width and Height: Fixed keeps the size you set; Hug contents makes the frame grow and shrink to fit what's inside. Resizing a hugging side by hand switches it back to Fixed. Stack on phones turns a row into a column on phones.
Frame roles
A frame's Role (Properties → Frame) tells search engines and screen readers what the frame is. It doesn't change how it looks.
| Role | Use it for |
|---|---|
| Header | The top of the page (logo, navigation, sign-up button). |
| Navigation | A group of links to other pages. |
| Main content | The page’s main content. Pages already get this automatically. |
| Section | A distinct part of the page, such as features or pricing. |
| Sidebar | Related but secondary content. |
| Footer | The bottom of the page (links, copyright). |
Ctrl + G to put them in a frame, then set its role to Navigation.