Figma is powered by WebAssembly | Figma Blog

WebAssembly reduced Figma’s load time by more than three times after replacing its asm.js-based C++ runtime. The improvement came primarily from faster parsing, native-code compilation, and caching—not from a major reduction in compressed download size. Figma’s experience demonstrated that WebAssembly could deliver substantially faster, desktop-quality web applications, though browser support and implementation differences remained limitations.

What WebAssembly Changes

• WebAssembly is a compact binary format for machine code designed specifically for browsers.
• Figma’s C++ code was a strong candidate because C++ can be compiled directly to WebAssembly.
• Before WebAssembly, Figma used asm.js, a restricted JavaScript subset that represents memory as a large numeric array.
• WebAssembly preserves asm.js’s limitations:
  • It primarily loads and stores numbers.
  • It must call JavaScript for browser APIs such as the DOM and networking.
  • It remains subject to the browser sandbox.

Why WebAssembly Is Faster Than asm.js

• Smaller and faster to parse: WebAssembly’s binary format transfers efficiently and parses around 20 times faster than asm.js.
• Ahead-of-time optimization: LLVM optimizes the C++ code before compilation, allowing browsers to translate it directly to native code.
• Effective caching: Browsers can cache the translated native code, making subsequent loads nearly free.
• Native 64-bit integer support: WebAssembly avoids the slower emulation required by JavaScript’s 53-bit integer limitation.
• Less runtime optimization work: Unlike JavaScript, WebAssembly does not require extensive browser optimization passes for code that was already compiled and optimized.

Figma’s Load-Time Results

• Figma measured load time from application initialization through downloading and rendering an entire design for the first time.
• Switching from asm.js to WebAssembly improved load time by more than three times across document sizes.
• The gain was especially meaningful because Figma users often work with large documents and switch between them frequently.
• Subsequent loads could benefit further from cached WebAssembly-to-native translations.
• The compressed download size improved only slightly because compressed asm.js was already close in size to compressed WebAssembly.

Browser Support Limitations

• At the time of publication, WebAssembly was enabled by default in Firefox and Chrome.
• Edge and Safari were still developing their implementations.
• Figma enabled WebAssembly only in Firefox because Chrome’s implementation had blocking issues, including the lack of caching for translated WebAssembly code.
• These browser-specific differences affected whether the performance benefits could be consistently delivered.

Figma’s results suggested that teams with substantial C or C++ code should seriously consider WebAssembly for performance-sensitive web applications. The largest benefits were faster startup and reusable native-code caching, while download-size improvements were comparatively modest.