My Notes on Design Systems: Introduction

This post is part of a series about everything I have learned about design systems and I’ll write it from a designer's point of view.

What is a design system?

A design system is a collection of design tokens and reusable components defined by specific standards to reduce redundancy and maintain consistency while designing projects that scale.

Things most design systems I have encountered contain:

1. Design tokens; things like color palette, spacing, font families and sizes, shadow effects, and more.
2. Reusable UI components such as buttons, inputs, cards, chips, or other components that might be native to a specific use case.
3. Documentation; a clear usage guide for all tokens and components included in the design system.

Design systems in Figma

Figma is a design tool we use at ClickPesa and GetPaid while designing our products. Figma makes it easy to work with design systems because it provides a way to publish the design system file to be available for the entire team where team members can access all the components and design tokens in any design file in the team. You can check out Ant Design System, an open-source design system published in the Figma community.

Why design system

Here are some why and why not use a design system I have learned so far.

Why use a design system

1. To maintain consistency across the designs created for a particular product.
2. To reduce redundancy that might occur while designing.
3. Design maintainability. Design systems allow for changes to be made once and applied across the design.

Why not use a design system

1. It's a lot of work. It takes time to create and maintain.

Create a design system from scratch or use a premade one

Creating a design system from scratch

Making a design system from scratch allows you to add only the items that you will need for your use case but as it grows it becomes more difficult to maintain which will increase the workload to you or your design team.

Using a premade design system

Using a pre-made design system is convenient because it is created and maintained by a third party whether it is open source or a vendor that sells design system(s).

A challenge I faced with this approach was that pre-made design systems contain a lot of things that I don’t need in my use cases and don’t have a lot of things that I need in my use cases so I had to get in there and add things that I’ll have to also maintain as I go. I suppose this is a less workload compared to maintaining a custom one.

In the next article in this series, I’ll go more in-depth about using a premade design system and customizing it to your specific use case so be sure to follow the ClickPesa publication so you don’t miss it.