Positioning & Alignment
Position elements precisely with alignment tools, distribute spacing, and exact coordinates.
Positioning Elements
Every element on the canvas has an X (horizontal) and Y (vertical) position measured from the top-left corner of the page. You can position elements in three ways:
Drag and Drop
Click and drag any element to move it on the canvas. Hold Shift while dragging to constrain movement to horizontal or vertical only.
Arrow Key Nudge
- Arrow keys — Move the selected element by 1 pixel
- Shift + Arrow keys — Move by 10 pixels for larger adjustments
Exact Coordinates
Set precise X and Y values in the inspector panel under Position. Enter pixel values for exact placement.
Element Sizing
Set element dimensions in the inspector:
- Width — Horizontal size in pixels
- Height — Vertical size in pixels
- Lock aspect ratio — Click the lock icon to maintain proportions when resizing
You can also resize by dragging the corner or edge handles on the canvas.
Alignment Tools
Align selected elements relative to the page or to each other:
Align to Page
- Align left — Snap to the left margin
- Align center (horizontal) — Center horizontally on the page
- Align right — Snap to the right margin
- Align top — Snap to the top margin
- Align middle (vertical) — Center vertically on the page
- Align bottom — Snap to the bottom margin
Align to Selection
When multiple elements are selected, alignment uses the bounding box of the selection as the reference. Select multiple elements by holding Shift and clicking each one, then use the alignment tools.
Distribution
Distribute spacing evenly between three or more selected elements:
- Distribute horizontal — Equal horizontal spacing between elements
- Distribute vertical — Equal vertical spacing between elements
This is especially useful for laying out rows of labels, columns of data, or evenly-spaced icons.
Rotation
Rotate elements by setting the rotation angle in degrees in the inspector. Common uses:
- 45° — Diagonal watermark text
- 90° — Vertical text for tab labels
- -15° — Slight tilt for decorative elements like "DRAFT" stamps
Z-Order (Layering)
When elements overlap, their layer order determines which appears on top:
- Bring to Front — Move element above all others
- Send to Back — Move element behind all others
- Move Forward — Move up one layer
- Move Backward — Move down one layer
See Canvas & Layers for more on layer management.
Next Steps
- Snapping & Guides — Smart alignment helpers
- Grid & Rulers — Visual alignment aids
- Responsive Sizing — Flexible element dimensions