Design Systems: A Beginner’s Guide

Hello there! I appreciate your presence here. It’s evident that the article has resonated well with the audience, and it’s clear that many individuals have a keen interest in design systems.

This insight led me to ponder: why not collaborate on building a design system together, starting from square one? If you’re as excited as I am, I encourage you to join me on both Medium and LinkedIn.

Together, we’ll initiate the process of crafting a design system right from its inception in Figma. Think of this as a streamlined and efficient design system cheat sheet, making the entire journey straightforward and swift.

Next Story in Create your own DS (Chapter Typography: Click here)

Hey there, product designers! Did you know that design systems can help you save time, improve collaboration, and create better products?

Design systems are a collection of reusable components, patterns, and guidelines that help teams create consistent and user-friendly products. They’re becoming increasingly important in product design, as they can help teams save time, improve collaboration, and create better products.

So, what are the benefits of using a design system?

Time savings

One of the biggest benefits of using a design system is that it can save you a ton of time. By reusing components and patterns, you can avoid having to reinvent the wheel every time you start a new project. This can save a lot of time and effort, especially for large teams or teams that work on multiple products.

Improved collaboration

Another benefit of using a design system is that it can improve collaboration. By providing a shared set of components and patterns, design systems can help teams collaborate more effectively. This is because everyone on the team will be using the same language and tools, which can help to reduce misunderstandings and errors.

Better products

Finally, design systems can help you create better products. By providing a consistent user experience across all products, design systems can help to create products that are easier to use and more engaging for users. This can lead to increased user satisfaction and loyalty.

How to create a design system

There are many different ways to create a design system. Some teams choose to create their own design system from scratch, while others choose to use a pre-existing design system. There are also a number of tools available to help teams create and manage design systems.

The most important thing is to choose a design system that is right for your team and your product. If you’re not sure where to start, there are a number of resources available to help you.

Here are some tips for creating a design system

• Start with the basics. Before you start creating components and patterns, it’s important to define the overall look and feel of your design system. This includes things like the typography, color palette, and overall style.
• Use a consistent naming convention. When you’re naming your components and patterns, it’s important to use a consistent naming convention. This will make it easier for people to find and use the components in your design system.
• Document your design system. Once you’ve created your design system, it’s important to document it. This will help people understand how to use the components and patterns in your design system.
• Iterate and improve. Design systems are never finished. As you use your design system, you’ll likely find ways to improve it. Be sure to iterate and improve your design system over time.

Basic components

The list of components to create in a design system will vary depending on the specific needs of the product or application. However, some common components that are often included in design systems include:

• Buttons: Buttons are one of the most common UI elements, and they come in a variety of shapes, sizes, and styles. A well-designed button system can make it easy for users to interact with your product.

• Inputs: Inputs are used for collecting user input, such as text, numbers, or dates. A well-designed input system can make it easy for users to enter their information and ensure that it is entered correctly.

• Cards: Cards are used to organize information into a visually appealing and easy-to-scan format. They are often used to display lists of items, such as products, blog posts, or news articles.

• Tabs: Tabs are used to organize content into different sections. They are a common way to provide users with a way to navigate between different parts of a product or application.

• Modals: Modals are used to display temporary windows that overlay the main content of a product or application. They are often used to collect user input or to provide information.

• Progress bars: Progress bars are used to indicate the progress of a task, such as loading a file or uploading a photo. They can help users to understand how long a task will take and track its progress.

• Dropdown menus: Dropdown menus are used to display a list of options. They are a convenient way to provide users with a way to select from a variety of options.

Naming components in a design system

When naming components in a design system, it’s important to use a consistent naming convention. This will make it easier for people to find and use the components in your design system.

Here are some common naming conventions for design systems:

• Kebab-case: This is the most common naming convention for design systems. It involves using lowercase letters, hyphens to separate words, and no spaces. For example, a button component might be named button-primary.
• Pascal case: This naming convention is similar to the kebab case, but the first word is capitalized. For example, a button component might be named ButtonPrimary.
• Sentence case: This naming convention involves using lowercase letters, spaces between words, and no hyphens. For example, a button component might be named button primary.

The best naming convention for your design system will depend on your specific needs. However, it’s important to choose a convention that is consistent and easy to understand.

Use descriptive names. The names of your components should be descriptive so that people can easily understand what they do. For example, a button component named button-primary would be more descriptive than a button component named button-1.

• Use short names. The names of your components should be short so that they are easy to type and remember. For example, a button component named button-primary is shorter and easier to remember than a button component named button-primary-color-blue.
• Avoid abbreviations. Abbreviations can be confusing, so it’s best to avoid them when naming components. For example, a button component named btn-primary would be more confusing than a button component named button-primary.
• Use internationalized names. If you plan on using your design system in multiple languages, it’s important to use internationalized names. This means that the names of your components should be translated into different languages.

Some popular design systems

Material Design by Google

Material Design is a design system that provides guidelines for how to create user interfaces that are consistent, accessible, and engaging. It is based on the principles of material, which is a physical metaphor for digital design.

Material Design system — m2.material.io

Carbon Design System by IBM

Carbon Design System is a design system that provides guidelines for how to create user interfaces that are consistent, accessible, and performant. It is based on the principles of atoms, molecules, organisms, and templates, which are building blocks for creating complex user interfaces.

Carbon Design System - Link | github.com

Ant Design by Ant Financial

Ant Design is a design system that provides guidelines for how to create user interfaces that are consistent, accessible, and internationalized. It is based on the principles of Ant, which is a set of design principles that are used to create user interfaces that are simple, clear, and efficient.

Ant Design design system — www.antforfigma.com

Atlassian Design System by Atlassian

Ant Design System is a design system that provides guidelines for how to create user interfaces that are consistent, accessible, and scalable. It is based on the principles of Atlassian, which is a set of design principles that are used to create user interfaces that are simple, efficient, and user-centered.

Atlassian Design System — atlassian.design

“A design system is a way to ensure that everyone on your team is using the same language and tools, which can help to reduce misunderstandings and errors.” — Brad Frost, author of Design Systems: The Principles of Reusable Design

Conclusion

Design systems are powerful tools that can help you improve the quality and efficiency of your product design process. If you’re looking for a way to save time, improve collaboration, and create better products, then you should consider using a design system.

And that’s a wrap! Piqued your interest? Just holler!

Twitter | Behance | Dribble | Medium | LinkedIn | Let’s Chat