Multiplayer & Product-Led Growth: Part 2
How Figma tested the limits of web browsers to create real-time collaborative design software
Creativity is essentially a lonely art said Lou Dorfsman, a pioneer of modern graphic design.
Artists have always been lone wolves, working for themselves or compartmented away at some large company.
Thus, design software was created with this in mind. Photoshop, Sketch, and other design tools all existed in a vacuum, hidden away in the individual desktops of each user.
Decentralization defined design software until almost 2018. If you were a designer before Figma, your job may have looked like this. Your product manager sends you a bunch of requirements, you mock up a design and email it to the team for feedback. Repeat this process until everyone on the team is pleased with your work. Seems normal right? But that’s pain point #1. This iterative process led to a ton of version control since you had to keep updating your Photoshop or Sketch file. This only worsened if you were working with a team of designers since you had to keep track of who did what and merge it all together.
It was impossible to design an entire platform in harmony. Version control should have all been consolidated under a single document, allowing multiple users to edit, comment, and view throughout the creative process. That’s exactly what Figma’s multiplayer solved.
However, there were concerns with collaborative editing. Since everyone on the team could hop on the file, designers were worried that their managers would be activity-tracking or micromanaging employees. Several users also pointed out their preference to work alone, feeling annoyed or anxious with others watching.
Bottom line, Multiplayer was a groundbreaking feature that had to be added. Let’s get into how Figma accomplished it in a year of work.
Building Multiplayer
Figma already had a reputation for having a great feel. The challenge here was to maintain the same level of performance with the added complication of handling multiple edits on a single document in real time.
The technology already existed. Google Docs and the rest of the suite supported real-time editing so to say it was impossible was an exaggeration. Figma ended up doing things differently, but by no means were they trying to reinvent the wheel.
As Evan recalls, Figma used a client/server architecture with several “Multiplayer” servers dedicated to resolving and syncing changes between multiple users.
On the client side, each user had a local copy, where updates would be synced over a WebSocket connection to the cluster of aforementioned servers. This sort of implementation allowed robust handling of various edge cases. Offline editing, undo handling, and conflict resolution would be much easier with both a local copy and a master copy on the server.
Here’s where Figma started freeballing. Up until that point, the popular algorithm for handling collaborative sessions was an Operational Transformation (OT). OTs made it possible to handle index changes caused by simultaneous edits.
For example, imagine 2 people were trying to change the string “abc”. If one was trying to add an “x” to the beginning and the other was trying to delete the “c”, the result would be a “xab”. These functions typically operated by specifying the index position the user wanted to change; Insert[0, “x”] or Delete [2, “c”]. But of course, if one operation is executed, that changes the index position of the second operation. OTs handled that index change to make sure consecutive operations were handled appropriately.
Turns out the most effective use-case for OTs was indeed…text editing! Figma had to search for a solution that was flexible and had robust data type support. Thus, they chose to use something called CRDTs (conflict-free replicated data type). CRDTs guaranteed convergence at some point in time, even though individual files may look different up until that point.
Many sorts of CRDT approaches exist. For Figma’s case, one known as the “last-writer wins register” suited them the best. Here, edits for one object can be made by any number of different people. The final value would simply be determined by who made the last change.
Obviously, Multiplayer involved much more complication like scaling servers when needed, syncing properties, syncing trees, and handling editing of ordered sequences. But with CRDTs and a client/server WebSocket architecture, they were off to a good start.
More Product-Led Growth
The concept of Product-Led Growth even existing seems so bizarre to me. Why are we as customers using products that other people have to convince us are good? All companies should be product-led growth companies and the ones that aren’t can only succeed for a limited time. Think of the world’s greatest technological inventions up until this point. No one had to be convinced to use the first web browser, buy the iPhone, query on ChatGPT, and others. They spoke directly to our needs as humans.
And with budget restraints and recessionary fears, sales-led companies are finally catching on. Recently, Dell announced they were laying off 10% of the workforce, with cuts specifically to their sales team. Klarna, a BNPL company, laid off its customer support roles after it realized the power of AI assistants. It is the survival of the fittest, and in today’s environment that means companies with actual product innovation, not just those that can just throw money at their problems.
That’s all for today folks! If you enjoyed this piece covering Figma’s unprecedented approach to collaborative design software, hit the like button or drop a comment with your thoughts. Simply contact us by replying to this email if you have any insider takes or leave a comment on our Substack page!