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 design a community that would be missed if it were gone for our service design leaders."
Marc Fonteijn Ru ButlerIncrease your confidence, influence, and impact (through a Professional Community)
December 3, 2024
"Most of the primitives of how you do work are portable to climate tech from other industries."
Dem Gerolemou Alexis Oh Neef RehmanClimate technology fundamentals
May 15, 2024
"We use a holistic methodological approach combining explicit and implicit quantitative methods to fully get the user's perspective."
Daniela Magaña Flores Ariane Rahn Jeff Ephraim BanderAhead of Competition: Learn What UX Benchmarking Can Do for Your Business Today
March 10, 2022
"Hands-on activities like practicing user interviews and design sprint sketches gave people courage to try UX tactics in the real world."
Abbey Smalley Sylas SouzaScaling UX Past the Size of Your Team
January 8, 2024
"When project scope changes, designers or design advisors raise their hand to reassess and adjust staffing accordingly."
Patrick CommarfordDesign Staffing for Impact
January 8, 2024
"We fundraised to cover Tatiana’s salary for three months so she could launch this project very quickly after the war started."
Xenia Adjoubei Sean BruceEmpowering Communities Through the Researcher in Residence Program
March 29, 2023
"The only form of ethical persuasion that exists is when the goals of the persuader are aligned with the goals of the persuading."
Craig VillamorDesign Systems for Ethical Design
January 26, 2023
"User research is really only part of the information schema that we’re talking about."
Jon Fukuda Ellie KryslDesign Planning and Management Support
October 3, 2023
"Ambiguity is like doing a 3000-piece puzzle without knowing what the end picture looks like. You start piecing edges first."
Iain McMaster IHan ChengDesign and Product: from Frenemy to Harmony
November 29, 2023
