Studio Canvas Tools And Layers
Overview
Canvas tools are for constructing and editing the visible layout. Layers are for understanding the structure behind the layout. Use both together when a design has more than one or two objects.
Quick Toolbar
The bottom quick toolbar gives you the main creation tools:
| Tool | Use it for |
|---|---|
| Move / Scale | Select, move, resize, and transform elements. |
| Hand | Pan around the canvas without selecting objects. |
| Shape | Add rectangles, ellipses, and other shape elements. |
| Text | Add editable text. |
| Image | Upload images or pick reusable images from Library. |
| AI Generate | Generate a new image directly on the canvas. |
| Pen | Draw freehand marks with color, weight, and opacity controls. |
| Assets | Open reusable visual assets. |
Element Types
Studio canvas can contain text, image, shape, line, frame, group, and drawing elements. Each type exposes controls that match its purpose:
- Text: font family, weight, size, color, alignment, vertical alignment, and advanced text controls.
- Image: stroke, corner radius, opacity, crop, and selected-image AI actions.
- Shape: fill, image fill mode, stroke, corner radius, and opacity.
- Line: stroke color, weight, style, arrow-like line behavior, dimensions, and rotation.
- Frame: fill, stroke, corner radius, clipping, child elements, and export.
- Group: shared transform, lock, ungroup, child count, export, and copy to Figma.
- Drawing: freehand paths with drawing-specific appearance.
Layers Panel
Open layers when you need structure-level control. The panel lets you:
- Select one or multiple layers.
- Expand groups and frames.
- Rename layers.
- Toggle visibility and lock state.
- Reorder layers.
- Drag elements into groups or frames.
- Use context menus for element actions.
Selection And Arrangement
Useful operations include marquee selection, deep selection, grouping, ungrouping, locking, hiding, bring forward, send backward, bring to front, send to back, and alignment.
Common shortcuts:
| Shortcut | Action |
|---|---|
V | Move tool |
K | Scale tool |
H | Hand tool |
F | Frame tool |
T | Text tool |
R | Rectangle |
O | Ellipse |
L | Line |
Shift + L | Arrow |
Cmd/Ctrl + G | Group |
Cmd/Ctrl + Shift + G | Ungroup |
Cmd/Ctrl + Shift + L | Lock or unlock |
Cmd/Ctrl + Shift + H | Show or hide |
Best Practices
- Use frames for contained layouts and groups for objects that should move together.
- Rename important layers before export or handoff.
- Lock background elements when editing foreground content.
- Use alignment shortcuts for precision before manually dragging.
- Use the canvas for exact layout work, not for broad creative direction changes.