← Teardowns

How Figma's Multiplayer Engine Actually Works (And Why You Can't Clone It)

Figma's multiplayer sync isn't just WebSockets — it's a custom CRDT-like engine, a C++ core compiled to WASM, and years of tuning. Here's why cloning it is a trap.

The demo everyone copies, the engine nobody does

Every Figma clone built in a weekend hackathon looks the same: a canvas, some shapes, a WebSocket connection, and two cursors moving around proving 'real-time collaboration.' It's an impressive demo. It is also roughly 2% of what Figma actually built. The cursor-sync part is the easy part — broadcast an (x, y) over a socket at 30fps and you've got something that looks like Figma in a GIF.

The hard part, the part that took Figma's engineering team years and multiple rewrites, is making sure that when two people are simultaneously resizing the same frame, nudging the same vector point, and pasting a 400-layer component tree into the same page — the document converges to the same correct state on every client, with no central server doing the heavy lifting on every keystroke, and no perceptible lag. That's not a WebSocket problem. That's a distributed systems problem wearing a design-tool costume.

It's not operational transform — it's a custom CRDT-ish object sync

A lot of people assume Figma uses classic Operational Transform (OT), the algorithm Google Docs popularized for collaborative text. OT works by transforming each incoming operation against concurrent operations so intent is preserved — great for a linear sequence of characters, brutal to generalize to a tree of nested vector shapes, constraints, auto-layout rules, and component instances with overrides.

Figma instead built something closer to a Conflict-free Replicated Data Type (CRDT) system, tailored to their own document model. Every object in a Figma file — a rectangle, a text node, a component property — has a unique ID and a set of fields. Changes are represented as property-level updates, not as a replayed operation log. When two clients edit different properties of the same object, or even the same property, there's a deterministic merge rule (often last-writer-wins per field, with logical clocks to order concurrent writes) so every client arrives at an identical state without needing to agree on a single source of truth in real time.

This matters because it sidesteps the nastiest part of OT: transforming arbitrary structural operations (insert node, reparent node, delete subtree) against each other in a tree is combinatorially ugly. Figma's model trades some theoretical elegance for something that actually ships: flat, mergeable property updates on a graph of objects, synced through a central multiplayer server that's less an authority and more a fast relay with persistence.

The server's job: fan-out, persistence, and tie-breaking — not computation

Figma's multiplayer server (written originally in C++, their whole stack leans unusually native for a web product) doesn't recompute your design. It receives small binary diffs from a client, assigns them an order, persists them, and fans them out to every other connected client editing that file. The actual rendering, hit-testing, constraint-solving, and layout math happens client-side, because pushing that to a server for every mouse-move would be a latency and cost disaster at Figma's scale.

This client-heavy, server-light architecture is why Figma feels instant even on average Wi-Fi: your own edits render optimistically the instant you make them, and the sync layer just needs to make sure everyone else's view converges shortly after. The server's real job is boring but critical — ordering, durability, and reconnection logic (what happens when your laptop sleeps for ten minutes mid-edit and wakes up to a document that's moved on without you).

Why the canvas itself is a harder problem than the sync

People fixate on 'real-time sync' as the moat, but Figma's actual engineering flex is the rendering engine underneath it: a custom C++ graphics engine compiled to WebAssembly, running a tile-based rendering pipeline in the browser that handles tens of thousands of vector objects without dying. That engine has to do constraint resolution, auto-layout, boolean operations, text shaping, and component-instance override resolution — and do it fast enough that multiplayer sync doesn't feel like it's fighting the renderer.

This is the part most clone attempts completely skip. You can fake multiplayer with Yjs or Liveblocks in an afternoon. You cannot fake a WASM-compiled vector rendering engine with custom memory management and a bespoke scene graph in an afternoon, a month, or honestly a small team's first year. The sync layer and the rendering layer are deeply coupled — Figma didn't bolt collaboration onto a design tool, they built both as one system from day one, which is a decision that's nearly impossible to retrofit.

What's actually cloneable (and what isn't)

Let's be honest about what AI coding tools and modern libraries have made trivially cloneable versus what remains genuinely hard. Basic real-time cursors and presence? Cloneable in an hour with Liveblocks, PartyKit, or Supabase Realtime. A shared canvas where shapes move and sync via CRDT? Cloneable in days using Yjs or Automerge plus a canvas library like Konva or Fabric.js — this is now boilerplate, not innovation.

What remains hard: a performant custom rendering engine for thousands of nested, constrained vector objects; a document model that supports components, variants, and instance overrides without the sync layer breaking semantically; conflict resolution rules that feel 'correct' to a designer's intuition even in edge cases (what happens when someone deletes a frame while someone else is resizing a child inside it?); and the years of production battle-testing against real concurrent-edit bug reports that no greenfield rebuild has faced yet.

  • Cloneable fast: presence/cursors, basic shape sync, chat-like comments
  • Cloneable with effort: CRDT-based property sync, undo/redo across multiple users
  • Hard to clone: a from-scratch high-performance vector rendering engine
  • Nearly impossible to clone: years of edge-case hardening on concurrent structural edits (reparenting, deletion races, component instance conflicts)

Where the real moat is — and it's barely technical

Here's the uncomfortable truth for anyone sizing up Figma as a cloneable target: even if you built a technically equivalent multiplayer canvas engine, you still wouldn't have a business. Figma's actual moat isn't the CRDT sync layer — it's the plugin ecosystem (thousands of plugins deeply embedded in design team workflows), the dev-handoff integrations wired into every major engineering org's pipeline, the Figma-to-code and design-system tooling that enterprises have built internal processes around, and the sheer organizational switching cost of re-training every designer and re-linking every integration.

This is exactly the gap oneprompt is built to measure: technical cloneability on one axis, business moat on the other. Figma scores moderate-to-hard on technical cloneability (the sync is replicable with modern tools, the rendering engine is genuinely hard, call it a 6/10 difficulty) but scores brutally high on business moat — network effects from shared files across entire organizations, deep integrations into dev and product workflows, and enterprise contracts that don't move because a startup shipped a prettier canvas.

If you're evaluating a 'Figma for X' idea, don't ask 'can I build the multiplayer canvas.' You probably can, with Yjs and a lot of patience on the rendering side. Ask instead: once I build it, why would a team of 40 designers who've spent three years wiring Figma into their entire design-to-dev pipeline switch to me? If you don't have a sharp answer to that, you've cloned the tech and skipped the business — which is the single most common failure mode oneprompt flags.

Want the same teardown for any site?

Analyze a site →