Align and Distribute

Summary

This lesson covers the Align and Distribute tools in Rive, which allow for precise positioning of objects. It explains how these tools behave contextually depending on the number of selected objects—either aligning relative to the artboard or to each other. You will also learn how to use distribution tools to create equal spacing between multiple elements.

Step by Step

1. 00:04
   Locating the Tools

   Align tools appear in the top inspector bar whenever you have one or more objects selected.
2. 00:11
   Basic Alignment Options

   Options include Left, Right, Top, and Bottom edge alignment, as well as Vertical and Horizontal centering.
3. 00:33
   Artboard Alignment

   When a single object is selected, align tools operate relative to the Artboard's boundaries.
4. 00:41
   Relative Alignment

   When multiple objects are selected, they align relative to each other based on the bounds of the overall selection.
5. 00:55
   Aligning Groups

   Grouping multiple objects (Command + G) treats them as a single entity, allowing you to align the entire group relative to the artboard.
6. 01:23
   Distribute Tools

   These tools clean up uneven gaps between objects. Use Horizontal or Vertical Distribution to ensure perfectly equal spacing.
7. 01:46
   Distribution Requirements

   Note that distribution options are only available and active when you have more than two layers selected.

Notes About Current Rive

• Context Matters: Always double-check your selection count to understand if you are aligning to the artboard or to the other selected shapes.
• Layout Workflow: For clean layouts, align small parts first, group them, and then use the group to align against the larger composition.
• Precision: Distribute tools eliminate the need for manual pixel-counting when creating lists, menus, or repetitive UI elements.