Slices & Asset Export

A slice is a named rectangular region of the canvas that can be exported on its own. Slices are the backbone of UI and game-asset workflows: define every icon, sprite, or screen once, then export them all at multiple scales and formats in a single pass. The Slice tool draws them on the canvas, the Slices panel (the scissors tab in the right sidebar) manages them, and a family of export dialogs turns them into files.

Drawing & Editing Slices

Pick the Slice tool (in the navigation/utility group of the toolbar), then:

• Drag in empty space to draw a new slice. Hold Shift for a square, Alt to draw from the center out.
• Click a slice to select it; Shift-click to add or remove it from a multi-selection.
• Drag a selected slice to move it — all selected slices move together. Hold Shift to axis-lock.
• Ctrl/Cmd + drag a slice to duplicate it.
• When exactly one slice is selected, drag its handles to resize (Shift = lock aspect ratio, Alt = resize from center). A rotation handle above the slice rotates it (Shift snaps to 15°).
• Shift + drag in empty space to marquee-select multiple slices.
• Enter or F2 to rename the selected slice inline; Delete/Backspace to remove the selection.
• Arrow keys nudge by 1px (Shift = 10px).

Slices snap to the grid, guides, other slices' corners, and the canvas edges (the same snap engine the other tools use). Slice edits — move, resize, rename, color, and more — are fully undoable. Press ? in the Slice tool options for a keyboard cheat sheet.

The Slices Panel

Open the Slices tab in the right sidebar to manage every slice in the document:

• Reorder slices by drag-and-drop — the list order is the export z-order.
• Search by name and filter by tag, color, or state (Locked, Hidden, Bound, Has comments).
• Multi-select to align (left/center/right/top/middle/bottom) and distribute horizontally or vertically.
• Per-row visibility toggle, lock toggle, color-label dot, and a kebab menu of actions.
• Numeric X / Y / W / H / ° inputs when a single slice is selected.
• Bind a slice to a layer so its bounds auto-reflow when that layer’s content changes.
• A footer summary of total / hidden / locked slice counts.

Auto-Slice

Instead of drawing every region by hand, generate slices automatically from existing content. Each path proposes a set of slices and applies them in one undoable step:

Artboards & Nesting

Slices can be nested into a hierarchy, Sketch-style. Group several slices into a parent artboard and dragging the parent moves all of its children with it. The panel shows the tree with indentation and collapse chevrons. A rotated or scaled parent propagates its transform to children at export time. Deleting a parent reparents its children rather than orphaning them.

Tags, Comments & Notes

• Tags — label slices for filtering and to drive naming templates ({tag}).
• Color labels — tint a slice’s outline and name pill for visual grouping.
• Notes — free-form Markdown notes per slice (bold, italic, links, lists), surfaced in the spec sheet.
• Comments — threaded comments with @-mentions and resolve/reopen, optionally visible to share-link viewers.

Slice Templates

The Slice Template picker ships ready-made sizes for common platforms — Instagram square/portrait/story, Twitter banner/card, Facebook cover, LinkedIn banner, YouTube thumbnail/banner, iOS App Icon, Favicon — and you can save the current selection as your own template. Templates sync to the cloud and appear in the Asset Library.

Exporting Slices

Open the Slice Export dialog (from the panel or the command palette) to render slices to files. Export all slices or just the selection; skip hidden slices; and set per-slice overrides for format, scale, suffix, JPEG background color, and even a per-slice layer subset. Export ladders render each slice at multiple scales at once (e.g. iOS @1x/@2x/@3x or Android mdpi → xxxhdpi). A pre-export validation banner flags off-canvas slices, duplicate filenames, oversized output, and empty layer subsets before you commit.

Spec Mode & Color Extraction

Turn on Spec mode (View > Overlays) to overlay dimension pills on every slice, spacing pills between neighbours, and an extracted color swatch strip — a live redline view for design handoff. The same extracted palette feeds the spec-sheet PDF.

Watch Mode

Watch mode re-runs your last export configuration automatically whenever the canvas changes (debounced). On browsers that support the File System Access API it writes updated files straight to a chosen output folder; elsewhere it downloads a fresh ZIP per cycle. Ideal for keeping an asset folder in sync with the editor while you iterate.