The Command Pattern in Product Design

Move from designing static screens to designing dynamic flows based on encapsulated actions through the Command Pattern, the technical foundation of modern and collaborative interfaces.

info Quick Definition
The Command Pattern is a software design pattern that encapsulates a user request or action as an independent object. In the world of product design, this allows us to treat each action (delete, move, edit, change color) as an entity that can be stored, undone, redone, and synchronized across multiple users.

Why the Designer Should Know the Command Pattern?

Traditionally, design focused on the final state of screens (the fixed photo). However, modern products (like Figma, Notion, or Google Docs) focus on the actions that lead from one state to another. The Command Pattern is the technical language that makes these transitions possible.

If you design a system that only understands “states” (v1, v2, v3), you will never be able to implement an elegant collaborative Undo. If you design based on “commands” (User A added text, User B changed color), you have an infinite and flexible history system.

The 4 Pillars of the Command Pattern

For a user action to be a valid “command” in the system, it must contain the object and the method (the action):

  1. Execution: What happens when the user performs the action (e.g., moving an object 10px to the right).
  2. Undo: What happens when the user presses Cmd/Ctrl + Z (e.g., moving the object 10px to the left).
  3. State: All the information necessary for the action to be repeated (e.g., which object moved and by what distance).
  4. Metadata: Who performed the action, when, and in what context (fundamental for real-time collaboration and auditing).

Advantages for User Experience

  • Infinite History: By storing a list of executed commands, the user can go back as far as they want without fear of losing information.
  • Conflict Detection and Resolution: If two users try to change the same object at the same time, the system can compare their commands and resolve which should prevail (using techniques like CRDT).
  • Macros and Automation: If actions are individual objects, it is easy to allow the user to record a series of actions and repeat them later with a single click.
  • Real-time Synchronization: Instead of sending the entire screen over the internet every time something changes, we only send the “small command” (e.g., “the user moved the slider to 50”). This makes apps incredibly fast and efficient.

The Command Pattern in Modern Applications

  • Figma: Every time you move an element or change a color, Figma creates a command and sends it to the server so your teammates see it instantly.
  • Video Editors (Premiere, Final Cut): Their complex Undo systems are based entirely on a huge stack of commands.
  • Databases (SQL): Transactions (Begin, Commit, Rollback) are a pure application of the Command Pattern to ensure data integrity.

Mentor’s Tips

  • Design for action, not just result: When documenting your flows for developers, don’t just show the “before” and “after.” Explain what constitutes an atomic “command action” in your app.
  • Logical Batching: Not every click is an independent command. Sometimes, several small actions should be grouped into a single command for Undo to be useful (e.g., typing a full sentence instead of each letter).
  • Involve Engineering: If you want to design a professional-level product with collaboration and high performance, talk to your developers about how they are encapsulating user actions.

Useful Resources and Tools

mental-models-undo-redo crdt-for-designers conflict-resolution optimistic-updates-rollback