Tradecraft
Published in

Tradecraft

Eight Things You Need To Know About Design Systems

I attended a whole lot of talks so you don’t have to.

1. Why design systems are important.

Image result for figma design systems
Source. Figma‘s designsystems.com is their resource for design system learning.
  • Design systems improve the user experience through the repeated use of familiar and proven patterns. Designing anything from scratch leaves room for error, so try to use what already works.
  • Design systems improve workflow efficiency. Product teams know exactly how components of new features should look and how to implement them.

2. What a design system is.

Karri Saarinen, Design Systems Lead @ Airbnb, gave this definition:

A set of shared, integrated patterns and principles that define the overall design of the product

If you have little experience with design systems, a definition so broad could be perceived as ambiguous or unhelpful. The lack of detail is key, though. Design systems don’t require a more specific definition. They need the room to be whatever an organization requires for design and its implementation to move fast without breaking things.

3. Any design system is better than no design system at all.

Diana Mounter, GitHub
Primer and other systems use flags to quickly indicate whether or not components are deprecated.
Diana showed this funny blunder. Ideally, components would not hinder readability of the exemplified code.

4. How to get started on a design system.

The first thing you see at Shopify’s Polaris.
  1. How is design being implemented now?
  2. How should it be implemented?
  • Getting everybody onboard with your design system will be a lot harder. Your people won’t understand the value of something they didn’t help create.
  • Nobody will know what the source of truth is. Kiss your consistency goodbye.
What an engineer thinks when you say, “style guide”

5. Design systems document everything.

Microsoft’s Fluent documentation on Radio Buttons.
  • Be guiding, not prescriptive. Leave room for creativity by giving a spectrum of what’s acceptable. Principles should be a guide for decision-making.
  • Limit the number of principles. Shopify started with 13, but they now have it boiled-down to 4. They removed “top down” and “middle management” principles that didn’t do much for those designing and implementing the design first-hand in day-to-day work. Grassroot principles are gold.
  • Reflect your principles in what you create. For the type of user that refers to the design system in-context and learns through example, this will do a lot to ingrain your principles and remain consistent.
  • They can’t limit your brand or product principles. Design systems should be subsystems of your organization, so make sure they fit within the whole.
  • Keep evolving your principles. Apply user-centered design to the creation of your principles so that they reflect your system and reality accurately. Otherwise, consistency will break down as other users apply your principles.
  • Use visual examples wherever possible.
  • Keep sentences short and actionable.
  • Use dos/don’ts.
  • Make your don’ts less obvious. Model them after realistic mistakes that could result from misinterpretation
Source: material.io

6. Design systems need to integrate accessibility.

Check out this tool for checking accessible contrast ratios at WebAIM.

1 in 7 people are disabled. That’s over a billion people.

Still, John had more to say. A user is disabled as soon as their hands are full of groceries. If they find themselves traveling in a foreign country with no local language skills, they’re disabled. If you live long enough, you‘ll probably end up permanently disabled one day.

  • Learn about the accessibility technology available to your users. OS technology like iOS Magnifier and Windows Narrator are most available, but add-on products like the Xbox Adaptive Controller exist, too. And some technology isn’t limited to use by disabled users, especially voice assistants.
  • Test your components with those accessibility technologies turned on. Pretty simple. Turn on technologies like iOS VoiceOver and ensure they work with your system components in a useful manner.
  • Test your product with users of varying disability. Of course, you need to bring your product in front of users who are on a spectrum of different mental, physical, and situational disabilities.
Microsoft’s Xbox Adaptive Controller is one of the latest accesibility technologies for users.

7. Color and illustration can and should be systematic.

Shopify’s Polaris color palette
  • Don’t let your illustrations take the spotlight. They should increase delight without distracting the user from their goal.
  • Use accessible colors. Check your color ratios!
  • Be diverse, but realistic. Airbnb’s illustrations are based on real people, so they “feature” Donald Glover and Jennifer’s random Facebook friends. Airbnb also spoke with organizations and authorities on disabilities that gave them the idea to use a subtle cue like headphones.
  • Test your illustrations. Oh man, can you believe it? This piece of design needs to be tested as well. Showing the China-specific illustrations to the Beijing office allowed Jennifer to figure out that big-chested Chinese males wouldn’t be the most relatable.

8. How to scale a design system.

Karri Saarinen: How a design system will evolve with scale.
  • Build your components using those primitives, and build your patterns with those components. This will ensure consistency while allowing for a degree of flexibility and malleability.
  • Remain flexible. You need flexibility to allow for spacing, text truncating, different text sizes for accessibility and internationalization, different color choices, custom components, and good ol’ creativity.
  • Make your design specs platform-agnostic. DLS defines their components in JSON, a ubiquitous data standard that allows for automated translation to platform-specific styles like CSS.
  • Add team-specific libraries, but keep them under control. Airbnb limits their team libraries to experimental and specific components. So, team libraries are monitored and components are sent up the chain if they are suitable core components. 70 components make up 60% of Airbnb’s front-end across all platforms!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store