Figma: Why Multiplayer is Hard. Pt. 2
As previously mentioned in Figma: From 0 to $20bn, Figma’s collaborative multiplayer feature set it apart from the market leader Adobe. Building multiplayer feature into an existing single player software is hard, and it was easier and more strategic for Adobe to acquire Figma and leverage their architecture across their suite of products.
Today I would consider why building a multiplayer experience is important, and how the Figma team did it. This would be a technical article, but I would aim to keep it simple.
When Figma started building their multiplayer functionality in 2006 they were faced with the classic buy vs build decision. Should they simply use tech that was available or build their own, which would take time.
The existing solutions were operational transforms (OTs) the standard multiplayer algorithm popularized by Google Docs, and Conflict-free replicated Data Type (CRDTs). The team had to evaluate these solutions before making a decision.
Product building approach.??
To develop this feature, the Figma team began by evaluating the existing traditional approach to building collaborative features, their compatibility and limitations.?This produced different ideas.
They then created a prototype ‘playground’ environment to test these ideas for different collaborative algorithms instead of immediately applying it to the codebase.
In How Figma’s multiplayer technology works:
“We first created a prototype environment to test our ideas instead of working in the real codebase. This playground was a web page that simulated three clients connecting to a server and visualized the whole state of the system. It let us easily set up different scenarios around offline clients and bandwidth limited connections”.
Once the prototype had clarified an applicable approach, it was easy to add it to the existing codebase.
In How Figma’s multiplayer technology works:
“Once we figured out how we wanted to build our multiplayer system, it was straightforward to graft the ideas from our prototype onto our existing codebase. We used this prototype to quickly research and evaluate different collaborative algorithms and data structures.”
The Figma team’s primary goal when designing their multiplayer system was for it to be as simple as possible to get the job done.
In How Figma’s multiplayer technology works:
“A simpler system is easier to reason about which then makes it easier to implement, debug, test, and maintain”.
The Traditional Approach: OTs and CRDTs.
OTs are a system of multiple components. They separate the high-level transformation control algorithms from the low-level transformation functions.
OT’s primarily power collaborative text-based apps such as Google Docs because they are very useful for “editing long text documents with low memory and performance overhead”. OTs are hard to implement correctly, and turned out to be too complicated for what the Figma team required especially as Figma isn’t a text editor.???
This didn’t align with the goal of simplicity set out by the team, so they decided to consider CRDTs which were simpler to implement.
CRDTs are a collection of different data structures replicated across multiple computers in a distributed system. The key feature that sets CRDTs apart is that any replica can be independently updated, and the algorithm automatically resolves any inconsistencies that might occur. Hence, anyone accessing the data structure will see the same thing.
This is useful for Figma because: “we cannot allow two clients editing the same Figma document to diverge and never converge again”.
Figma has implemented CRDTs in a customized, centralized (Figma’s server is the central authority) way compared to distributed computing that is traditionally used with CRDTs. Figma has also used a collection of separate CRDTs to create the final data structure of a Figma document.
But ‘what is a Figma document?’ I hear you say.
How do we sync updates to a Figma document using CRDTs??Let’s find out.
A Figma Document.
In How Figma’s multiplayer technology works:
Similar to the HTML DOM (Document Object Model) which is the structure of every webpage, every Figma document is a tree of objects.
“There is a single root object that represents the entire document. Underneath the root objects are page objects, and underneath each page object is a hierarchy of objects representing the contents of the page”.
“Each object has an ID and a collection of properties with values. Adding new features to Figma just means adding new properties to objects”.
Now that we have a clearer picture on the structure of a Figma document, we can now discuss further how the Figma multiplayer system works.
Figma’s Multiplayer System.
Figma uses a client/server architecture were “Figma clients are web pages that talk to a cluster of servers over WebSockets”.
In How Figma’s multiplayer technology works:
“These servers (a service called multiplayer) create a separate process for each multiplayer document which everyone editing that document connects to. When a document is opened, the client downloads a copy of the file. Updates to that document are synchronized over the WebSocket connection in both directions”.
Multiplayer is only used for syncing changes to the Figma document.
We would now consider different syncing changes by Figma. In these scenarios, think of a client as a user performing a specific action on a part of the Figma document (object).
Syncing Object Properties
This refers to how different object properties are updated by 1 user or different users working on the same document through the multiplayer servers.
In How Figma’s multiplayer technology works:
“These servers track the latest value that any client has sent for a given property on a given object. This means that two clients changing unrelated properties on the same object won’t conflict, and two clients changing the same property on unrelated object also won’t conflict”
A conflict should happen if two clients change the same property on the same object, in which case the “document will just end up with the last value that was sent to the server”.
Because changes are instantaneous, the chances of this happening are low i.e., no two clients will make a change at the same time down to the millisecond. ?
In How Figma’s multiplayer technology works:
领英推荐
“An important consequence of this is that changes are atomic at the property value boundary. The eventually consistent value for a given property is always a value sent by one of the clients”.
“If the text value is B and someone changes it to AB at the same time as someone else changes it to BC, the end result will be either AB or BC but never ABC”.
Syncing Object Creation and Removal.
Objects are created in Figma in a way that is similar to the ‘last-writer-wins’ concept in the CRDT literature where a property is added to a data type with a specific timestamp to reduce conflict.
In How Figma’s multiplayer technology works:
“Object creation in Figma is most similar to a last-writer-wins set in CRDT literature, where whether an object is in the set or not is just another last-writer-wins boolean property on that object”.
“This system relies on clients being able to generate new object IDs that are guaranteed to be unique”.
Object removal deletes all the data about it (and its properties) from the server, and stores it in the undo ‘buffer’ of the client. This makes it easy for the client to undo the delete action.
Syncing tree of objects
This is focused on how the multiplayer syncs a tree of objects, and manages the reparenting operation without creating conflict, or duplicating the objects on that tree.
In How Figma’s multiplayer technology works:
“Arranging objects in an eventually-consistent tree structure is the most complicated part of our multiplayer system. The complexity comes from what to do about reparenting operations (moving an object from one parent to another)”.
“Many approaches represent reparenting as deleting the object and recreating it somewhere else with a new ID, but that doesn't work for us because concurrent edits would be dropped when the object's identity changes”.
“The approach we settled on was to represent the parent-child relationship by storing a link to the parent as a property on the child. That way object identity is preserved”.
But this creates a new problem where parent cycle can be created in a valid tree.
In How Figma’s multiplayer technology works:
“An example of this is a concurrent edit where one client makes A a child of B while another client makes B a child of A. Then A and B are both each other’s parent, which forms a cycle”.
“Figma’s solution is to temporarily parent these objects to each other and remove them from the tree until the server rejects the client’s change and the object is reparented where it belongs”.
Implementing Undo
An undo action is straightforward for a single-player mode but becomes complicated with multiplayer.
In How Figma’s multiplayer technology works:
“If other people have edited the same objects that you edited and then undo, what should happen? Should your earlier edits be applied over their later edits? What about redo?”.
“We settled on a principle to help guide us: if you undo a lot, copy something, and redo back to the present (a common operation), the document should not change”.
“This may seem obvious but the single-player implementation of redo means “put back what I did” which may end up overwriting what other people did next if you’re not careful”.
Summary
Collaboration is the new feature bringing diverse teams together in tools like Google Docs, Miro, and Figma. Offering a collaborative design experience was an early decision by the Figma founding team.
Today we’ve seen how Figma built its multiplayer system, by considering traditional approaches to multiplayer and their limitations, the different scenarios for syncing changes to a Figma document, and iterating on a prototype environment.
I hope this article shows you how you can use CRDT research to build your own collaborative, multiplayer system. Good luck and bye for now.
Nero
Delivering Value, Racing Towards Excellence.
Resources
Multiplayer Editing in Figma, How Figma’s multiplayer technology works, and Making multiplayer more reliable.
Other Writing
You can also read book reviews on:
Succeeding ( Mindset, How to fail and still win, Strategy Rules from Bill Gates, Andy Grove, and Steve Jobs), Customer Discovery and Product Building( The Mom Test, Inspired, The $100 Startup, Choose Yourself, The Alchemist).
Other articles on: Figma: From 0 to $20bn, Me, My Product Management journey, Career Framework, Career Advice, Strategy, Management & Teamwork, Spotify’s Product Story
And many more at Business Notes by Nero Okwa.
If you have any more questions kindly leave a comment below or message me at?[email protected].
If you’re finding this newsletter valuable, consider sharing it with your friends, or subscribing if you haven’t already.