Design
The editor
A tour of the canvas, the toolbar, the layers panel and the inspector.
The editor has four areas: the left panel for pages and layers, the canvas in the middle, the toolbar at the bottom of the canvas, and the right panel with the inspector, your project's foundation, assets and export.
Left panel
The file name sits at the top. Click it to rename the file; the folder it lives in is shown underneath and takes you to that folder. Next to it, a status tells you whether your work is saved and whether you are collaborating live.
| Section | Contains |
|---|---|
| Pages | Every page of the file. Add page (+) creates a new one; right-click a page to rename or delete it. The magnifier searches layers. |
| Layers | The layers tree of the current page. Drag rows to reorder; use the eye and lock icons to hide or lock layers. Containers show which smart layout they use. |
Drag the divider between Pages and Layers to resize them; double-click it to go back to automatic height. At the foot of the panel you find What's new and Feedback.
File menu
Open it with the arrow next to the file name.
- Go to dashboard
- Rename…, New File, Open File… (⌘ O) and Open Recent — your last ten files, with the workspace name for files from another workspace
- Save as… (⌘ ⇧ S) downloads a .comet backup of the file; Duplicate File… and Move to
- Save Version… and Version History
- Keyboard Shortcuts… and Send Feedback…
- Import DS / Export DS — move tokens (and optionally components) between files as .ds.json
- Export Code…
Search layers
Click the magnifier on the Pages header or press ⌘ F. Choose This page or All pages. Picking a result switches to its page, selects the layer and zooms to it. Enter and ⇧ Enter step through the results; Esc closes the search.
Toolbar
The toolbar floats at the bottom of the canvas. Hover a tool to see its name and shortcut.
| Tool | Shortcut | Use it to |
|---|---|---|
| Pointer / Hand | V H | Select, move and resize layers, or pan the canvas. |
| Screen | S | Add a screen (a top-level frame at a breakpoint). |
| Container | F | Draw a box that holds other layers — the base of every smart layout. |
| Rectangle / Ellipse | R O | Draw shapes. |
| Text | T | Add text. |
| Comment | C | Drop a comment pin on the canvas and open the comments list. |
| MCP | Shows connected AI agents, whether one is working in this file and your weekly MCP usage. See MCP. |
Press I for the eyedropper: pick a color from the canvas and apply it to the selection.
Canvas navigation
| Action | How |
|---|---|
| Pan | Scroll, hold Space and drag, or drag with the middle mouse button |
| Zoom | Hold ⌘ / Ctrl and scroll, or pinch on a trackpad |
| Zoom to fit | ⇧ 1 |
| Zoom to selection | ⇧ 2 |
| Zoom to 100% | ⇧ 0 |
| Rulers | ⇧ R |
| Layout guides | ⇧ G |
| Outlines | ⌘ ⇧ O |
| Hide UI | ⌘ . |
The zoom control sits in the top right, next to the play button. Its menu has a percentage field, the zoom options, and switches for rulers, outlines, the pixel grid, layout guides, multiplayer cursors, comments and resolved comments.
Right panel
At the top you see who else is in the file (click an avatar to follow them), the zoom control, the play button (Open live preview) and Share.
With nothing selected: your project
Click an empty spot on the canvas and the right panel shows the whole project in three tabs:
| Tab | Shows |
|---|---|
| Foundation | A summary of your design system — breakpoints, typography, colors, spacing, size, radius, border width, opacity, effects and layout guides. Open Foundations opens the full view. See Tokens. |
| Assets | Your component library and the icon catalog. |
| Export | Copy as code and export settings for the file. See Export code. |
The page background color is at the foot of the panel, in the Page color field.
The inspector
Select a layer and the inspector shows its settings:
| Section | What you set |
|---|---|
| Instance | Variant and property values, Go to main component, Detach instance, Reset to main component. |
| Properties | On a main component: its variant, boolean, text, instance swap and slot properties. See Components. |
| Position | Alignment, X/Y, constraints (Left, Right, Left + Right, Center, Scale…), rotation and flip. Ignore smart layout takes a layer out of its parent's flow. |
| Layout | Free, Vertical, Horizontal or Grid; wrap; width and height (Fill, Hug, Fixed); alignment; gap; padding; Clip content. Layout options holds the stacking order. |
| Layout guides | On screens and top-level frames: columns, rows or a grid. See Screens & breakpoints. |
| Appearance | Visibility, opacity and corner radius — each can use a token. |
| Fill | Color, gradient or image fills, from a custom value or your Libraries (tokens). |
| Border | Stroke color, width and style. |
| Typography | Text style, font, size, line height, letter spacing, alignment and More text options. |
| Effects | Drop shadow, inner shadow, layer blur, background blur and effect styles. |
| Selection colors | Every color in the selection; Replace color swaps one everywhere. Collapses when there are many colors. |
| Export | Code or image export of the selection. |
Tip
Select several layers to edit them together — the inspector shows N selected — edits apply to all.
Foundations
Press ⌃ 3, click Open Foundations in the Foundation tab, or find it in the command palette. Foundations opens as a full-screen window above the canvas, with tables of your tokens, text styles, effects and layout guides. Press ⌃ 3 or Esc again to return to the canvas. See Tokens.
Command palette
Press ⌘ K to search pages, components, tokens and actions — for example Save version… or Open Foundations. Press ? at any time to see every shortcut, or read the shortcut reference.
Saving and working offline
Shippp saves automatically — there is no save button to remember. While a file opens, you see an outline of the editor until the content is ready. The status next to the file name tells you what is happening:
| Status | Meaning |
|---|---|
| Connected — collaborating live | Everything is saved and synced with your collaborators. |
| Offline — changes are saved locally | You can keep working. Changes sync when you are back online. |
| Reconnecting to collaboration server… | A short network hiccup. Keep working. |
| Access removed — live editing stopped | Your access to the file changed. Ask the owner to share it again. |
Notifications are one line. When there is more to say, click Details; an expanded notification stays until you close it.