FIGMA 2026-04-21 Tier 3

How Figma Draws Inspiration From the Gaming World¶

Summary¶

A Figma engineering post (2026-04-21) by a former game-engine engineer framing Figma's client architecture as a game-engine stack adapted for the browser: a C++ 2D graphics/rendering core compiled to WebAssembly, a React+TypeScript UI shell, and a Rust multiplayer server. Systems-as-building-blocks framing (concepts/game-engine-architecture): graphics/rendering + input/control as the foundation, then multiplayer, animation, collision, chat/audio, auto-layout, component/variant, widget/plugin, etc. layered on top. The architecturally load-bearing middle section documents a concrete cross-system production bug — a six-month-old PR in the layout subsystem caused FigJam connectors to oscillate, which in turn produced a storm of multiplayer messages that overloaded both the multiplayer and autosave subsystems. Canonical real-world instance of interdependent complex systems where a bug in one component surfaces as a failure in an entirely unrelated one. Closing case study: tables in FigJam (link) — concurrent cell-edit + row-delete and row-add + column-color-change are the multiplayer semantics Figma had to resolve, and the team built a two-tier visualization contract (patterns/observer-vs-actor-animation): live feedback tied directly to the initiating user's mouse for snappiness, plus a smoothed animation shown to observing users so remote edits don't jump the viewport. Plus a keyboard-navigation accessibility layer explicitly paralleled to game-controller support. Post is narrative / retrospective / hiring-adjacent — architectural content concentrated in the stack section and the connector/autosave failure story. No latency, QPS, memory, cost, or rollout numbers disclosed.

Key takeaways¶

