Why design systems are like auto manufacturing

Alex
4 min readMar 28, 2020

--

This write-up is meant to act as an inspirational run-down regarding system design in your everyday product design process.

Photo by adils photography on Unsplash

What’s System Design? Designing for scale.

System Design is the construction of UI components that power the look and feel of a product in a highly scalable and manageable way. The NYC Subway system is an interesting example of how system design plays an essential role in everyday physical life and why we should appreciate its thoughtful guidelines and execution.

Using visual and system design to map the NYC subway

Ultimately, resulting in a Design Platform for your team, org and or company and streamlining the following:

  • Asset Management & Modification
  • Guidance & Scalability
  • Design velocity
  • Standardization across teams

Chemistry can help you visualize how it works

Enter Atomic Design. Some designers have heard of it, some already use it, and some probably have no clue what I’m talking about. Atomic Design is a systematic approach to visualizing the construction of a system.

Foundational building blocks to a design system typically include:

  • Atoms — Guidelines, layout, color, typography, elevation, keylines & spacing
  • Molecules — Headers, paragraphs, buttons, inputs, imagery, cards
  • Organisms —Sections, clusters, carousels
  • Templates — Pages, bottom sheets
  • Pages — Product made up of different templates

Atoms make up Molecules, Molecules makeup Organisms, and so on..

This allows designers to manage and communicate their work in a more intelligent and scalable way, using complex symbols and overrides to manage projects between large sets of people.

Ultimately, organizing components by the sum of their parts. A calendar widget might be comprised of text, tabs, and dropdowns as one complete part.

Not a Chemist? Let’s try something simpler — Cars.

The overall concept isn’t too hard to grasp, but it might help to look at it through another more consumer-facing lens. How can we apply the same above conventions to how a car is built and released off an assembly line?

Let’s break it down using this analogy:

  1. Pages (Class Lineup)
  2. Templates (Complete Cars)
  3. Organisms (Axels + Window Set+ Body)
  4. Molecules (Wheels + Windows + Trunk + Hood)
  5. Atoms (Metal + Glass + Aluminum)
Rough example using above approach with Figma

Staying connected & in sync with Figma

Figma is a great tool for managing this process. Unlike Sketch, its server-side ability to create and scale out system libraries for your team is staggeringly more intuitive and lighter weight than its competitors.

Managing a design system in such a way allows for a cascading effect to occur between your components. With stronger ties to front end development, Figma takes web conventions and applies it to designing products.

Updating and or modifying a button used on 34 pages should be a non trivial task, and same goes for managing its various states and cases — and a design system can make this all possible.

Anyways, I think that’s enough to digest for now. Encouraging all designers to explore the above approaches and better scale your designs not only for yourself, but everyone that you work with.

You might also like

How Graphic Design Legend Massimo Vignelli Cracked the NYC Subway System

Creating Atomic Components in Figma

Atomic Design

--

--

Alex
Alex

Written by Alex

FAANG & Startup Alum. Case Studies, Articles & Rants.

No responses yet