Summary
Design systems are essential for creating cohesive and scalable products. By providing a shared set of design guidelines, components, and styles, design systems help ensure consistency and efficiency throughout the design process. In this talk we’ll go through the best practices when creating and maintaining a Design System including different strategies, approaches to token creation, making good use of overrides, setting up principles and guidelines and how to scale a design system so that it becomes useful for design a dev teams alike.
Key Insights
-
•
Design systems function as agreements across design, development, product, marketing, and business teams to ensure consistency and speed.
-
•
A bottom-up approach starting with tokens (colors, typography, spacing) creates a solid foundation for scalable design systems.
-
•
Separating styles (colors, text styles) from symbols (UI components) in Sketch makes future updates easier and more reliable.
-
•
Organizing components in a device-agnostic way groups all versions (desktop, mobile, tablet) together, simplifying maintenance and updates.
-
•
Keeping component hierarchy flat avoids overwhelming designers with deep nested structures, improving usability and speed.
-
•
Managing overrides strictly in symbols helps enforce design rules by preventing breaking changes at the component instance level.
-
•
Establishing a design system council with representatives from design, dev, marketing, and business ensures collaborative evolution and consistency.
-
•
Using version starring in Sketch enables publishing only stable design system updates to users, avoiding constant disruptive notifications.
-
•
Content style and usage guidelines are often missing in design systems but should be included to align UX writing and messaging with design.
-
•
Iterating design system rules and allowing room for creative deviations help keep the system flexible and engaging rather than rigid and dull.
Notable Quotes
"Design system is basically an agreement that helps create consistency and familiarity in all the UIs you create."
"If you don't use styles for colors and typography, updating your brand color later means changing every component manually."
"Organizing your components device-agnostic makes updating all versions easier, even if it adds some complexity during design."
"Try to keep your component hierarchy as flat as you can — don't overdo levels or it becomes infinite navigation."
"Respect your design system rules to create consistency, but revisit them periodically because things evolve."
"Establish a design system council to bring together designers, developers, marketing, and business folks regularly."
"Managing overrides means you can prevent designers from changing things like colors or fonts in component instances."
"Starring versions lets you keep working on updates without pushing notifications to your whole design team until ready."
"The content portion of design systems is often manual and missing; you should include writing style guides and examples."
"Leave space for creativity in your design system because if you don't, it becomes dull and boring to design."
Or choose a question:
More Videos
"Without shared organizational goals and customer-focused OKRs, democratization efforts fragment and fail to scale."
Jemma Ahmed Steve Carrod Chris Geison Dr. Shadi Janansefat Christopher NashDemocratization: Working with it, not against it [Advancing Research Community Workshop Series]
July 24, 2024
"Design systems are not just UI components but people and culture working together."
Nina JurcicThe Design System Rollercoaster: From Enabler and Bottleneck to Catalyst for Change
October 3, 2023
"The design system is a living, breathing thing that evolves constantly because you’re constantly learning and responding to needs."
Nathan Curtis Nalini P. Kotamraju Jack Moffett Dawn ResselDiscussion
June 9, 2016
"When tactical metrics end up on the left side and KPIs on the right side of the compass, that signals we need a longer conversation about what we measure."
Saara Kamppari-Miller Nicole Bergstrom Shashi JainKey Metrics: Comparing Three Letter Acronym Metrics That Include the Word “Key”
November 13, 2024
"We added an in-product feedback framework and used the UMUX scale to get feedback at scale and distinguish true pain points."
Malini RaoLessons Learned from a 4-year Product Re-platforming Journey
June 9, 2021
"The website redesign is much more than a redesign; it’s a complete change in content and design strategy."
Mackenzie Cockram Sara Branco Cunha Ian FranklinIntegrating Qualitative and Quantitative Research from Discovery to Live
December 16, 2022
"Even virtually, we are a community obligated to treat each other with kindness and respect."
Bria AlexanderOpening Remarks
June 9, 2021
"Many product teams have never come face to face with their revenue numbers before."
Jackie HoLead Effectively While Preserving Team Autonomy with Growth Boards
January 8, 2024
"Private cars are parked 95% of the time, making them highly inefficient in urban environments."
Dan HillDesigning for the infrastructures of everyday life
June 4, 2024