Key concepts

Shippp works like the product design tools you know, but a few concepts carry extra meaning because they map directly to the code of your product. Learn these once and the rest of the product will feel predictable.

Workspace, folders and files

A workspace holds your team, your plan and your files. Inside it, folders group related files — a folder can be shared with the whole workspace or kept private. A file usually holds one product or product area — its screens and flows, and the design system they are built from — with its own history. It is the source of truth for that part of the product: exports, previews and AI clients all read from it.

Pages

A file is organized in pages, listed at the top of the left panel. Use pages for screens and flows of your product — and, if you like, one for your main components. Add more pages with the + button.

Sections, screens and breakpoints

A screen is a top-level frame — one page of your product at one width. Screens that represent the same page at different widths live together in a section. Each screen in a section is bound to a breakpoint (for example Mobile, Tablet, Desktop), so the section becomes one responsive page in code.

Containers and smart layout

A container (F) is a box that holds other layers. Turn on Layout and it becomes a smart layout: children flow vertically, horizontally or in a grid, with gap, padding and alignment — exactly like CSS flexbox and grid. Each layer sizes itself with Fill container, Hug contents or a fixed value.

Components, variants and instances

A component is a reusable piece of UI — a button, a card, a navigation bar. The main component holds the design and lives on the canvas as a grid that shows every combination of its variants; instances are the copies you place in screens. Properties define what can change: variants (for example Size: Default / Compact), booleans, texts, swappable instances and slots.

Tokens and styles

Tokens (Shippp also calls them variables) are named values — colors, spacing, sizes, radii, opacity, shadows. Primitive tokens hold raw values; semantic tokens give them meaning and can change per breakpoint. Text styles and effect styles bundle typography and shadows. All of them live in Foundations (⌃3), with a summary in the right panel's Foundation tab.

Versions and snapshots

Shippp saves continuously. When you reach a milestone, Save Version… creates a named version you can return to. AI clients and exports can also work from these fixed versions, so code can be generated from exactly what you approved.

How the concepts map to code