Tools
There are several Layout tools available in Rive to build your responsive UI or content
Getting Started with Layouts
There are a number of ways to start adding layouts to your designs.
- Layout Tools in the Arrangement Tools menu
- Wrap in Layout
- Add Child Layout
- Dragging and Dropping Layouts
Layout Tools in the Arrangement Tools Menu
Arrangement Tools Menu showing the Layout, Row and Column Tools
-
Layout: A single Layout container. Select the tool and drag on an artboard to create the Layout. Drag directly onto the Artboard to create an Absolute Layout or on top of an existing Layout to create a Relative child. In addition, any objects positioned within the bounds of the newly created Layout will automatically themselves be wrapped in Layouts and absolutely positioned inside the new Layout.
-
Row/Column: The Row and Column tools create a Layout in the same way as the Layout tool above, but also include an initial set of children which will be positioned in either a Row or Column. You can use either the number keys or the up/down keys to define the number of children while dragging your row or column onto the stage. The created children will have their widths and heights set to Fill.
command
/ control
while dragging the object to prevent existing items from being moved into the Layout.Wrap in Layout
Instead of starting with an empty Layout container, you can wrap existing objects into a Layout. There are a number of ways to wrap an active selection in a Layout:
-
Right click on the stage or the hierarchy to surface the context menu. Select
Wrap in
>Layout
. You can do this for a single or multiple objects at once. -
Use the
shift
+L
shortcut. -
Alternatively, you can use the
Layout selection
button in the inspector. This is available when only non-Layout objects are selected.
Add Child Layout
When a Layout is the current selection, an Add Child Layout
button will appear in the Layout inspector. Clicking this will add a new Layout as a child of the selected Layout, with it’s width and height set to Fill.
Dragging and Dropping Layouts
Layouts (both Absolute and Relative) can be dragged and dropped into other Layouts at any time. This can be done in two ways:
- Drag and drop Layouts in the hierarchy panel.
- Drag and drop Layouts directly on the stage. When doing so, an indicator will show where in the new parent Layout the dragging Layout will be inserted.
Layouts can also be deleted by selecting the Layout on stage or in the hierarchy and hitting the delete key.
Was this page helpful?