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