- Figma brings Collaborative Editing features for designers.
- It is inspired by CRDTs, but does not use ones. Instead, it lifts off some constraints and adapts algorithms to its own environment. e.g., Figma has a centralized server to coordinate update.
- Internally, Figma is a tree editor.
- Each node has an ID and a set of properties.
- Each client must be able to generate globally unique IDs.
Parenting relationship is organized as children storing a “parent” property.
- Reordering/reparenting is implemented as changing this “parent” property.
- Delete + re-insert with different ID is not viable because concurrent changes still need to be synced.
- The general flow is that server maintains a LWW (last writer win) registers for properties (where “last writer” means last client sending an update).
- When a client connects to server, servers sends the whole state to the client. Then, they exchange changes.
- If client was disconnected, it can continue editing offline. When client is re-connected, it downloads the whole document again and re-applies his changes.
- Server does not store history or any tombstones. Clients store their history and are responsible for restoring previous state.
- Figma assigns an fractional “order” value to each node. The order is determined by sorting nodes by this property.
- Moving a node is implemented by setting the property to the average of two new adjacent nodes.
They use arbitrary-precision fraction instead of 64-bit doubles to allow any number of edits.
- Fraction is stored as string. All ASCII range is used, not only 0-9 digits (base 95 numbers)
- Index length can grow infinitely large but that rarely happens in practice.
- If two client assign the same index for two nodes. The server generates a new index for the second client.
Want to receive my 🖋 posts as I publish them?