📝Figma

Figma brings Collaborative Editing features for designers.

Blog:

• How Figma’s multiplayer technology works

  • 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.

• Realtime editing of ordered sequences

  • 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.