CRDT Basics for Product Designers

Discover why CRDTs are the technology that enables applications like Figma or Notion, and how they affect the way you design collaborative and offline-first interfaces.

info Quick Definition
CRDTs (Conflict-free Replicated Data Types) are data structures that allow multiple users to make simultaneous, independent changes that, when synchronized, automatically reach the same final state without the need for a central authority or manual conflict resolution. It is the technology that makes modern real-time collaboration possible.

Why the Designer should know what a CRDT is?

Traditionally, in web applications, the server was “the single source of truth.” If you wanted to change something, you asked the server for permission and waited for its “OK” response.

With CRDTs, every device of every user is a source of truth. This radically changes how we design the user experience (UX):

  • Zero Latency: The user sees their change instantly without waiting for the server.
  • True Multiplayer: Dozens of people can edit the same object at once.
  • Forgiving Offline: You can work without internet and, when reconnecting, your changes magically merge with those of your teammates.

The Concept: Smart and “Automatic Merge”

Imagine two users are editing the same circle on a digital whiteboard:

  • User A changes the color to Red while on the subway with a poor connection.
  • User B moves the circle 50px to the right in their office with fiber optics.

When both are back online, a CRDT-based system doesn’t force a version choice. It simply applies both: the circle ends up being Red and 50px to the right. The conflict has been resolved mathematically without the user ever seeing an error modal.

Critical Implications for Product Design

Designing for a CRDT-based system requires a different mindset than classic web design:

1. Optimistic Updates (Optimistic UI)

You no longer need to show a loading spinner every time the user clicks. The CRDT assumes the change is valid and shows it instantly. Only if there is a catastrophic error (very rare with CRDT) will a “Rollback” or undo state be shown.

2. User Intent Management

As a designer, you must think about the atomicity of actions. If two users edit the same text field:

  • Do we want the system to save the version that wins?
  • Or do we want the system to try to merge the letters of both (as in Google Docs)? The CRDT allows both, but you must choose which is the best experience for that specific context.

3. Synchronization States

Even if the technology is magical, the user needs feedback. Design microinteractions that indicate:

  • “Working locally (Offline).”
  • “Syncing changes…”.
  • “Everything saved and synced.”

Success Case: Figma

Figma is the golden example of using CRDT (specifically a custom implementation for its design engine). Thanks to this, you can move layers, change colors, and see your teammates’ cursors moving fluidly on your screen, even with mediocre connections.

Mentor’s Tips

  • Design for collaboration, not just for the individual: Ask yourself: “What happens if someone else touches this while I’m doing it?”. The answer should be a visual solution, not an error message.
  • Take advantage of Offline freedom: Don’t limit your app’s features if there’s no internet. Let the user keep creating; the CRDT will handle the rest when the connection returns.
  • Collaborate with Engineering: CRDTs are complex to implement natively. Understand if your team is using CRDT, Operational Transformation (OT), or classic databases, as this will change what you can or cannot promise at the UX level.

Useful Resources and Tools

conflict-resolution presence-modeling command-pattern offline-first-flows optimistic-updates-rollback