Draw it, then refine it.
An infinite canvas where every frame is real DOM. Sketch by hand, lay out like CSS, keep everything editable.
Ten tools, one key each.
Move
V select, drag, resize
Hand
H or hold Space
Frame
F artboards and frames
Rectangle
R
Ellipse
O
Text
T every Google Font
Pencil
P freehand to SVG
Comment
C pinned to layers
Image
CtrlShiftK or drag in
Shaders
Layout like CSS, because it is.
Every control maps to a CSS property. When a control isn't enough, edit the CSS directly.
- Fixed, hug or fillSizing that behaves like the browser.
- Free or flexAbsolute children, or column, row and wrap with gap, padding and alignment.
- Fills, borders, radius, shadowsPlus every Google Font and your local fonts.
Layers that respect depth.
Click selects the top level, Ctrl-click reaches inside, double-click drills one level deeper.
- Drag to reorderIn the layers panel, or drag flex children on the canvas.
- Rename, hide, lockAnd pages with dividers to group them.
- MeasureHold Alt and hover to see distances.
--ink#111111--fold#8C8C8C--paper#FFFFFF--space-416px
Tokens, used live.
Design tokens are CSS variables shared across the file. Change one and every layer that uses it updates. Agents can create a token set and restyle a design with it.
Comments, for people and agents.
Pin threads to layers, reply, resolve and reopen. Agents can read open threads and resolve the ones they've handled.
Undo, per person.
Agent edits never land in your history. Your CtrlZ undoes your work, and the Agents panel undoes an agent's last change.
- PNG
- JPG
- WebP
- SVG
Export anything.
Images, vectors and PDFs, or several artboards in one combined PDF. Files land in ~/Downloads/OpenPaper.
- ExportCtrlShiftE
- Copy as PNGCtrlShiftC
Ready to draw?
Free, open source, and it runs on your machine.