Figma's tech stack is game-engine-shaped, not web-shaped. "We have opted to use a tech stack that looks more similar to a game engine's stack than a web stack." Canvas is C++ compiled to WebAssembly — "widely used in game engines for its efficiency and flexibility in memory management; that's exactly what makes it well-suited for high performance, real-time applications." C++ intentionally not used for the UI layer — "C++ does not come with great libraries for delightful and responsive user interface engineering, so we opted to write our UI layer in React and TypeScript instead." Server side uses Rust in the multiplayer server — "provides better developer ergonomics than C++." The three-language split is chosen by workload fit, not language preference (patterns/game-engine-stack-for-web-canvas). (Source: sources/2026-04-21-figma-how-figma-draws-inspiration-from-the-gaming-world)
"Systems" is Figma's architectural vocabulary, borrowed from game engines. The post enumerates Figma's system inventory by analogy to what a game like Minecraft would need: graphics/rendering + control/input as the foundation, then multiplayer (explicitly named after cooperative games — "we called it 'multiplayer'"), physics/collisions ("collision engine that figures out what your cursor is hovering over and how to connect items together"), animation ("spring animations"), AI (for NPCs in games; for Figma-specific derived behavior), combat (n/a for Figma — explicitly), chat/audio (cursor chat + audio call), plus Figma-specific systems (auto layout, component/variant, widget, plugin). Not all game-engine building blocks transplant — the point is the vocabulary and the composition discipline: every feature lands as a named system with a defined boundary that other systems can layer over (concepts/game-engine-architecture). (Source: sources/2026-04-21-figma-how-figma-draws-inspiration-from-the-gaming-world)
Interdependent systems guarantee cross-subsystem bug propagation. Breath of the Wild is cited as the positive case — "The game is so satisfying to play because the number of interdependent systems allow it to react to an infinite combination of scenarios." Figma's negative case is disclosed in full:
Symptom: an autosave failure on a FigJam file.
Actual shape: FigJam connectors (the arrows that smartly connect objects) would oscillate because every user in the file was modifying them and sending slightly differing data back and forth indefinitely. This produced "a huge number of multiplayer messages, which overloaded the multiplayer and autosave systems."
Localization attempt #1: code audit of the connector subsystem — "revealed nothing."
Localization attempt #2: debug-message instrumentation → led to a six-month-old PR change in an area of the code that has nothing to do with connectors.
Mechanism: connectors "smartly connect different pieces of objects," so their state "can be influenced by the code driving those other objects" — editing a sticky-note's position or size with a connector attached recomputes the connector's attachment point to preserve the stuck-together illusion. A bug in the layout system for objects therefore could corrupt connector state, which cascaded through multiplayer into autosave. Textbook concepts/interdependent-systems: "one part of the code causes a bug in an entirely different part of the codebase." (Source: sources/2026-04-21-figma-how-figma-draws-inspiration-from-the-gaming-world)
Whole-system co-evolution beats per-system depth. Game-dev parallel: "Everyone is hyper-focused on the graphics, so developers spend most of their time improving the rendering system. But without also investing in the animation system or texture art, the game might look jagged and wonky, and won't achieve the quality that players are looking for." Figma's inference: "We can't just dive deep into one system — we need to take a step back and look at the big picture, ensuring that every system complements the others." The tables-in-FigJam launch is offered as the concrete case — the product team polished the single-player primitives (copy/paste, undo/redo, drag-to- resize) while the engineering team worked alongside the platform team to thread those primitives through the multiplayer system. (Source: sources/2026-04-21-figma-how-figma-draws-inspiration-from-the-gaming-world)
Tables-in-FigJam multiplayer design surfaced the canonical collaborative-structured-data edge cases. Concrete scenarios Figma had to resolve:
User A types in a cell while User B actively deletes the cell. What should happen?
User A adds a row while User B changes the color of a column that intersects with the new row. What should the result be?
While User A is editing a cell, User B rearranges rows so User A's cell ends up two rows below where it started ("technically correct, but confusing in practice"). The explicit rejected alternative is the lock-during-edit fallback: "We could have opted to reduce complexity by locking a table when one person is actively editing it, but that wouldn't be aligned with the collaborative nature of FigJam." Collaborative-first is a product constraint that pushes conflict back into the multiplayer semantics layer rather than serializing it via locks. (Source: sources/2026-04-21-figma-how-figma-draws-inspiration-from-the-gaming-world)
Two-tier visualization: live feedback for the actor, animation for the observer. Figma's answer to "multiplayer changes are a jarring experience" for non-initiating users is architecturally explicit as a pattern (patterns/observer-vs-actor-animation):
Live feedback: for the user initiating a change, the UI responds directly to that specific user's mouse movement — "users editing a table could see their actions in real time, even without a lot of explicit animation." Snappy because tied to a local input event.
Animation: for everyone else viewing the same change, an animation layer smooths the edit as it propagates — "allowing users observing the change to more clearly follow table edits as they happen." Jitter-free because decoupled from any single user's input timing.
Rubber band on drag limits: additional UX — the row/column drag has a rubber-band effect at its movement limits, explicitly analogized to games' invisible walls and barriers that "guide users onto the right path, without using explicit signage." The implementation came from a designer prototype (Jakub Świadek) reified into a framework by an engineer (Tim Babb) — "to properly recreate Jakub's prototype in code, we needed to build a new system to animate elements on the canvas." Animation-as-system extended to serve collaboration observability, not just aesthetic polish. (Source: sources/2026-04-21-figma-how-figma-draws-inspiration-from-the-gaming-world)
Keyboard navigation for accessibility is a first-class control system, paralleled to game-controller support. Figma partnered with the accessibility team to ensure tables are navigable via keyboard shortcuts, not just mouse/trackpad. The author's game-industry parallel: games supporting both "keyboard and mouse, with a standard gamepad, or with specialized gamepads" (including the Xbox Adaptive Controller on Wattam). "A system dedicated to accommodating different control schemes can enable more people to enjoy the game" — accessibility framed as a control-system-architecture concern, not an afterthought. Aligns with Figma's earlier accessibility push. (Source: sources/2026-04-21-figma-how-figma-draws-inspiration-from-the-gaming-world)

Systems¶

systems/figma-multiplayer-querygraph — named explicitly ("multiplayer") as one of Figma's systems; the connector- oscillation/autosave-overload incident is a failure mode of this system triggered externally by a layout-subsystem bug. Extends the page with a canonical cross-system cascade example.
systems/react + systems/typescript — the UI layer of Figma's client stack. The post makes the workload-split rationale explicit (React+TS for UI ergonomics, C++ for performance-critical canvas).

