Work with Layers, Frames, shapes, and vectors

Every visible object is a Layer. The Layers panel lists them front to back, the way they stack on the canvas: the top row is drawn on top. Select a row or an object on the canvas. Shift-click adds to or removes from the selection. Drag an empty area, or a Frame's background, for a selection box. Right-click a Layer on the canvas or in the list for commands such as Cut, Copy, Duplicate, Bring to front, Group, Hide and Lock.

The eye and padlock at the end of each row hide or lock the Layer. A hidden Layer does not appear in Prototypes or exports. A locked Layer, and everything inside it, cannot be selected or moved on the canvas; select it in the list to change it in the Inspector, or unlock it there.

Drag the grip at the start of a Layer row to reorder it or move it into another Frame, Group, Component, or Boolean group. The selected row also shows buttons for the same moves without dragging: Bring forward, Send backward, Move into the Layer above, and Move out of its parent. Reparenting keeps the Layer in the same visible canvas position unless its new parent uses Auto Layout.

A Frame is a sized container with its own fill and optional Auto Layout rules. New Frames clip their contents; turn off Clip content to the Frame under Position and size to let children show outside it. A Group is a transform and selection container without its own visible shape. Cmd/Ctrl+G groups the selected Layers inside the parent they share; Shift+Cmd/Ctrl+G ungroups them.

The Rectangle, Ellipse, Line, Pen, and Text tools create native Layers. Drag to create a shape or Line; the canvas shows its size and direction before you let go. Hold Shift while resizing from a corner to keep the proportions. With the Pen tool, click to place a corner point or drag while placing a point to create a curve. Click the first point to close the path; double-click or press Enter to finish an open path. Press Escape to leave the Pen tool; an unfinished one-point path is removed. Select a vector to show its anchors and curve handles, then drag either to edit the path. Double-click a path edge to add an anchor at that position.

Click an anchor to make it the active point. The Vector path section in the Inspector can change it to Corner, Smooth, or Mirrored. Smooth keeps the handles in one line while allowing different lengths. Mirrored keeps the handles in one line and at the same length. Remove handles makes the active point straight. Delete point or the Delete key removes it. A path keeps at least two points. The same section can open or close the active contour and reverse its direction.

Select a Rectangle, Ellipse, Line, or Vector with no child Layers to use Convert to Vector. Select several compatible Layers to use Flatten to one Vector. Flattening creates one editable Vector at the Page root, preserves the visible positions as separate contours, and uses the front Layer's fills, strokes, and opacity. It replaces the source Layers and can be undone. Boolean groups remain editable groups and cannot be flattened.

Select two or more Layers to see Combine in the Inspector. Union accepts two or more Layers. Subtract, Intersect, Exclude overlap, and Use as mask use exactly two; the lower Layer is the base shape or mask. The result remains a group, so its source Layers can still be selected and edited.

Double-click text, or select it and press Enter, to edit it on the canvas. See Edit and format text in Design for formatting, fonts and wrapping, and Set fills, strokes, corners, and shadows in Design for colour, borders and shadows. Use Image or Shift+Cmd/Ctrl+K to pick from Magpie media, upload, paste, or drop an image. A new image goes in the visible part of the canvas, beside the top-level Layers already in view without covering them, or at the top left of an empty view. It is sized to fit the view and made smaller if that lets it fit beside what is there; when nothing fits, it goes in the middle of the view. Pasted Layers whose originals are out of view are placed the same way.

If an imported vector or image is not represented correctly, Contact support.