Exporting

Getting the work back out — images, vectors, documents and video.

Everything exports from the same renderer that draws the canvas, so what you see is what lands in the file.

Every way out of the file, in the command palette · 0:03
Description

A landing page in the editor. Command-K opens the command palette and export is typed: the list narrows to every export route — PNG, SVG, PDF, video, Lottie, web code and the rest. The arrow keys move down the list, and Escape closes it.

  1. Press ⌘K (Ctrl+K) and type export to list every export command.
  2. Arrow down to the one you want and press Enter.

The quick way

Select something and press Mod+Shift+E. With nothing selected, Export Page in the inspector takes the whole page. Mod+K and "export" lists every route out of the file in one place.

Export settings

Export a design as PNG · 0:05
Description

A launch post with its frame selected. At the bottom of the Design panel, Add export adds an export setting; its scale is set to 2x, with PNG as the format, and Export Page 1 writes the file.

  1. Select the layer or frame.
  2. At the bottom of the Design panel, open Export and click Add export.
  3. Pick a scale (2x here), add a suffix if you like, and a format (PNG, JPG, WebP, SVG or PDF).
  4. Click Export.

A layer can carry its own export settings, so the things you ship repeatedly — an app icon, a hero image, a sprite — remember how they leave. Add a row per output in the inspector's Export section: each has a format, a scale and a suffix, so one button gives you icon.png, icon@2x.png and icon.svg at once.

Formats

FormatNotes
PNGTransparency; any scale
JPGSmaller, no transparency
WebPSmaller again, with transparency
SVGReal vectors — including patterns and pixel art
PDFVector, with fonts embedded. See print
GIFAnimated, from a pixel canvas or an Animate timeline
Sprite sheetEvery frame in a grid, as a PNG plus an Aseprite-compatible JSON atlas

Beyond the per-layer settings there is also MP4 and WebM video (with sound) and PNG sequences of an animation — see Exporting video — PPTX for PowerPoint, CSV, the raw .popcraft JSON, and pages as images bundled into a ZIP.

An animated frame exports as you see it: open in Animate, a still export (PNG, JPG, WebP, SVG, PDF, a copy, pages as images) takes every animated layer at the playhead, text animators included. Outside Animate it exports at rest. The agent, CLI and API pass time (ms) to pick the moment.

Copy as PNG and Copy as SVG put the selection straight on the clipboard, which is usually faster than a round trip through your downloads folder.

Slices

A Slice is an export region that isn't a layer: draw one over part of a design and it exports exactly that rectangle, whatever sits under it. Use them for cutting several assets out of one composed screen.

Code

Designs also come out as code — CSS, HTML, React, Tailwind, SwiftUI and Compose. See code and web export.