Case study · Stack

How Figma built a game-engine-grade design tool in the browser

Figma is a design tool where whole teams edit the same file live in the browser. Its canvas is C++ compiled to WebAssembly with a React and TypeScript UI around it, backed by a Rust multiplayer server, a Ruby monolith and a heavily sharded Postgres fleet on AWS.
Copy this stackfigma.com Collaborative design tool · United States · founded 2012

Language

  • C++figma.com

    Powers the design canvas and rendering engine.

    Why: Game engines use it for its efficiency and flexible memory management, which a real-time canvas needs.

  • TypeScriptfigma.com

    Is the language of the front end and, since 2024, of the prototype viewer once written in Skew.

    Why: Their in-house Skew language was hard for new hires and lacked an outside ecosystem.

UI library

  • WebGLfigma.com

    Draws the canvas through Figma's 2D rendering engine.

  • Reactfigma.com

    Builds the UI layer around the canvas.

    Why: C++ does not come with great libraries for responsive interface work.

Hosting

  • AWSfigma.com

    Hosts Figma's infrastructure.

  • Kubernetesfigma.com

    Runs the services on three active EKS clusters.

    Why: ECS lacked StatefulSets and Helm support, and Kubernetes brings a large ecosystem, less lock-in and easier hiring.

Database

  • PostgreSQLfigma.com

    Stores product data on Amazon RDS, split vertically and sharded horizontally.

    Why: Moving to another database meant a risky migration and losing their Postgres expertise with only months of runway.

Build and runtime

  • WebAssemblyfigma.com

    Is the compile target that runs the C++ engine in the browser.

    Why: Switching to it improved load time by more than 3x.

  • Bazelfigma.com

    Defines each service in one config file from which CI generates the Kubernetes YAML.

ORM

  • ActiveRecordfigma.com

    Maps the Ruby monolith's models to the database.

Data fetching

  • Temporalfigma.com

    Runs workflows on Kubernetes, deployed from its Helm chart.

Backend framework

  • Rustfigma.com

    Runs the performance-sensitive core of the multiplayer server, one process per document.

    Why: The old TypeScript server had unpredictable latency spikes and garbage collector pauses, and Rust offered low resource use with safety.

  • Node.jsfigma.com

    Handles the network side of the multiplayer server.

  • Sinatrafigma.com

    Serves Figma's HTTP backend inside a Ruby monolith.

  • Gofigma.com

    Powers DBProxy, the service that routes queries to the right Postgres shard.

Error monitoring

  • Datadogfigma.com

    Collects observability data from the platform.

How they built it

A game engine stack, not a web stack

Figma says its stack looks more like a game engine than a web app. The canvas is written in C++, a language game engines use for its efficiency and control over memory, and compiled to WebAssembly. Moving to WebAssembly in 2017 cut load times by more than 3x.

C++ lacks good libraries for responsive interfaces, so everything around the canvas is built in React and TypeScript.

Sources:figma.com figma.com

Multiplayer moves from TypeScript to Rust

The multiplayer server that syncs every edit was first written in TypeScript on Node.js. As Figma grew, its single-threaded design meant one slow operation could block everyone on a worker, and garbage collection caused unpredictable latency spikes.

In 2018 the team rewrote the performance-sensitive part in Rust, running as a child process per document, while network handling stayed in Node.js. Rust gave low resource usage and safety without C++'s rough ergonomics.

Sources:figma.com

Scaling Postgres instead of replacing it

In 2020 Figma ran a single Postgres database on AWS's largest instance. By late 2022 it had split into about a dozen vertically partitioned databases on Amazon RDS, but some tables had reached terabytes and billions of rows, so in 2023 the team shipped horizontal sharding behind a new Go service called DBProxy.

They considered CockroachDB, TiDB, Spanner and Vitess, plus NoSQL. Switching would have meant a risky data migration and losing years of Postgres expertise with only months of runway left, and NoSQL lacked the relational flexibility they relied on.

Sources:figma.com

From ECS to Kubernetes in under a year

Figma's services already ran in containers on AWS ECS, but ECS was adding complexity: no StatefulSets for etcd, no easy way to run Helm charts like Temporal, and slow load balancer changes during emergencies. In 2023 the team moved to EKS, and by January 2024 the monolith and the multiplayer services were running on three active clusters.

They kept the developer interface the same: services are defined in one Bazel config and CI generates the Kubernetes YAML. Node autoscaling with Karpenter brought costs down.

Sources:figma.com

Retiring a homegrown language

Figma's prototype viewer and mobile playback engine were written in Skew, a compile-to-JavaScript language built in-house. It was hard for new hires to learn and didn't integrate with the rest of the code.

Once mobile browsers supported WebAssembly and hot paths could move to the C++ engine, Figma wrote a Skew-to-TypeScript transpiler and migrated in three phases without pausing feature work. TypeScript became the source of truth in 2024.

Sources:figma.com

Also detected on their website

Found on the homepage with the open Wappalyzer rules (HTML, scripts and headers). It shows what runs in the browser, not the whole backend.

  • Amazon CloudFront
  • Amazon Web Services
  • C3.js
  • HSTS
  • HTTP/3
  • Netlify
  • Sanity
  • Sanity.io