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.
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.
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:
- Pages (Class Lineup)
- Templates (Complete Cars)
- Organisms (Axels + Window Set+ Body)
- Molecules (Wheels + Windows + Trunk + Hood)
- Atoms (Metal + Glass + Aluminum)
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.
