Figma Rendering: Powered by WebGPU | Figma Blog (opens in new tab)
Figma replaced its WebGL-based renderer with a WebGPU backend to unlock GPU compute, clearer resource management, and better error handling. The migration required more than swapping APIs: Figma redesigned its graphics interface, supported both WebGL and WebGPU, and built tooling to translate existing shaders. The project also improved the existing WebGL renderer by making rendering inputs explicit and reducing opportunities for state-related bugs. ## Why Figma Moved Beyond WebGL - Figma originally chose WebGL to deliver a smooth, browser-based infinite canvas when most design tools were native applications. - WebGPU, supported by Chromium since 2023, enables: - Compute shaders that move parallelizable work from the CPU to the GPU. - Less reliance on WebGL’s bug-prone global state. - More capable and understandable error handling. - The transition had to preserve WebGL compatibility and avoid performance regressions or disruptions during rollout. ## Making Draw Calls Explicit - The previous interface mirrored WebGL’s global-state model: - Buffers, textures, materials, and framebuffers were bound separately. - Resources remained bound after a draw call. - Developers could accidentally reuse stale state. - Figma redesigned `draw()` so that required resources are passed directly as arguments. - The WebGL implementation lazily updates bindings only when necessary, preserving efficiency while making dependencies explicit. - This redesign fixed several WebGL bugs before WebGPU support was introduced. ## Supporting GLSL and WGSL Shaders - WebGL uses GLSL, while WebGPU uses WGSL. - Maintaining separate GLSL and WGSL versions of every shader would have created excessive duplication and maintenance work. - Figma built a custom shader processor that: - Parses existing WebGL 1–compatible GLSL. - Translates it into a newer GLSL structure. - Uses the open-source `naga` tool to convert it to WGSL. - Generates both GLSL and WGSL outputs. - Extracts shader metadata such as input types and data layouts. - Supports file includes for shader reuse and modularity. - This allowed engineers to continue writing and maintaining one primary shader source while supporting both rendering backends. ## Adapting Uniform Data - Uniforms provide shader inputs such as colors and transformations. - WebGL allows uniforms to be updated individually through calls such as `uniform1f` and `uniformMatrix3fv`. - Figma’s original graphics interface followed this model with methods such as `setUniform1f`. - WebGPU requires uniforms to be grouped into uniform buffers and uploaded together. - Consequently, simply switching APIs could have reduced performance; Figma needed to redesign uniform handling carefully rather than directly reproducing WebGL behavior. ## Practical Outcome Figma’s WebGPU migration was an architectural modernization as much as a graphics API upgrade. The recommended approach is to introduce an explicit, backend-independent rendering interface, automate shader translation, and optimize data layouts carefully so WebGPU’s capabilities improve performance without sacrificing compatibility.