← Teardowns

How Figma Is Actually Built: The Multiplayer Canvas Is the Real Moat

A deep look at Figma's real-time engine, CRDTs, and rendering pipeline — and why the multiplayer canvas, not the UI, is the moat clones can't touch.

Everyone clones the UI. Nobody clones the engine.

If you ask an AI coding tool to 'build me a Figma clone,' you'll get a canvas, some rectangles, a layers panel, maybe even a color picker in an afternoon. That's the part everyone sees, and it's also the least valuable part of Figma. The UI chrome is a commodity — React components, SVG icons, a toolbar. What you won't get in an afternoon, or a year, is the thing that actually makes Figma Figma: a real-time, conflict-free, multi-user document engine running at 60fps in a browser, synced across devices, with undo history that behaves sanely when five people are editing the same frame at once.

This is the core distinction oneprompt exists to draw out: technical cloneability versus business moat. A landing page builder or a note-taking app might score high on cloneability and low on moat — easy to rebuild, easy to leave. Figma inverts that. The surface is copyable. The substrate — the multiplayer canvas — is a genuinely hard distributed-systems problem that took Figma's founding engineers years to get right, and it's the reason competitors with more funding and more designers still ship worse collaboration.

What's actually running under the canvas

Figma doesn't render your design with the DOM or standard Canvas 2D API calls the way a typical web app would. It ships a custom C++ rendering engine compiled to WebAssembly, using WebGL for GPU-accelerated drawing. This is why panning and zooming across a 10,000-object file feels like a native app instead of a laggy webpage — Figma is essentially building its own mini game engine and cross-compiling it to run in Chrome. That's not a weekend architecture decision; it's a multi-year bet on WASM before most companies trusted it in production.

On top of the renderer sits the document model: a tree of nodes (frames, vectors, text, components) that every client holds a local copy of. Every keystroke, drag, and resize is a mutation to that tree. The entire product experience — instant feedback, no spinners, no 'saving...' — depends on that local-first model being fast and always eventually consistent with everyone else's copy. Get this wrong and you get Google-Docs-style lag or, worse, silent divergence where two people think they're looking at the same file but aren't.

The multiplayer problem: it's not WebSockets, it's conflict resolution

Sending cursor positions over a WebSocket is trivial — every hackathon Figma clone nails that in an hour. The hard part is: what happens when two people edit the same shape's width property at the same second, on different network latencies, and then someone goes offline and reconnects with local changes? You need operational transforms or CRDT-like merge logic that guarantees every client converges to the same final state without a central lock, without 'refresh to see the latest version,' and without corrupting the file.

Figma built a custom multiplayer server architecture for this rather than bolting on an off-the-shelf CRDT library, because generic CRDTs don't understand design-specific semantics — reordering layers, resizing constraints, component overrides, auto-layout reflow. Each of those needs its own conflict resolution rules. This is the part that's genuinely hard to clone: it's not one clever algorithm, it's hundreds of small, correct decisions about what 'the right merged state' means for every property type in a design file, tested against years of production edge cases from millions of real documents.

Why an AI coding tool can clone the shell but not the moat

This is exactly the split oneprompt scores for. Ask an AI tool to build a Figma-like app and it will happily generate: a canvas, drag-to-resize, a component library UI, maybe even basic cursor presence via a Supabase or Firebase realtime channel. That gets you a demo. It will not get you a system that holds up when 40 designers are simultaneously editing a 50MB file with nested components, auto-layout, and version history, without eventually corrupting or lagging into uselessness.

The gap isn't lines of code, it's operational maturity: years of bug reports about weird merge conflicts, a custom binary sync protocol, careful memory management in WASM to avoid browser tab crashes, and a rendering pipeline tuned against real-world files with tens of thousands of nodes. Cloneability, in the oneprompt sense, asks 'could a prompt reproduce this system's function.' For the login flow and the toolbar UI, yes, easily. For the collaborative core, no — not because the code is secret, but because the correctness only reveals itself under production load and adversarial editing patterns you can't fully anticipate in a prompt session.

Where the actual business moat lives (hint: it's not the code)

Figma's moat isn't purely technical, and it's worth separating the two axes cleanly. The technical moat is the multiplayer engine and renderer — hard to build, but eventually replicable by a well-funded competitor (Adobe tried, Canva is trying, Penpot is open-source proof it's at least partially reproducible). The bigger, more durable moat is the network effect layered on top: design systems, shared component libraries, plugin ecosystems, and the fact that once a whole org's design tokens, handoff workflow, and dev-mode integrations live inside Figma, switching costs are enormous — not because the file format is proprietary, but because the workflow is embedded in how designers and engineers actually collaborate day to day.

This is the pattern oneprompt flags again and again: strong technical moats decay as tooling catches up (WASM, CRDTs, and WebGL are all more accessible now than when Figma started in 2016), but workflow lock-in and network effects compound. A cloned canvas with zero existing teams, zero plugin ecosystem, and zero design-system migrations behind it is a toy, even if the rendering is pixel-perfect.

The tell: what a real clone attempt would actually need

If you wanted to seriously compete with Figma rather than demo a lookalike, the checklist looks like this: a WASM/WebGL renderer tuned for large node trees, a custom sync protocol with per-property conflict resolution (not just last-write-wins), offline support with local-first storage and later reconciliation, a plugin API stable enough that third parties build businesses on it, and enough enterprise trust (SSO, audit logs, SOC 2) that a design org will actually migrate years of files over. Each of those is a multi-quarter engineering investment on its own, and skipping any one of them is exactly how 'Figma clones' end up as impressive demos that die the moment two real users edit the same frame at once.

That's the honest read: yes, an AI tool can scaffold something that looks like Figma in a day. No, that scaffold is not a threat to Figma, because the thing that took Figma a decade to earn — a battle-tested multiplayer core plus an entrenched workflow moat — is precisely the part a prompt can't shortcut.

Want the same teardown for any site?

Analyze a site →