Designer Tour

The Designer is where sketches become screens. Draw a screen the way you'd sketch it on paper, structure it into a real layout, read the page it produces, and run it — all inside one document. Multi-screen artboards hold a whole product's worth of designs side by side; layers keep every screen editable; and four modes carry a single design from first ink stroke to live, interactive page.

That progression is the point. In most tools a mockup is a dead end — you redraw it somewhere else to make it real. Here the drawing, the structure, the code view, and the running preview are the same document, so you (and the AI working alongside you) can move between "what should this look like?" and "does this actually work?" without ever exporting anything.

And the same document works at the code level. Ask your coding assistant to generate a page and it lands on the canvas as a real, editable design. Double-click any HTML object and its editor opens — the element's source highlighted and ready to edit, with tabs for the code, its CSS, and style properties — or restyle it by dragging elements in from the palette:

Four modes, one design

The centre of the top toolbar is the mode switcher — a segment control that changes what the whole canvas is for (it collapses to icons only when the window is narrow):

• Design — Design draws and edits. The full drawing toolset is live: pens, shapes, fill, text, icons.
• Layout — Layout adds structure to your freeform vector design — think of it as a slice mode. Mark out the rows, columns, and regions so the page generates its rows, cols, and divs correctly.
• HTML — HTML decides what each slice becomes in the final page: real HTML, an image, or SVG.
• Preview — Preview shows the result — the generated page, live and interactive, with the toolbar out of the way.

A tour of the controls

Shortcuts below use Cmd — that's Ctrl on Windows and Linux.

Top toolbar

• Add new screen — opens the New Screen dialog; the new screen arrives centred and fitted in the viewport.
• Undo / Redo — step the design history backwards and forwards. ⌘Z / ⌘⇧Z
• Export as SVG — exports the design as an SVG file.
• / Light / dark panels — flips the Designer's own panels and chrome between light and dark, independent of the rest of the studio.
• Save — saves the design; the button tints amber while there are unsaved changes. ⌘S
• Full screen — enters focus mode, hiding the app header and tabs; this toolbar stays with you in full screen, and the same button () brings the chrome back. ⌘⇧⏎

Screens, Layers, Style — the right dock

A floating tab strip at the top right switches the panel stack:

• Screens — the list of screens in this design. Select one to work on it.
• Layers — the layer stack for the selected screen (pick a screen first — the tab stays disabled until you do).
• Style — style and effects for the current selection; available in Layout mode, when strokes are selected, or while the text tool is active.
• Hide panel — collapses the whole dock; a slim Show panel tab stays pinned to the edge to bring it back.
• Show elements panel — in Layout and HTML modes, re-expands the collapsed element tree.

The left tool rail

