Modular design

An easy way to understand design systems is to think about modular design. Any industrially produced object is composed of smaller modules. These modules are easy to replicate, reuse, repair or replace.

Cars are a great example of modular design. There are around 30.000 parts forming a single car. If the car is malfunctioning we can trace back to the part that is failing and replace it instead of buying a new car. We can also evolve and improve the car's functionality over time by changing parts.

Modularity in digital design

We can translate the modular design technique to digital products. In the digital industry that technique is called design systems. Instead of designing and building the entire product as one piece, we build small individual components that come together to compose the final product.

Apple macOS interface is a great example of a digital product built with a design system. The OSX contains a collection of components that compose features like Finder and Settings.

There is a gap between the components and the final product, we need to understand how to put these pieces together in a meaningful and consistent way. To fill that gap a complete design system provides, not only components but also documentation and tools to facilitate the usage of these.

Lens design system

Lens is the design system that we use to build Loom products. It provides components, tools, and documentation for designers and developers.

Lens impact

  • Scalability: by removing, adding, and changing components we can grow our products in many directions.
  • Speed: we significantly reduce design and development ambiguity by reusing elements.
  • Consistency: we provide users a consistent user experience and reduce the learning curve.

External resources

Over the past years design systems have become a standard for building modular and scalable products, here are some examples:

Introducing design systems and the power of scale from Design Systems Handbook by InVision

Next up