The canvas editor
Frames, layers, the inspector, the tool dock and the element toolbar.
The canvas runs edge to edge; the tools float over it.
Top bar
The canvas name and its space, the save state, the canvas id, undo, redo and history, who is here (people as circles, agents as rounded squares), Connect agent, Import, export, Play for the prototype, and Share.
Layers
The left panel lists the canvas's pages and the layer tree of the current page. Frames sit at the top level; elements nest inside them. Hide or lock a layer, rename it, or drag frames between pages. The other tabs hold comments, activity and the canvas's design memory.
Inspector
Select something and the right column shows its properties:
- Position and Size (fill, hug or fixed, corner radius)
- Auto layout — direction, gap, padding and alignment for flex containers
- Fill, Stroke, Text and Effects
- Export
The Prototype tab wires interactions; the HTML tab shows the element's markup.
Tool dock
Select and hand; frame, rectangle, ellipse, pen, text and image; comment; Ask AI (⌘I); and zoom.
Element toolbar
Select an element on a frame and a dark toolbar appears above it: the element's tag first, then Ask AI, Comment, Edit text, the code view and more. Ask AI sends that exact element to the Floo Agent as the task's scope.