← Bookmarks 📄 Article

How Figma's multiplayer technology works | Figma Blog

How Figma built the first design tool with live multiplayer editing by creating a custom operational transformation system that handles real-time collaboration at scale.

· infrastructure
Read Original
Summary used for search

• Figma built a custom multiplayer system from scratch because existing solutions (like Google Docs' OT) weren't suitable for a visual design tool's unique requirements
• Uses WebSocket-based client-server architecture with operational transformation (OT) to resolve conflicts when multiple users edit simultaneously
• Handles network failures gracefully through optimistic updates, queuing changes locally, and reconciling when connection returns
• Optimizes performance for large files by only syncing visible portions and using efficient data structures
• Made specific trade-offs: server as source of truth (not peer-to-peer), eventual consistency over strong consistency, custom protocol over standard CRDTs

Figma pioneered live collaborative editing in design tools by building a custom multiplayer system tailored to visual design's unique challenges. Unlike text editors where operational transformation (OT) systems like Google Docs' were already proven, design tools required handling complex visual objects, layers, and properties that change simultaneously across users.

Their architecture uses a client-server model with WebSockets for real-time communication. When users make edits, changes are sent as operations to the server, which applies them in order and broadcasts to other clients. The system uses operational transformation to resolve conflicts—when two users edit the same object simultaneously, OT algorithms transform operations so they can be applied in different orders while maintaining consistency. The server acts as the source of truth, simplifying the architecture compared to peer-to-peer approaches but requiring careful handling of network issues.

Key technical decisions include optimistic updates (changes appear instantly locally before server confirmation), efficient syncing of only visible portions of large files, and graceful degradation when networks fail. They chose eventual consistency over strong consistency, accepting brief moments where users might see slightly different states in exchange for better performance. The system queues operations during disconnections and reconciles when connectivity returns, ensuring no work is lost while maintaining the real-time feel that makes Figma's collaboration distinctive.