undo-redo

1 posts

figma

Multiplayer Editing in Figma | Figma Blog (opens in new tab)

Figma’s multiplayer editing release made real-time collaboration a core part of its design workflow. The company replaced a simple whole-document save-and-upload model after it caused overwrites, stale links, and confusing collaboration problems. Although multiplayer required major changes to conflict resolution, undo/redo, layout behavior, file formats, and performance, Figma concluded that it ultimately simplified the user experience. ## Why the Original Saving Model Failed - Early Figma downloaded documents locally, let users edit in the browser, and periodically uploaded the entire document. - This approach was easy to build and familiar to users of syncing services such as Dropbox. - In team settings, however: - Users could unknowingly overwrite one another’s work. - Shared links could display an outdated version while changes were still saving. - Version history preserved data, but did not prevent collaboration mistakes. - Alternatives such as “baton-passing,” where only one person could edit at a time, lacked the simplicity and flexibility Figma wanted. ## How Figma’s Multiplayer Engine Works - Each user’s changes are sent to the server and broadcast to other participants in real time. - Independent simultaneous changes can coexist. - When users modify the same property on the same object, Figma resolves the conflict by selecting the latest change. - Implementing this model required changing fundamental parts of the editor rather than adding multiplayer as a separate synchronization layer. ## Undo, Redo, and Conflict Resolution - Undo becomes ambiguous when other users modify the same objects afterward. - Figma adopted a guiding principle: undoing actions, copying something, and redoing back to the present should leave the document unchanged. - Redo therefore cannot simply reapply the original edits, since that might overwrite newer work by collaborators. - Conflict resolution also had to account for: - Related properties that must be changed together. - Actions that indirectly affect multiple objects. - Layout operations where apparently unrelated edits can interact. - These requirements led Figma to revise aspects of its layout system. ## Performance and File-Format Changes - Professional-quality multiplayer required extensive measurement and tuning. - Figma overhauled its file format because the previous representation was inefficient for transmitting small incremental messages. - The team expected additional challenges as new collaborative features were introduced. ## A Simpler Collaborative Experience - Multiplayer reduced UX complexity by eliminating workarounds for stale files, overwrites, and coordination. - Users can see collaborators’ mouse cursors and selections, providing immediate context about who is present and where they are working. - Cursors can also serve as lightweight communication tools, such as pointing at an object or getting someone’s attention. - Each participant appears as an avatar in the top-right corner. - Clicking an avatar lets one user present to another, making presentations opt-in rather than forcing a single presenter and synchronized viewing mode. Figma’s experience suggests that real-time collaboration is best treated as a foundational part of the editor. Despite the substantial engineering investment, multiplayer editing can make collaborative software both more powerful and easier to use.