Figma's Multiplayer Technology (2019)
8 days ago
- #design-tools
- #collaborative-editing
- #distributed-systems
- Figma introduced multiplayer functionality to enable live collaborative editing in design tools, despite initial skepticism.
- Operational Transformation (OT) and Conflict-free Replicated Data Types (CRDTs) were considered for implementing multiplayer features, with Figma opting for a CRDT-inspired approach due to its simplicity and suitability for design tools.
- Figma's multiplayer system uses a client/server architecture with WebSockets for real-time updates, allowing offline editing and automatic sync upon reconnection.
- The structure of a Figma document is a tree of objects, similar to the HTML DOM, with each object having unique IDs and properties.
- Figma's approach to handling conflicts involves last-writer-wins for property changes, ensuring eventual consistency without complex conflict resolution.
- Object creation and removal are handled explicitly, with unique client-generated IDs to avoid conflicts and ensure offline capability.
- Managing tree structures and reparenting objects in multiplayer mode presented challenges, solved by using parent links and fractional indexing to maintain order and prevent cycles.
- Undo functionality in multiplayer was designed to ensure that undoing and redoing changes does not disrupt the collaborative workflow or overwrite others' edits.
- Figma's multiplayer system demonstrates the practical application of CRDT principles in a centralized system, offering insights for similar collaborative tools.