Design Figma or Canva (Browser Drawing Tool) - Frontend System Design Interview Guide

Design a production-grade browser-based design and drawing tool similar to Figma, Canva, Excalidraw, or tldraw. Users should be able to create, select, move, resize, rotate, group, layer, and edit common canvas objects such as rectangles, frames, images, text, and basic vector shapes.

Difficulty Note: Hard. The hard part is not drawing a rectangle; it is building an editor where document state, viewport state, selection state, input handling, rendering, hit testing, history, assets, and collaboration boundaries stay separate as the canvas grows.

Key Challenges:

• Scene graph modeling for shapes, groups, frames, text, images, and z-order
• Canvas/SVG/DOM rendering trade-offs and hybrid rendering strategies
• Precise hit testing, selection boxes, handles, snapping, panning, and zooming
• Transform math across local coordinates, parent groups, and viewport coordinates
• Undo/redo with command grouping and selection restoration
• Asset loading, image sizing, font loading, and export pipeline constraints
• Performance with hundreds to thousands of objects without blocking pointer interactions
• Real-time collaboration, multiplayer cursors, and conflict handling as advanced extensions

Real-World Complexity:

Design tools are interaction engines over a scene graph. Strong candidates separate durable document state from ephemeral editor state, keep pointer interactions off the React render path, and choose rendering technology based on object count, interactivity, text fidelity, export needs, and accessibility.