Design a Figma-like collaborative editor

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).