iterel
/

Workspace

Design canvas

Create, refine, and critique high-fidelity interfaces with a full visual editor.

User-facing guide
Jump to first section

Opening the canvas

Click Design in the sidebar. The canvas is a freeform visual workspace where screens and components are laid out.

Canvas toolbar

A toolbar floats above the canvas with these controls:

  • Navigator (layers icon) — click to toggle the left panel showing pages and layer hierarchy
  • Assets (cube icon) — click to open the assets panel for images, icons, and uploads
  • Properties (settings icon) — click to toggle the right property panel
  • Code (code icon) — click to toggle the code panel showing generated HTML/CSS
  • Design System (system icon) — click to toggle the design system panel with tokens and components
  • Add Page (table split icon) — click to create a new screen
  • History (clock icon) — click to toggle the change history panel
  • Preview (eye icon) — click to enter preview mode. Disabled if no frames exist.
  • Browser Preview (launch icon) — click to open the design in a new browser tab
  • Build (run icon) — click to trigger the engineering pipeline. Only appears when the design is ready.

Keyboard shortcut

Press Ctrl+Enter (or Cmd+Enter on Mac) to toggle preview mode.

Left panel — pages and layers

The left panel has two resizable sections divided by a draggable bar:

Pages section

Lists all screens in your project. Click a screen name to select it and navigate to it on the canvas. Each entry shows an icon, name, and section count.

Layers section

A hierarchical tree of every element in the selected screen:

  • Click the expand arrow (triangle) to see child elements
  • Click a layer name to select that element on the canvas
  • Drag layers to reorder them in the hierarchy
  • Hover over a layer to reveal action icons: lock/unlock, show/hide, and delete

Selecting and editing elements

Click any element on the canvas to select it. A selection outline appears with resize handles. The property panel on the right updates to show that element's properties.

Smart guides

When dragging elements, alignment guides appear automatically to help you snap to other elements. Ruler guides can be added for precise positioning.

Property panel

The right panel shows detailed properties for the selected element in expandable sections:

Layout section

  • X and Y position — number inputs to set exact coordinates
  • Width (W) and Height (H) — number inputs for dimensions
  • Display dropdown — choose Flex, Block, Grid, or Inline
  • Direction dropdown — Row, Column, Row Reverse, or Column Reverse

Spacing section

  • Padding — four inputs for Top, Right, Bottom, Left
  • Margin — four inputs for Top, Right, Bottom, Left
  • Gap — number input for space between child elements

Typography section

  • Font dropdown — select from design system fonts or Google Fonts. Click the upload button inside the picker to add custom fonts.
  • Weight dropdown — Thin, Extra Light, Light, Regular, Medium, Semibold, Bold, Extra Bold, Black
  • Size input — font size in pixels. Use arrow keys to increment by 1, or hold Shift for increments of 10.
  • Line height — shows "Auto" or a numeric value
  • Letter spacing — in pixels or percentage
  • Alignment buttons — four buttons for left, center, right, and justify
  • Vertical alignment — three buttons for top, center, bottom
  • Advanced toggle (settings icon) — click to reveal additional controls:
    • Text decoration (none, underline, strikethrough)
    • Text transform (none, uppercase, lowercase, capitalize)
    • Font style (normal, italic)
    • Word spacing, text indent, white space, direction (LTR/RTL), writing mode
    • Text overflow (visible, clip, ellipsis)
    • List style (none, disc, circle, square, decimal)
  • Save as text style (save icon) — click to save the current typography settings as a reusable style

Fill section

  • Background color picker — click the swatch to open a color picker with hex input

Border section

  • Border width — number input in pixels
  • Border color — color picker
  • Border radius — number input for corner rounding. Supports per-corner control.

Effects section

  • Opacity slider — 0 to 100 percent
  • Shadow dropdown — None, Small, Medium, Large

Preview mode

Click the eye icon or press Ctrl+Enter to enter preview mode. The toolbar changes to show:

  • Device switcher — four buttons to preview at different sizes:
    • Mobile (375px)
    • Tablet (768px)
    • Desktop (1280px)
    • Responsive (100% width)
  • QR code button — click to show a QR code popover. Scan with your phone to view the prototype on a mobile device.
  • Browser preview — open in a new browser tab
  • Exit preview (eye-off icon) — return to canvas editing mode

Asset manager

Click the Assets button in the toolbar to open the assets panel. Click Upload to add new files. Assets are organized into folders:

  • Design Assets, Personas, Visual Examples, Logos, UI Screenshots, Uploads

For each asset: click to select it, hover to see Copy URL, Download, and Delete buttons. Use the search input to filter assets. Toggle between grid and list views.

Component editor

To edit a reusable component, double-click it on the canvas. The component editor overlay appears with:

  • Visual tab — preview the component in an iframe
  • Code tab — edit the HTML source directly
  • Save button — save changes (or press Cmd+S)
  • Cancel button — close without saving. Prompts if unsaved changes exist.
  • Press Escape to close.

Generating designs

Ask the Conductor or click the generate button to create screens based on your flows, creative direction, and strategy. The generator uses your color palette, typography, and component patterns.

Collaboration on the canvas

Pin comments directly on elements. Team members can see your cursor and selections in real time. See Collaboration and access.