Productivity · Design canvas

Figma-style app

Illustrative system design for a design canvas app like Figma: 6 topics to read, from requirements to deep dives.

Every keystroke is a write.

Illustrative design, not Figma’s actual implementation. Arrowbox is not affiliated with Figma’s owner. Disclaimer

Canvas

Infinite canvasAdvanced · 46 min read · Sign in to read
Pan and zoom a board of thousands of shapes at 60 fps: the camera transform, culling, hit testing.
Layers panelIntermediate · 46 min read · Sign in to read
The canvas as a tree: one shared selection, row order as paint order, drag to reorder, hide and lock.

Select, move and resizeAdvanced · 46 min read · Sign in to read
Click, Shift and marquee select, then drag, resize and nudge with snapping and exact X, Y, W, H fields.
Undo and redoIntermediate · 46 min read · Sign in to read
One Ctrl+Z, one action: property diffs, a drag as one step, selection restored, collaborators left alone.

Live cursorsAdvanced · 46 min read · Sign in to read
Collaborators' cursors, selections and follow mode: throttled sends, batched fan-out, smooth playback.
Multiplayer editingAdvanced · 45 min read · Sign in to read
Two people edit one shape: optimistic changes, per-property last-writer-wins, safe reparenting, offline replay.