Design Systems

What is a design system?

A design system is a collection of reusable UI components. In it, you can define UI elements such as buttons as well as text elements and other elements that you're sure will be reused throughout the design file. This makes the design workflow very easy.

Why are design systems useful?

One of the major benefits of a design system is consistency. Having a design system that has things like colors, typography, spacing and many such other items clearly defined ensures consistency across the design file. It also makes the design workflow smoother and faster.

Design System Course

If you would like to learn more about the process, we at Design+Code made a course on how to create a design system using Figma as your design tool.

Create your own design system

There are a lot of resources and tools available to help you get started with design systems. In the upcoming sections, we've discussed some amazing ones.

Modulz

Modulz is an interesting tool. It is a visual code editor that is focused on creating design systems. Currently, they are in private beta but you can apply for access to it through their website.

Lonna

Lonna by Devin Abbott is a WIP. It contains a number of tools to create design systems such as components. Lonna also has a GUI editor for working with component files. Currently, there's support for iOS, macOS, ReactDOM, React Native and React SketchApp.

Design Systems for Figma

DSFF is a collection of design systems. Most of these are free. All you've to do is duplicate the Figma file and use it as an inspiration.

Base Web

Base Web is created by Uber. It is an open source React UI framework that can help any team start the process of creating a design system. Base Web provides various reusable UI components such as the date picker that you can easily use.

Pajamas by GitLab

Pajamas is a very interesting design system. It contains a lot of things including accessibility bluelines as well as a component library.

Clarity

Clarity is the first and only design systems conference. It is a platform where professionals such as designers, developers as well companies come together to discuss how they work with design systems. You can register to attend the conference via their website.

Further information

There still a lot you can learn about the design system process. Spectrum by Adobe, is one of the most complete design system examples. Carbon by IBM, is also another good example of how to organize a design system. Another good example is Uber, Marco Paglia talks more about how the Uber design system is structured.

Working with components

To create a design system, we need to have a good understanding of components. For this exercise we will show you two examples on how to create components and how to work with them. Let’s start with this Navigation Bar Control that you will find in the exercise file.

Once, you convert the assets to components, you will notice that the color of the frame that hosts the assets will change from light blue to purple. Also, a small icon will appear on the top left corner of the frame, which represents the main component. This is the parent component.

Now, we will rename both components and add the word switch/ before the name. Adding this text will help us group both components. We will see more specifically how to work with these in the next steps.

Now we can go to the left side bar and click on the Assets tab, so we can preview our components. If we select a component, you will notice that in the right side bar of the UI we also have our two components as options, and we can switch between them by selecting them from the side bar.

We can apply the same steps for the new examples. Let’s select all the cards and convert them to components. Rename the cards and add the word cards/ to all the components so we can group them.

Now select any of the cards, and you will notice that on the right side bar we will have the rest of the cards as options. From the side bar, you can select any of the cards, and it will change in the UI.

Conclusion

Creating a design system may sound like a lot of work but in the long run it's very efficient and you'll actually end up saving time. Having all your reusable components in the same place makes the design file more organized and easy to use. It will also ensure that the design remains consistent throughout.