One of the earliest Design Systems that made an impact on the industry were those of NASA. Since then, brands have begun to understand the undoubted benefits of a Design System. The wide availability of various tools like Figma, Sketch, InVision, and more has made it possible for companies both big and small to adopt Design Systems.

Three years back, as I began my career as a visual designer, I had little knowledge of Design Systems. I have since grown and learned more about Design Systems in depth. I now work closely with a design team building and maintaining their Design System library.
Here is how I got started with learning Design Systems and the art of building them:

1. Experiment and build product experiences with an existing Design System

Most designers start by learning the basics of Design Systems, but it was different for me. While working at an agency, I had the opportunity to work with a client that already had a robust Design System. The project was to design the products after developing a deep understanding of the guidelines defined in their Design System manual.

In doing so, it got me curious about how Design Systems of other brands work. I spent time researching & experimenting with design guidelines & libraries available out there. Here are a few good open-source options to get started with:

• Material Design & Human Interface Guidelines: A deep understanding and knowledge of material & iOS guidelines is a standard in the industry. It is well-defined with numerous case studies.
• Design Systems repo: A beautiful list of Design Systems curated for reference. My favourites are Carbon, Uber & Atlassian.
• The Figma community: Design System kits like Material design, Uber, and Atlassian can be your playground for learning how to use the components while referring to their respective Design System guidelines.

2. Read, Watch & Learn from the pros

In this digital learning era, numerous experienced designers share their knowledge on the A-Zs of Design Systems. Courses on Domestika.org, various medium articles, YouTube tutorials, and experimenting on Figma helped me build a Design System library for a 25-year-old IT company. Here are a few of the resources I still refer to from this experience:

• designsystems.com: A great repository from professionals on how to get started from the basics
• Domestika.org courses on App style guide creation & Introduction to Design Systems with Figma
• Figma channel on YouTube (this playlist can help you get started)
• Following and reading up on other Design Systems to understand how important it is to document the standards and guidelines.

3. Create a Design System from scratch and test it out

Creating a Design System from scratch & building it can be very fun. Yet nothing beats the excitement when you begin to use and test it.

The past six months of working with a Design Systems team have been a huge learning curve for me. Building the component library and documenting everything was just the beginning. Experiencing how other stakeholders of the organization use the Design System components I built taught me more.

Here’s why I think it is useful to work with a team of people after building a Design System

• A more robust Design System over time: While using your Design System to design screens and flows, it will be easier to notice the flaws and hence refine them even further. A Design System is constantly evolving, and this practice helps to make it more robust & flexible to use.
• Documentation is key: When various stakeholders refer to your Design System, a lot of questions arise. The practice of documenting every step in your Design System saves you the time and effort in explaining its usage, principles & guidelines repeatedly.
• The design-code relationship: (Optional) Working closely with a developer helps you understand how design translates to code. This helps the relationship between the two to be smooth and hence the Design System more effective. This is an added advantage I have recently begun enjoying and understanding better.

The world of Design Systems is growing with great insights from designers and developers across organizations. This is just the beginning of my journey with Design Systems, as there is still a lot to learn and experiment with. What started as a project to build a product using an existing Design System library has now evolved to helping brands build and maintain their Design System library. Learning to build Design Systems has made me look at designing products with a whole new perspective.

As rightly stated by Alex Shleifer, Former Chief Design Officer of Airbnb

“Here’s the simple truth: you can’t innovate on products without first innovating the way you build them.”