Clearly canvas manual
The Clearly canvas is a fast, Figma-style design surface for people — draw frames, text, shapes and vectors, style them, and export print-ready art. This manual covers every tool by hand. (Driving the same canvas from an agent? See the Canvas API.)
The interface
Three surfaces around an infinite canvas. Everything you make lives in a composition — open or create one from your workspace at /recents.
The toolbar
A row of tool chips along the bottom of the canvas. Click one, or press its key.
Left to right: Move (V), Frame (F), Shape (R), Pen (P), Text (T), and Comment (C). The chevron beside Frame, Shape and Pen opens that tool’s variants (Ellipse, Line, Arrow, Pencil, and so on). The ✦ chip opens the AI assistant — a separate surface from the design tools.
The right inspector — the “Design” tab
Everything about the current selection: position, fill, text, effects — and the export bar at the bottom.
Select something and the right panel fills in with just the sections that apply — Position, Fill, Stroke, Text, Auto layout, Effects, Inspect, and more. With nothing selected it shows the active tool’s defaults (the color a new shape will use, the font a new text box will take). The pinned bar at the very bottom is export.
The left panel
Your composition’s structure and its source material.
The File tab holds Pages and a live Layers list; the Sources tab holds the images, logos, links and notes the assistant can draw from. The rabbit at the top opens the editor menu (File / Edit / View / Object / Text / Arrange / Vector / Version history / Account). Share and live collaborator avatars sit above the right panel.
Your first composition
A two-minute path from empty canvas to exported art.
- Open your workspace at
/recentsand create or open a composition. - Press F and click to drop a frame — or drag to size one. A selected frame shows device-size presets in the inspector.
- Press T and click to add text; press R and drag for a rectangle.
- Select a layer and style it in the inspector — fill, stroke, corner radius, shadow, blur.
- Press ⇧ 1 to fit everything on screen, then use the export bar to download PNG, SVG or PDF.
Move around the canvas the way you’d expect: two-finger scroll (or a middle-button drag, or Space+drag) to pan, ⌘+scroll or pinch to zoom. ⇧ 1 fits the page, ⇧ 2 zooms to your selection, ⇧ 0 returns to 100%.
The manual
Nine chapters, each a focused reference. Start with tools & shortcuts.
Tools & keyboard shortcuts
Every tool in the toolbar, and the full keyboard shortcut reference.
Frames, artboards & pages
Screen and print frames, presets, clipping, constraints, and pages.
Text & typography
The text tool, the type inspector, variable fonts, and saved text styles.
Shapes, pen & vector editing
Shapes, the pen and pencil, editing points, booleans, and strokes.
Color, fills & effects
Fills, the color picker, saved color styles, strokes, shadow, blur, and blend.
Auto layout, align & arrange
Auto layout, alignment, distribution, constraints, and z-order.
Components & variants
Turn a design into a reusable component, then swap variants and override text.
Prototyping & present
Wire click-through interactions and play a flow full-screen.
Export, inspect & print
Copy CSS, export PNG/SVG/PDF, and set up bleed, marks, and cut lines for print.