1. Executive Summary & Scale Metrics
Before Figma, professional UI design was dominated by heavy native desktop applications (Sketch, Adobe Illustrator). Industry consensus held that complex vector graphics and typography were impossible to run performantly inside a web browser.
Collaborative Graphics Engine Performance
FigmaVector rendering benchmarks and multiplayer sync SLAs
Figma succeeded by breaking all the conventional rules of web development: they bypassed the HTML DOM and CSS engine entirely, compiling a custom C++ graphics engine into WebAssembly that talks directly to the GPU via WebGL, while implementing a deterministic, lock-free multiplayer synchronization model.
2. First-Principles Capacity Estimation & Physical Constraints
┌─────────────────────────────────────────────────────────────────────────────┐
│ FRAME BUDGET & MULTIPLAYER MATH │
├─────────────────────────┬─────────────────────────┬─────────────────────────┤
│ Dimension │ Production Formula │ Derived Value │
├─────────────────────────┼─────────────────────────┼─────────────────────────┤
│ 60fps Frame Budget │ 1000ms / 60 frames │ 16.66 ms / frame max │
│ 120fps ProMotion Budget │ 1000ms / 120 frames │ 8.33 ms / frame max │
│ DOM Reflow on 50k Nodes │ O(N log N) layout pass │ ~ 450 ms (Severe freeze)│
│ WebGL Instanced Render │ Single GPU Draw Call │ ~ 2.8 ms (60fps safe) │
│ Full State Broadcast │ 20 MB doc × 60 Hz drag │ ~ 1.20 GB/s Network │
│ Delta Binary Mutation │ 80 Bytes × 60 Hz drag │ ~ 4.80 KB/s Network │
└─────────────────────────┴─────────────────────────┴─────────────────────────┘Mathematical Derivations
-
The 16.66ms Frame Budget Breakdown:
Available Frame Time = (1000 ms) / (60 fps) = 16.66 ms- Input Handling & Hit Testing:
≈ 1.5 ms - WASM Scene Graph Mutation:
≈ 1.8 ms - GPU Vertex Buffer Update & Shader Rasterization:
≈ 3.2 ms - Compositing:
≈ 1.0 ms
- Input Handling & Hit Testing:
3. The Naive Design & Why It Collapses
NAIVE ARCHITECTURE: REACT / HTML DOM & FULL STATE SYNC
[Alice Browser (React / SVG DOM)] ── WebSocket ──┐
<svg> ▼
<rect id="r1" x="100" y="200" /> [Node.js Server]
<rect id="r2" ... /> (10,000 nodes) │
</svg> ▼
[MongoDB / Postgres]
Document: {layers: [...]}Why Traditional DOM & Relational Array Architectures Collapse
FigmaThree fatal barriers preventing desktop-grade performance inside web browsers
Browser DOM & SVG Reflow Bottlenecks
criticalRendering 50,000 vector shapes as HTML <svg> or <div> tags overwhelms the browser's layout recalculation engine, dropping framerates below 5fps during panning and zooming.
Integer Array Index Race Conditions
criticalIf layers are stored in a standard integer array [LayerA, LayerB, LayerC], and Alice inserts at index 1 while Bob simultaneously moves LayerC to index 1, array indices desynchronize and corrupt the document hierarchy.
Full-State Network Broadcast Saturation
highBroadcasting full document JSON trees over WebSockets on every mouse drag consumes gigabytes of network bandwidth per minute and melts JSON serialization threads.
4. Deep Architecture: Layer-by-Layer Walkthrough
Figma uses a Thick-Client Architecture where the client does 99% of the computational work.