Concepts¶

concepts/game-engine-architecture (new) — the systems-as-building-blocks composition discipline borrowed from game engines: graphics/rendering + input/control as the foundation, multiplayer/physics/animation/AI/audio as composable systems layered over it. Figma's canonical non-game instance.
concepts/web-assembly (new) — W3C binary instruction format for a stack-based VM, portable compilation target usable from browsers and server runtimes. Figma's canvas compiles C++ to WASM; cited 3× load-time improvement in the linked 2017 post.
concepts/interdependent-systems (new) — architectures where a change in one subsystem can surface as a bug in an entirely different subsystem because of implicit cross-system data/state dependencies. Figma's connector/autosave cascade is the canonical production case.
concepts/object-tree-document-model — the substrate connectors, tables, and sticky-notes all live in as node objects; the layout-system-bug-corrupts-connector-state cascade works because they share this model.

Patterns¶

patterns/game-engine-stack-for-web-canvas (new) — three-language client+server split:
C++ (or another native language) compiled to WebAssembly for the performance-critical canvas / render / physics core.
React + TypeScript (or another web-native UI framework) for the UI shell.
Rust (or another memory-safe systems language with better ergonomics than C++) for the server tier. Chosen by workload fit: WASM needs aggressive memory control; UI needs a rich widget ecosystem; servers need safety + speed. Figma is the canonical instance.
patterns/observer-vs-actor-animation (new) — in real-time collaboration, render changes twice: once tied to the initiating user's local input for responsiveness, once smoothed via an animation system for remote observers. Avoids both input-lag for the actor and jitter for the observer. Figma's tables-in-FigJam rollout is the canonical instance.

Operational / architectural numbers¶

Three languages in the client+server stack: C++ (canvas), TypeScript (UI, via React), Rust (server). No line-count or headcount split disclosed.
One concrete cross-system incident disclosed: a six-month-old layout-subsystem PR produced FigJam connector oscillation, which overloaded multiplayer + autosave. No affected-file count, duration, customer impact, MTTR, or blast-radius numbers disclosed — narrative-shape only.
Three named engineers on the tables-in-FigJam work: Katie Jiang + Jonas Sicking (discovered the oscillation), Isaac Goldberg (debug-message localization), Jakub Świadek (designer of the two-tier visualization), Tim Babb (built the canvas animation framework).
External link — 3× load-time win: WebAssembly migration cut Figma's load time by 3× (linked 2017 post, not quantified further in this post).

Caveats¶

Narrative / retrospective / hiring-adjacent post, not a technical deep-dive. Architectural substance is the three- language stack rationale + the connector/autosave cross-system failure story + the two-tier visualization pattern; the rest is game-industry parallels and personal framing.
No latency / QPS / memory / cost / rollout numbers disclosed for any of the described systems or incidents.
No disclosure of the interdependent-systems fix mechanism beyond "debug-message instrumentation eventually led us to a six-month-old PR." Whether the fix was reverting the layout PR, patching the connector subsystem to tolerate the input, or a cross-cutting invariant enforcement is not stated.
No depth on tables-in-FigJam multiplayer conflict-resolution semantics — the edge cases are listed (type-while-delete, add-row-with-color-column, rearrange-while-edit), but the resolution rules are only framed as "we ran through so many of these scenarios, making sure that the end result is something that feels natural and consistent with the rest of the app." No CRDT / OT / reconciliation protocol detail.
No disclosure of animation-system implementation beyond "a new system to animate elements on the canvas" — framework shape (push/pull, scheduler, tick rate, whether it integrates with the Figma Materializer reactive graph or runs parallel) is not discussed.
Post pre-dates several of the 2026-04-21 Figma engineering posts conceptually — no mention of Materializer (the 2026 rebuild of the reactive graph for derived subtrees), or the real-time data service rebuild (LiveGraph 100x) — but this post was published the same day. Treat the stack + systems-vocabulary framing as the architectural umbrella under which the other 2026-04-21 posts sit, not as prior-generation context.