Katkat
Back

Design a Figma-like collaborative editor

GrammarlySoftware Engineer · Technical Screen
MediumSoftware EngineerTechnical ScreenSystem Design

Last updated

This question evaluates a candidate's ability in designing real-time collaborative systems, covering concurrency control (OT/CRDT trade-offs), low-latency messaging, data modeling, persistence, client-server synchronization, and fault tolerance for unreliable networks.

System Design: Collaborative design editor (Figma/Google Docs style)

Design the backend (and key client interactions) for a real-time collaborative design editor similar to Figma (or a Google-Docs-like document, but for canvas objects).

Core features

  • Users can create/open a file (design document) containing a canvas with objects (e.g., frames, shapes, text).
  • Multiple users edit concurrently and see updates in near real time.
  • Basic collaboration UX:
  • Presence (who is online in the file)
  • Cursor/selection indicators (optional)
  • Comments (optional)
  • Persistence: changes must be saved and the file can be reopened later.

Non-functional requirements

  • Low latency for edits (target p50 < 200ms end-to-end for active collaborators).
  • Supports many files; a “hot” file may have many concurrent editors.
  • Network failures happen frequently (mobile/Wi‑Fi). Explain how the system behaves when:
  • a client temporarily disconnects and reconnects
  • packets are duplicated/out of order
  • the client edits while offline and later comes back online

Scope / assumptions

  • You do not need to draw diagrams; explain in text.
  • You may choose an algorithm for concurrent editing (e.g., OT or CRDT) and justify it.
  • Define key APIs, data model, and major components (real-time messaging, storage, auth).