Every drawing tool lives on the rail at the left edge of the canvas — in the Designer it usually appears as a two-column grid, the full kit laid out at once (a compact single column is available via the layout button at the rail's foot). Buttons with a small corner triangle hold a flyout of variants — press and hold, right-click, double-click, or tap the tool while it's already active to open it; a plain tap just switches tools.

Pointers and selection

• Object Pointer — select and move whole objects.
• Vertex Pointer — edit the individual vertices of strokes and shapes.
• HTML Pointer — interact with converted HTML content directly on the canvas.
• Rectangle Select — drag a marquee around what you want.
• Lasso Select — circle it freehand instead; its flyout also holds Brush Select for painting a selection.
• Hand — pan the canvas (highlights amber while you hold Cmd/Ctrl for a temporary pan).

Drawing

• Pen — pressure- and speed-responsive freehand ink.
• Marker — a constant-width felt tip.
• Highlighter — wide translucent strokes.
• Smooth — redraws a wobbly stroke as a clean curve.
• Shape Recognizer — freehand strokes snap to the shape you meant.
• Write (a typewriter-key glyph) — the handwriting pen: ink becomes editable text.
• Rectangle — hold Shift for a square; its flyout has a from-centre variant.
• Circle — with a from-centre variant in its flyout.
• Polygon (a segmented-line glyph) — straight segments with square vertex handles.
• Eraser — remove strokes.

Content and colour

• Text — place text on the canvas.
• Icons — stamp icons; selecting it opens the icon picker in the sidebar.
• Fill — flyout: No Fill, Solid Fill (a Fill Color panel with preset swatches, a custom colour, and an opacity slider), and Gradient Fill (the gradient editor).
• AI Generate — drag out an area and describe what you want; it generates an image or HTML from your brief right into that spot. (Converting an existing selection to an image is the Sketch to AI button on the selection toolbar.)
• Replicator / Spiral / Gear — a shared creative slot showing whichever you used last: Replicator repeats a selection in patterns, Spiral draws a spiral — an ideal ready-made path for text-on-path effects, Gear generates gear shapes. Long-press to switch; each opens its own panel in the sidebar.
• Size (a dot that grows with your stroke width) — opens the thickness slider with a live preview and type-in value; applies to selected strokes when there's a selection.
• Color (a swatch in your current ink colour) — nine presets plus a custom colour input; applies to selected strokes when there's a selection.

Board and housekeeping

• Ruler — a straight edge to draw along: pen strokes ride its edge for perfectly straight lines and perspective work.
• Paper — one tap toggles the paper background; hold or double-tap for options: Lined , Grid , Squared , line spacing (S / M / L), paper background colour, and line colour.
• Undo / Redo.
• Lock drawings — freeze the ink so stray touches can't move it.
• Clear all drawings — asks for confirmation, then clears every stroke on the canvas.
• Fewer tools — folds the grid down to the compact column (and back via ).

The pen tray

In Design mode a tray of pictorial drawing implements sits tucked at the bottom edge of the canvas — just the nibs peek up. Hover over it, or swipe it upward, and it rises. Each implement remembers its own ink colour and size, so switching pens switches your whole setup. Tap the active implement a second time to open its presets shelf.

• Pen — freehand ink with pressure- and speed-sensitive line width.
• Pencil — a graphite preset of the pen: soft grey, natural width variation.
• Ballpoint — constant-width ink in ballpoint blue.
• Marker — a felt tip: constant width, gently translucent.
• Highlighter — wide translucent strokes; overlapping passes build up like real highlighter.
• Shape — freehand strokes snap to recognised shapes. Shelf: Auto, Rect, Oval, Circle, Poly.
• Write — handwriting becomes editable text. Shelf: Auto OCR (write by hand, it converts when you pause) or Type (a text cursor where you tap).
• Eraser — removes whole strokes with a touch.
• Arrow — drag a straight connector; the shelf offers eight end caps, from a bare line to arrowheads, dots, diamonds, and bars.
• Select — selection as an implement; shelf: Lasso, Rect, Brush.

The top-centre capsule

While you draw, a floating capsule at the top centre shows the properties that matter for the tool in your hand (it slides aside to clear the rulers and other toolbars):

• Colour — a round swatch in your current ink; opens a popover of twelve curated colours plus a custom picker.
• Size — a slider with a live nib preview for quick width tweaks.
• Opacity — appears for the marker and highlighter.
• Font — for the text tool and the Write pen: recent fonts, curated presets each previewed in its own face, and a More fonts… row that opens the full catalogue. The text tool adds a − / + size stepper.
• Snap — vertex snapping while you edit stroke vertices or draw fixed shapes; green when on.

Bottom-left: zoom

• Zoom In / Zoom Out — zoom about the viewport centre.
• 1:1 — a text button that jumps to exactly 100%; with a screen selected it centres that screen at true pixel size.

Keyboard

Right-click any selection on the canvas for the full edit menu, with its own shortcuts alongside each action:

The same menu is where a design starts becoming a page: Convert to HTML, Convert to SVG, and Convert to Image turn selected strokes into real content, and Edit Strokes brings converted content back to editable ink.

Works with the rest of the studio

The Designer is one surface of Circuitry, and its output feeds everything else:

• The Designer — the deeper guide to screens, layers, and modes.
• Web Design — taking a design all the way to a working web page.
• Sketch to Diagram — how ink becomes structured objects everywhere in the studio.
• The Smart Whiteboard — the free-form thinking canvas next door; the same pens live there too.
• Sharing & Live Collaboration — share a design with a link or design together live.