Figma — Detailed

flowchart TB
  subgraph Clients
    APP([Figma client - WebGL])
    PRES[Presence + cursors]
  end

  subgraph Edge
    LB
    WS[WebSocket gateway]
  end

  subgraph Engine[Multiplayer engine]
    SVR[Per-file server<br/>single owner]
    CRDT[Custom CRDT-ish merge<br/>object tree + properties]
    OPS[[Op stream]]
    SNAP[Snapshots]
    PRES_SVC[[Presence pub/sub]]
  end

  subgraph Storage
    OBJ[(Object tree per file)]
    HIST[(Version history)]
    ASSET[(Image assets + S3 + CDN)]
    FONTS[Fonts service]
    THUMB[Thumbnail renderer]
  end

  subgraph Features
    COMM[Comments]
    PLUG[Plugins / Widgets]
    LIB[Components / styles libraries]
    DEV[Dev mode + inspect]
    PROTO[Prototyping]
  end

  subgraph Share
    PERM[Permissions / teams / projects]
    AUTH[SSO / SCIM]
  end

  Clients --> Edge --> Engine
  Engine --> Storage
  Features --- Engine
  Share --- Storage

    classDef client fill:#dbeafe,stroke:#1e40af,stroke-width:1px,color:#0f172a;
    classDef edge fill:#cffafe,stroke:#0e7490,stroke-width:1px,color:#0f172a;
    classDef service fill:#fef3c7,stroke:#92400e,stroke-width:1px,color:#0f172a;
    classDef datastore fill:#fee2e2,stroke:#991b1b,stroke-width:1px,color:#0f172a;
    classDef cache fill:#fed7aa,stroke:#9a3412,stroke-width:1px,color:#0f172a;
    classDef queue fill:#ede9fe,stroke:#5b21b6,stroke-width:1px,color:#0f172a;
    classDef compute fill:#d1fae5,stroke:#065f46,stroke-width:1px,color:#0f172a;
    classDef storage fill:#e5e7eb,stroke:#374151,stroke-width:1px,color:#0f172a;
    classDef external fill:#fce7f3,stroke:#9d174d,stroke-width:1px,color:#0f172a;
    classDef obs fill:#f3e8ff,stroke:#6b21a8,stroke-width:1px,color:#0f172a;
    class APP client;
    class WS edge;
    class PRES,SVR,CRDT,SNAP,FONTS,THUMB,COMM,PLUG,LIB,DEV,PROTO,PERM,AUTH service;
    class HIST datastore;
    class OPS,PRES_SVC queue;
    class OBJ,ASSET storage;

Per-file owner

• File "lives" on one process at a time → linearizes mutations.
• Migrations between hosts via op-log replay.
• Designed for tens of editors per file.

Asset handling

• Images stored in S3 + CDN.
• Vector geometry lives in the in-memory object tree synced via ops.

Glossary & fundamentals

Concepts referenced in this design. Each row links to its canonical page; the tag column shows whether it is a high-level (HLD) or low-level (LLD) concept.

Tag	Concept	What it is	Page
HLD	CDN	edge caching for static assets	cdn
HLD	Pub/Sub & message brokers	topics, consumer groups, delivery semantics	pub-sub-pattern
HLD	CRDTs	commutative replicated data types	crdts
HLD	Realtime protocols	WS / SSE / polling / gRPC streaming	realtime-protocols