InterviewLegend

Design the Canvas Rendering Engine

Commonly asked
Alex Chen40 min readUpdated 17 real interview reports

Figma runs entirely inside a browser tab. When you open a design file, the whole editor is drawn by code shipped to your machine: the canvas you draw on, the shapes and text and frames. A server does not paint it and stream it down. A single file can hold tens of thousands of vector nodes, and some real files run past a hundred thousand. As you drag the canvas around or spin the zoom wheel, every one of those nodes could in principle need redrawing sixty times a second. So this is a rendering-engine problem, the kind a game studio solves, running on a web page. Almost every other design round in this course is about servers talking to each other. This one is not. It is about one CPU and one GPU keeping up with your eyes.

The Figma angle
This is the rare frontend system-design round, and treating it as a client-performance problem from the first sentence is what separates a strong answer from a generic one. There are no shards here, no replicas, no consistency model to defend. The document lives in memory on the user's machine, and the only clock that matters is the frame budget. At 60fps you have about 16 milliseconds to turn the current document plus the current viewport into pixels, every single frame, or the pan visibly stutters. Figma is one of the very few companies that runs this round at all, because it actually built a custom rendering engine in the browser to make a professional design tool feel native. If your loop is frontend or core-engine, the interviewer wants to hear you reason about what to draw, what to skip, and what to reuse, all under that 16-millisecond ceiling. Open by naming the budget and the scale, and let every later choice visibly serve them.

FigmaPremium lesson · System design round

The Figma design, worked end to end.

  1. The API and data modelSystem design
  2. The design, drawn out1 diagram
  3. 4 deep divesWith the tradeoffs
Get the Figma questions

$49 a year · all 100 companies · cancel anytime

From 20,000+ candidate reports, forum threads behind logins and write-ups in Chinese.

Had your Figma interview?Tell us what they asked. Reviewed before it goes in, never with your name.
Figma interview guide

Know what Figma asks before you walk in.

28 coding · 5 system design · 17 behavioral questions

Get Premium$49 a year · Cancel anytime
Or start freeNo card.

Get their questions first.

InterviewLegend is independent and not affiliated with or endorsed by any company it covers.