Design Figma – Frontend System Design

We’ll walk through the frontend system design for Figma: a professional vector design tool that runs in a browser tab, renders files with tens of thousands of layers, and lets a whole team edit the same file at once. You’ll see why the document lives in a WebAssembly core instead of React state, how a tiled WebGL renderer keeps panning smooth, how a click finds the right node among 50,000, and how multiplayer converges without operational transforms.

This is not the whiteboard question. A whiteboard with a few hundred shapes is fine on Canvas 2D. Figma is the version where the interviewer says “assume 50,000 nodes, nested frames, components, and ten people in the file”, and every shortcut you took in the whiteboard answer stops working.

Problem Statement

Design the frontend for a collaborative vector design tool like Figma.

Requirements:

• An infinite canvas with smooth pan and zoom, from 2% to 25,600%
• Frames, groups, vector paths, text, and images, nested to any depth
• Select, move, resize, and edit vector points with precise hit testing
• Components... premium content.