Design systems & car manufacturing

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

What’s System Design? Designing for scale.

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

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.

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

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

Designer, Xoogler, cat herder.