Selecting, manipulating, and deep-navigating vector shapes on a complex canvas is a core skill for motion design, character rigging, and UI animation. The selection tools and transform gizmos inside Rive give designers precise control over spatial positioning, scale, rotation, and hierarchy navigation without disturbing surrounding artwork.
Master Transform Tools and Gizmos
The primary selection interface relies on dedicated transform modes accessible via the top-left toolbar or direct keyboard shortcuts:
- Select Tool (Shortcut V): The standard multi-purpose selection tool. Clicking an object displays the complete transform gizmo at its pivot origin. This unified gizmo includes directional arrows to translate position along the X and Y axes, square handles to scale dimensions, and a distinct yellow outer ring for smooth object rotation.
- Translate Tool (Shortcut Q): Isolates spatial positioning handles. This mode allows you to translate objects across the canvas without needing to hover directly over the shape geometry itself—a major advantage when fine-tuning dense layouts or small vector paths.
- Scale Tool (Shortcut S): Displays dedicated scaling handles to adjust width and height. Holding the Shift key while dragging ensures proportional scaling across both axes simultaneously.
- Rotate Tool (Shortcut R): Provides a focused rotation gizmo to spin shapes around their origin point without accidentally triggering unintended translation or scale adjustments.
Navigating Complex Layer Hierarchies
When building detailed character rigs, vector illustrations, or nested UI component systems, elements are naturally grouped inside hierarchical folder trees. Clicking directly on a nested shape automatically selects the highest-level parent group in that sub-tree rather than the individual shape path.
To drill down into nested groups and select specific child layers:
- Double-Click Drilling: Double-clicking an element on the canvas steps down one level deeper into its layer hierarchy. Double-clicking repeatedly allows you to move progressively through parent groups until you highlight the exact vector path, stroke, or bone node desired.
- Hierarchy Traversal via Escape: Pressing the Escape key steps back outward one level in the hierarchy tree. If you are currently editing a deeply nested child path, hitting Escape reselects its immediate parent container, making it effortless to traverse up and down your structural tree.
- Deep Selection Shortcut (Command/Control Click): Hold Command (macOS) or Control (Windows) and click any shape on the canvas to bypass all parent groups, clipping masks, and bone containers instantly. This deep-selection modifier isolates and highlights the exact vector path beneath your pointer in a single click.
Spatial Control for Efficient Animation Setups
Understanding how selection gizmos interact with object hierarchies directly impacts your animation workflow when setting up keyframes and state machine interactions.
Key practices for efficient canvas manipulation include:
- Off-Target Manipulation: Using dedicated tools like Translate (Q) or Scale (S) prevents accidental selection shifts when working with closely overlapping vector paths or intricate character faces.
- Clean Group Management: Leveraging deep selection shortcuts enables quick property tweaks in the Inspector—such as color fills, stroke thickness, or opacity adjustments—without breaking apart established group hierarchies or unlinking bone relationships.
- Precision Alignment: Combining targeted transform modes with origin point repositioning ensures smooth keyframing across complex timelines and interactive state machine setups.
Mastering these selection techniques and hierarchy shortcuts provides total spatial control over your vector assets, ensuring your design and animation workflows remain fast, precise, and organized. Youtube
