Screens & breakpoints

In Shippp you do not design three unrelated artboards for mobile, tablet and desktop. You design one section that holds a screen per breakpoint. The screens share structure and components, and the export turns them into a single responsive page.

Screens

A screen is a top-level frame. Press S and click on the canvas to add one — the default is a 1440 × 900 Desktop screen. The screen inspector shows its resolution and breakpoint.

Right-click a screen for more options:

• Copy link to screen — a deep link your teammates can open
• Move to page…, Zoom to Fit, Hide/Show frame name, Lock/Unlock frame
• Delete Screen

Sections

A section groups the responsive versions of one page. Select the section to see its inspector: its position, the list of Screens, the gap between them and its appearance.

Add a breakpoint version

1. Select the section

   Click the section label above its screens.

2. Add a screen

   Click Add screen and choose a breakpoint that is not used yet — or a Custom width, such as 1280.

3. Adjust the layout

   Adjust the design for this width — for example stack a row vertically, hide a layer, or change a gap or a font size. Use the same components and tokens across the section so the code stays one responsive page.

Breakpoints

Breakpoints are part of your design system, so every file can have its own. Each breakpoint is a named width range, and together they cover every width with no gaps and no overlap. The smallest breakpoint covers everything from 0 up — there is no hidden base range. For example:

You find them at the top of the Foundation tab in the right panel (click an empty spot on the canvas to see it). Click Edit breakpoint on a row to open the Edit breakpoints card.

• Change the lower width of a breakpoint and the neighboring range follows. Renaming keeps every value you set.
• Add breakpoint adds a new, smaller breakpoint by splitting the current smallest range. A file can have up to five.
• Removing a breakpoint drops its values in one step you can undo. The last breakpoint can't be removed.
• The primary breakpoint is the view screens and components inherit from. Choose it with the radio button on its row; Shippp tells you which values the switch affects before you confirm.
• Tokens and text styles can hold a different value per breakpoint (see Tokens).

Layout guides

Layout guides draw columns, rows or a grid over a screen or a top-level frame, so you can line content up. They are visible only in the editor — never in the preview or the exported code.

1. Create a guide style

   In Foundations, open Layout guides and click Add layout guide. Set the kind (Grid, Columns or Rows), count, width, margin, gutter and color. A style can have a different setup per breakpoint.

2. Apply it

   Select a screen or top-level frame. In the inspector's Layout guides section, choose the style from Layout guide styles, or click Add layout guide for a one-off guide.

3. Show or hide them

   Press ⇧ G, or use Layout guides in the zoom menu.

A screen can override the guide for its breakpoint, and detaching a style copies it onto the layer so you can change it there.

Mark screens as ready for development

When a section is done, click Select for dev in the section inspector (or the </> marker on the canvas). It turns into Selected for dev. Code-ready screens are:

• the default selection in Export code (Code ready screens),
• what AI clients see as ready to build when they connect through MCP.