Dynamic containers used to control multiple objects at once and accelerate interactive design, UI layout creation, and so much more
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.
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
Select the Bezi icon in the top toolbar to open the Command Center
Type “fr” into the search bar
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
Keyboard shortcut
For macOS type: opt
+ ⌘
+ g
For PC type: ctrl
+ alt
+ g
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.
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
Confirm there are one or more objects nested in a Frame
Select the nested objects
Go to the Properties Panel and find the Constraints section
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
Select the nested object with the constraints
Go to the Constraints section of the Properties Panel
Select the - icon
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.
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.
Dynamic containers used to control multiple objects at once and accelerate interactive design, UI layout creation, and so much more
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.
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
Select the Bezi icon in the top toolbar to open the Command Center
Type “fr” into the search bar
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
Keyboard shortcut
For macOS type: opt
+ ⌘
+ g
For PC type: ctrl
+ alt
+ g
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.
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
Confirm there are one or more objects nested in a Frame
Select the nested objects
Go to the Properties Panel and find the Constraints section
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
Select the nested object with the constraints
Go to the Constraints section of the Properties Panel
Select the - icon
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.
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.