The editor window
What every panel in the editor is for.
Description
A landing page open in the editor. The mode row in the top bar is clicked through Draw, Animate (a timeline opens along the bottom), Prototype and Dev, then back to Design. Command-scroll zooms toward the pointer and Space-drag pans; Command-1 fits the page again. Clicking a section selects it and the inspector on the right shows its position, size and fills. Right-clicking the rectangle in the bottom toolbar opens its group of related tools.
- Click a mode in the top bar (Draw, Animate, Prototype, Dev) to switch what the editor does; click it again to go back to Design.
- Hold ⌘ (Ctrl) and scroll to zoom toward the pointer, hold Space and drag to pan, and press ⌘1 to fit everything.
- Click a layer on the canvas: the inspector on the right follows the selection.
- Right-click a toolbar tool to open its group.
The top bar
The file's name sits on the left, with undo and redo beside it. On the right is the row that switches mode — what you are doing with the whole document:
| Mode | What changes |
|---|---|
| Design | The default: frames, shapes, text, components |
| Draw | The toolbar becomes brushes; the brush palette docks under it |
| Animate | A keyframe timeline opens along the bottom |
| Prototype | Dragging a layer onto a frame connects them instead of moving it |
| Dev | A read-only lens for handoff — measurements, CSS and code |
| PopCorn | The whiteboard: stickies, tape, stamps, voting |
Only one mode is on at a time, and you leave one by choosing another. Everything else — rulers, the grid, prototype links, the minimap — is a view flag that only changes what is drawn, and any number can be on at once.
The left panel
Description
A launch post in the editor. The left rail switches the left panel between layers, assets, shapes and brushes; the right rail switches the inspector between Design, Prototype and Dev. Ctrl-backslash hides the interface for a clean canvas, and brings it back.
Pages at the top. A canvas file has pages you can name; a print or slides file has numbered
pages you move through with PageUp / PageDown, Home and End.
Page layers underneath: everything on the current page, in draw order, with the topmost layer at the top. Drag to reorder, double-click to rename, and use the search box on a busy file. While you drag, a line shows where the layer will land (a box around a frame or group means inside it). Let go above the first row to put it on top, or anywhere below the last row to put it at the bottom.
The icon rail down the far left switches what the panel shows: Composition (pages and layers), Components, Assets, Brushes and the Agent. Both side panels can be dragged wider from their inner edge, and the width is remembered.
The canvas
The infinite middle. Pan with Space and drag, or the middle mouse button. Zoom with the scroll
wheel — it zooms toward the pointer, not the centre. Mod+1 fits the page, Mod+2 fits the
selection and Mod+0 returns to 100%.
Frames (F) are the artboards: a page, a screen, a card. Anything inside a frame clips to it and
moves with it.
The right panel
The inspector, which follows the selection. With nothing selected it shows the page itself — its background, its export settings, and the file's local styles and variables. Select something and it becomes that object's position, size, fills, strokes, effects and text settings.
Its own rail switches between Design, Prototype, Dev / Inspect, Comments and, on a print file, Preflight.
The toolbar
Along the bottom, and it belongs to the current mode — the Design toolbar is not the PopCorn one. Each group has a chevron holding its relatives: the rectangle holds the ellipse, polygon, star and pixel canvas; the pen holds the pencil and brush.
The zoom level at the right end is also a menu: zoom to fit, zoom to selection, and the view flags for rulers, the grid, outlines and the pixel preview.
Getting the UI out of the way
Mod+\ hides both side panels. Ctrl+\ hides all of the chrome, leaving just the canvas.
Both are toggles.