Best Practices when Creating and Maintaining a Design System
Summary
Key Insights
-
•
Design systems serve as agreements that align design, development, product, and marketing teams around consistent UI rules.
-
•
The atomic design model builds UI from basic tokens to atoms, molecules, and templates, promoting scalable component creation.
-
•
Separating styles (colors, typography) from symbols (UI components) enables easy global updates in design systems.
-
•
A device-agnostic organization of components simplifies multi-platform updates by grouping variants inside each component.
-
•
Flat component hierarchies prevent navigation complexity and speed up UI element discovery and usage.
-
•
Documenting design system decisions and architecture helps onboard new team members and maintain consistency over time.
-
•
Managing overrides restricts what can be changed in component instances, reducing inconsistencies and errors.
-
•
Establishing a design system council with cross-functional stakeholders ensures alignment and evolves the system thoughtfully.
-
•
Version starring in tools like Sketch allows safe iterative work without disturbing team members until updates are published.
-
•
Including content guidelines and examples in design system documentation is essential but often underdeveloped and manual.
Notable Quotes
"Design system is basically an agreement that helps create a sense of consistency and familiarity in all the UIs that you create."
"Keeping styles separate from symbols makes it much easier to update colors or typography across your entire system."
"If you organize your design system device agnostic, you can update one component with all desktop, mobile, and tablet versions inside."
"Try to make your component hierarchy as flat as possible because tall, nested structures become hard to navigate."
"Respect your design system rules to ensure consistent experiences across your product and teams."
"Establish a design system council where all stakeholders gather regularly to maintain and evolve the system."
"Use the latest version starring feature so your team only gets updates when they’re ready, avoiding constant notifications."
"Iteration is the golden rule of design, including iterating on your design system rules themselves."
"Leave some space for creativity in your design system so designers can innovate without breaking consistency."
"Document your design decisions and architecture visually so new team members can quickly understand your system."
Or choose a question:
More Videos
"We stuck with NPS because it was a pure metric with a long history we could trend, instead of muddying things with loyalty or revenue."
Shipra KayanHow we Built a VoC (Voice of the Customer) Practice at Upwork from the Ground Up
September 30, 2021
"The Library of Congress web presence was a findability nightmare, like the Winchester Mystery House."
Peter MorvilleThe Architecture of Understanding
May 13, 2015
"Don’t just run away from something. Make sure you are running towards something."
Renee ReidBecoming a ResearchH.E.R (Highly Enterprise Ready)
June 3, 2019
"You don’t need special software to get started analyzing gestures and embodied actions; you just need video and a notepad."
Dane DeSutterKeeping the Body in Mind: What Gestures and Embodied Actions Tell You That Users May Not
March 26, 2024
"Multiple payment providers aren’t just a feature; they’re an accessibility lifeline for people who can’t read or reach their credit card easily."
Sam ProulxOnline Shopping: Designing an Accessible Experience
October 3, 2023
"A thousand paper cuts add up: many small frustrations can lead to someone leaving your digital experience."
Andrew Custage Michael MallettThe Digital Journey: Research on Consumer Frustration and Loyalty
March 29, 2023
"Why be here if you’re not going to be here."
Shelby SwitzerMaking Space for Community Knowledge-sharing in a Distributed World
December 10, 2021
"Right now, there’s a fear of being replaced by AI, and while a lot of that’s overblown, researchers have a legitimate reason to feel uncomfortable."
Llewyn PaineCoexisting with AI: A practical guide for researchers to navigate tools, ethics, and integration
March 11, 2025
"A metaphor is like a flashlight—it shines on some things and keeps others in the dark."
Robin BeersNavigating organizational systems: Rethinking researcher’s role in driving change
March 13, 2025
