Get started
Key concepts
Files, spaces, screens, frames, components, tokens and snapshots — the vocabulary of Shippp.
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 organised in pages, listed at the top of the Design tab. A new file starts with two:
| Page | Used for |
|---|---|
| Components | Your main components and their Studios. Components can be grouped in categories. |
| Design | Screens and flows of your product. Add more pages with the + button (Page 2, Page 3…). |
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.
Note
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; instances are the copies you place in screens. Variants are defined as properties (for example Size: Default / Compact) in the component's Studio, a grid that shows every combination.
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 the Foundations 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
| In Shippp | In the generated code |
|---|---|
| Section with screens | One responsive page component |
| Breakpoint | A media-query breakpoint in the theme |
| Smart layout | Flexbox or CSS grid |
| Fill / Hug / Fixed | flex: 1 · fit-content · a fixed width or height |
| Semantic token | A theme token (CSS variable), responsive if you set per-breakpoint values |
| Text style | A text style in the theme, e.g. textStyle="H1" |
| Component with variants | A typed React component with a recipe and variant props |
| Code-ready screen | What exports and AI clients build by default |