Canvas & Screens

Navigate the infinite canvas, add screens, and configure device frames

Canvas & Screens

The canvas is an infinite workspace where you arrange and preview your screens. Each screen represents one page of your mobile experience -- a paywall, an onboarding step, or a survey question.

Navigating the canvas

The canvas uses Figma-style controls.

Pan and zoom are smooth and hardware-accelerated. Overlays like selection handles and presence cursors stay readable at any zoom level.

Adding screens

There are several ways to add a screen to your project:

• AI generation -- Describe what you need in the chat panel. The AI creates a new screen with components, layout, and copy.
• Screen library -- Open the screen library to browse screens from previous projects. Click to insert, or drag a screen onto the canvas to place it at a specific position.
• Blank screen -- Add an empty screen from the project start wizard when your project is empty.
• Duplicate -- Right-click a screen and choose Duplicate, or press Ctrl/Cmd + D.

When a new screen is added, the canvas animates to bring it into view.

Screen properties

Select a screen by clicking its title or preview area. The right sidebar shows screen-level properties:

• Name -- Double-click the title above the preview to rename. Names appear in the layers panel and in published version metadata.
• Device -- Choose a device model (e.g., iPhone 15 Pro, iPhone SE). The preview resizes to match the device dimensions.
• Orientation -- Switch between portrait and landscape.
• Custom dimensions -- Drag a corner handle to resize freely. Hold Shift to bypass device snapping and set custom width and height.

Device frame snapping

When you resize a screen by dragging, the editor snaps to known device sizes for the current orientation. If you resize past a snap point, the screen adopts that device's dimensions and metadata. Holding Shift disables snapping and marks the screen as a custom device.

Organizing screens

Drag to reposition

Click and drag a screen's title pill to move it on the canvas. When multiple screens are selected, dragging one moves all of them together. Other collaborators see your drag in real time.

Hide and show

Right-click a screen and choose Hide to remove it from the canvas and the published version without deleting it. Hidden screens are excluded from navigation links and the final build. Toggle them back with Show.

Delete

Right-click and choose Delete, or select the screen and press Backspace/Delete. Deletions are undoable with Ctrl/Cmd + Z.

Setting a starting screen

Every published project needs a starting screen -- the first screen users see. Set it in one of two ways:

• Right-click a screen and choose Set as starting point.
• In Interactions mode, drag the entry marker (play icon) to a different screen.

The starting screen is indicated by an entry arrow on the canvas. Publishing is blocked until a starting screen is set.

Marquee selection

Click and drag on the canvas background to draw a selection rectangle. All screens that intersect the rectangle are selected. Use this for bulk operations like moving, duplicating, or deleting multiple screens at once.

Screen library

The screen library stores snapshots of screens you have generated. Open it from the toolbar to browse by name or thumbnail.

• Click a library screen to insert it into your project. If the screen already exists in the project, the canvas focuses on it instead of creating a duplicate.
• Drag a library screen onto the canvas to place it at a precise position.

Screens are automatically added to the library after AI generation, so your best work is always available for reuse.

Context menu

Right-click any screen on the canvas to access:

• Set as starting point
• Duplicate
• Rename
• Hide / Show
• Delete

Next steps

• Components & Styling -- Select components inside a screen and edit their properties.
• Interactions -- Wire up navigation links and action sequences between screens.
• Themes -- Apply consistent color and font tokens across screens.