Frames (beta)

Dynamic containers used to control multiple objects at once and accelerate interactive design, UI layout creation, and so much more

What are Frames?

Frames act as containers that provide additional control over nested objects with enhanced functionalities. Frames allow you to build everything from individual elements, to entire spaces and UI surfaces.

Similar to Groups, you can adjust the properties of a frame including its dimensions and visibility.

Frames enable other features including constraints, clipping, align and distribute, and additional State Machine capabilities.

Constraints

Objects nested within a Frame can be constrained to any of the Frame’s faces.

Clipping

Objects nested within a Frame can be clipped by the parent Frame.

Align and Distribute

Objects nested within a Frame can be aligned and distributed based on the Frame’s boundaries.

Creating Frames

There are four ways to create Frames in Bezi.

If you have objects selected in your canvas, the Frame will automatically be created around them. If there aren’t any active selections, you can draw a Frame in the viewport.

Command Center

1. Select the Bezi icon in the top toolbar to open the Command Center

2. Type “fr” into the search bar

3. Select Frame from the dropdown, this will create a Frame in the scene

Toolbar

Select the Frame (#) icon in the toolbar to create a Frame in the scene.

Contextual menu

1. Select an object(s) in the scene

2. Right-click and select Frame from the contextual menu dropdown

Keyboard shortcut

For macOS type: opt + ⌘ + g

For PC type: ctrl + alt + g

Using Frames for clipping

Enable clipping on Frames to hide the children objects that extend beyond the Frame’s boundary.

Enabling Frame clipping

To enable clipping, select a Frame, go to the Properties Panel, and check the Clip content box.

Adding caps to clipped objects

Enabling caps renders a solid color on a Frame’s nested objects where the Frame’s boundary and its nested objects intersect. Cap colors can be changed in the Properties Panel.

Each Frame renders its own caps and cap colors. If you need a different cap color inside a Frame, try nesting each object in its own Frame.

Using constraints on Frames

Constraints dictate how nested objects behave when their parent Frame’s size changes. Constraints can be applied to objects that are inside a Frame.

Adding constraints

1. Confirm there are one or more objects nested in a Frame

2. Select the nested objects

3. Go to the Properties Panel and find the Constraints section

4. Click the + icon in the Constraints section of the Properties Panel

By default, constraints are set to Left (-X), Bottom(-Y) and Back (-Z).

Changing constraint settings

Within the Constraints section of the Properties Panel, hover over the the X axis, Y axis, and Z axis icons. Drop menus will appear for each.

Hover over each item in the drop menus to preview which axis the constraint setting will be applied on.

Multi-face constraints

Use multi-face constraints to constrain nested objects to opposite faces (ex. +X and -X). The result is the object scaling in both directions on an axis.

Removing a constraint

1. Select the nested object with the constraints

2. Go to the Constraints section of the Properties Panel

3. Select the - icon

Align and Distribute within Frames

When one or more nested objects are selected, the align and distribute options appear at the top of the Properties Panel. Objects within their parent Frame can be aligned or distributed relative to to the Frame or each other, allowing for precise and efficient positioning.

There are two align and distribute modes to choose between: Within Frame and Selected Objects.

Within Frame mode

The Within Frame mode will align and distribute based on the parent Frame’s boundaries.

Selected Objects mode

The Selected Objects mode will ignore the Frame and align and distribute the selected objects relative to each other.

You can align and distribute nested objects within different Frames at the same time. The selected objects will always respect their own parent Frame.

Using Frames with the State Machine

Frames can have states, and each Frame state can manage multiple nested object’s states. Nested objects listen to the state of the parent Frame, so you can manage all nested objects within the parent Frame’s state machine.