How to get into Design Systems

Do you sometimes lose track between the countless tasks at work, household, sports and whatever else might come up?

I certainly do feel that way. And even though I try to organize myself with note taking and journaling, I haven’t found a perfect system for my life yet. But for my work as a UX designer I immensely value a reliable system.

On the one hand, this of course includes a proper design system that helps me make the design accessible and reusable for others. On the other hand, it is also a helpful documentation and source for further inspiration.

What is a Design System?

A design system is a collection of standards defined for a product and/or whole organization to handle design related topics in a single source of truth. Most design systems include reusable components and pattern libraries.

In any case, it is not only a set of UI elements, but also includes, for example, the tone and voice of your design. In addition, the wording could also be part of the design system.

For example, is it documented whether it means remove, delete or discard on a button in order to get rid something?

What does a Design System include?

Style guide

It’s the basis of a design system and contains the smallest parts that are needed in almost all further elements of the design system.

  • Typography
  • Colors
  • Tone and voice
  • Writing style
  • Trademarks and logos

Component Library

This is the heart of the design system and probably requires the most attention over time. All individual elements of the user interfaces are documented here, including all their states and variants.

  • Buttons
  • Input field variants as text input or date picker
  • Dropdowns
  • Tool tips
  • Filter components like radio buttons, check boxes or sliders

Pattern Library

In contrast to the component library, in which individual UI elements are documented, the pattern library contains larger “components”, in which several components are combined and shows how they can work together in the interface.

  • Navigation
  • Forms
  • Filters
  • Bigger groups like login or sign up pages

Where to learn about Design System?

Books about Design Systems

If you love reading and are interested in design systems, you’re lucky. There are great books out there that will help you to dive deeper into setting up and creating a design system.

Practical UI Patterns for Design Systems

— Diana MacDonald

You will learn what UI patterns are, how you can use them and why consistency is king when it comes to product design. Diana MacDonald also shows in her book the best examples of very common UI patterns so that you get inspired for your own work.

Atomic Design

— Brad Frost

Learn how to create and maintain digital design systems, allowing your team to roll out higher quality, more consistent UIs faster than ever before.
atomicdesign.bradfrost.com

Expressive Design Systems

— Yesenia Perez-Cruz

Learn to build purposeful design systems that support and strengthen your team’s creativity.

Design System Bootcamp

If you not just wanna read but learn actively and see in action how to create an amazing design system you should join the Memorisely Design System Bootcamp.

It’s a part-time 5 week course with live classes, great teachers and wonderful class mates. I did the bootcamp in 2021 and learned things I now use in my everyday work as a solo designer, being also responsible for the whole design system work. If you have any questions regarding the bootcamp, just reach out to me.

I am really curious how you learn(ed) about Design Systems. What are your best tricks to get into working with them and how to handle them?

Connect with me on LinkedIn, Polywork or Twitter and tell me your story. I am looking forward to meeting you!

--

--

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
Marina Kraus

Marina Kraus

62 Followers

Product Designer | Work Anywhere | Content Creation | Connect on Mastodon 🐘 https://toot.community/@marina