How Figma's Multiplayer Works

Open a Figma file with your team and you see everyone's cursors moving, shapes changing and text updating live. It feels simple. Building it was one of the hardest bets Figma made: real-time collaboration on complex design files, in a web browser.

Figma's engineers explained how it works in a well-known post, "How Figma's multiplayer technology works." This guide breaks it down with diagrams.

🎯 Quick Answer (30-Second Read)

  • Client-server, not peer-to-peer: every browser connects to a Figma server over WebSockets, with one server process per open document.
  • No operational transforms (OT): Figma found OT (used by Google Docs) too complex for its needs.
  • CRDT-inspired, but not a true CRDT: the server is the single source of truth.
  • Last writer wins per property: two people changing different properties never conflict. Same property → the last value the server receives wins.
  • Fractional indexing orders layers, and offline edits are reapplied when you reconnect.

The Architecture

flowchart LR subgraph Clients A["🖥️ Designer A
(browser)"] B["🖥️ Designer B
(browser)"] C["🖥️ Viewer C
(browser)"] end A <-->|WebSocket| S B <-->|WebSocket| S C <-->|WebSocket| S S["Multiplayer server
one process per document
(source of truth)"] --> ST[("Document storage
(checkpoints)")] WEB["Web app / API"] --> PG[("Postgres
comments, users, teams")]

When you open a file, your browser downloads a copy of the document, then stays connected over a WebSocket to sync changes both ways. Only the document itself goes through this system. Comments, users and teams live in Postgres and sync separately.

The Document Is a Tree of Properties

Figma models a document like a web page's DOM: a tree of objects (frames, shapes, text), each with properties. Conceptually:

Map>

So "Rectangle 7's fill is blue" is one tiny piece of data. Collaboration becomes a question of syncing individual property values, which is much easier than syncing a whole document.

Why Figma Didn't Use Operational Transforms

Operational Transforms (OT)
Rewrites each edit against concurrent edits so all copies converge. Great for text, but the number of edit combinations explodes and it's notoriously hard to get right.
Figma's approach
Borrowed ideas from CRDTs (data structures that merge automatically), simplified because a central server decides the final order.

Because a server sees every change in order, Figma didn't need the extra machinery that peer-to-peer CRDTs require. Simpler means faster and easier to debug.

Conflicts: Last Writer Wins, Per Property

sequenceDiagram participant A as Designer A participant S as Server participant B as Designer B A->>S: Rect 7: color = red B->>S: Rect 7: width = 200 Note over S: Different properties → both kept S-->>A: width = 200 S-->>B: color = red A->>S: Rect 7: color = blue B->>S: Rect 7: color = green Note over S: Same property → last received wins (green) S-->>A: color = green S-->>B: color = green
  • Different properties: no conflict at all. Both changes apply.
  • Same property: the server keeps the last value it received, and everyone converges on it.
  • Text is treated as one property value, so two simultaneous edits to the same text box end with one version or the other, never a garbled mix.

No flicker: your own changes appear instantly on your screen. If a server update arrives for a property you've changed but the server hasn't confirmed yet, your browser ignores it, so your edit doesn't flash back and forth.

Ordering Layers: Fractional Indexing

How do you insert a layer between two others without renumbering everything? Figma gives each child a position between 0 and 1.

Layer Position
Background 0.2
New layer inserted 0.3 (average of 0.2 and 0.4)
Logo 0.4
Button 0.8

Inserting just means picking a number between two neighbours. Only the new layer changes, so concurrent inserts rarely collide.

Moving Objects Between Groups

Each object stores its parent as a property. Parent and position are saved as one property, so a move is atomic. The tricky case: two people simultaneously drag group A into B and B into A, creating a loop. The server rejects any change that would create a cycle. Until it decides, the affected objects are hidden briefly on the client.

Working Offline

How it works: Figma lets you keep editing offline. When you reconnect, the client downloads a fresh copy of the document and reapplies your offline edits on top. New objects created offline get IDs that include a per-client identifier, so they never clash with objects made by others.

Lessons for Builders

  • Use the simplest sync model that fits your data. A central server makes many hard problems easy.
  • Break data into small independent pieces (properties) so most edits never conflict.
  • Apply local edits instantly and reconcile in the background.
  • Let the server be the referee for rare but dangerous cases, like cycles.

Frequently Asked Questions

Does Figma use CRDTs?

Figma's multiplayer system was inspired by CRDTs, but Figma says it isn't using true CRDTs. Because a central server is the authority for each document, Figma could simplify the approach, using per-property last-writer-wins instead of fully decentralised merge logic.

How does Figma handle two people editing the same thing?

If they change different properties, both changes are kept. If they change the same property, such as the colour of one shape, the last value the server receives wins and all clients converge to it. Text in a single box is replaced as a whole value.

How does Figma sync changes in real time?

Each browser downloads a copy of the document and keeps a WebSocket connection to a multiplayer server, which runs a separate process per document. Clients send property changes to the server, which applies them and broadcasts them to everyone else viewing the file.

Conclusion

Figma's multiplayer works because it chose simplicity: a central server per document, a document made of small properties, last-writer-wins per property, fractional positions for ordering, and a server-side referee for edge cases. That design let a browser app deliver collaboration that felt magical to designers.

Sources

Last verified: 14 October 2026.

Related reads: WhatsApp System Design · Why Tech Companies Build the Same Features · Consistent Hashing Explained

I write about system design and how real products are built. Follow on LinkedIn or X, or invite me to speak.