Frames

Display components, adjust their direction and spacing for any layout.

What are Frames?

Frames are layout components that can contain and group other components inside them → including other frames. The use of frames can greatly streamline complex layout designs. Flexbox, the underlying system of frames, is a CSS layout model that simplifies the distribution of space and alignment of items in a container, adapting to varying item sizes.

To move components in and out of frames, right-click on the component you want to move and click Relocate.

⁠

Loading…⁠

⁠

Frames are flexbox containers where you can add other components. Flexbox allows you to change the direction and spacing of components inside frames - and by adding frames inside other frames you can create any layout you could possibly need.

⁠

Toggle Mode

The only setting really unique to frames is toggle mode. This is commonly used when you want to create an array of components (buttons, images, etc) where one appears active and the rest are faded (to indicate they are not active).

By switching on toggle mode this effect will be applied to any components inside the frame.

Add multiple buttons in a frame enable toggle mode - to show only one button at a time as active.

⁠

⁠

Each button will be highlighted automatically when clicked.

⁠

Flexbox CSS

We borrowed the name Frames from Figma, a popular UX Design software - but in reality both Figma and Aeropage frames use a system called Flexbox.

Flexbox (short for "Flexible Box") is a layout model in CSS (Cascading Style Sheets) that is designed to provide an efficient way to distribute space and align items within a container, even when the sizes of the items are unknown or dynamic. It was introduced to help address complex layout challenges that were difficult to achieve using traditional layout methods.

In this layout example, the outermost frame has a horizontal layout, with two frames inside.

⁠

⁠

The left frame contains an image, the right frame is vertical - containing text and another frame.

⁠

⁠

The frame below the text has two more frames (each horizontal) - each with a button, heading and paragraph.

⁠

⁠

What are Frames?

Toggle Mode

Flexbox CSS

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.