Design systems have lately become a popular topic in the best companies and organizations. They work as a guideline for visual identity, creating a framework to keep consistency, but they can also be part of the development workflow saving time and simplifying the communication between designers and developers.

In the past few years, I have been involved in the creation or adoption of different design systems. Creating a design system is a complex but exciting process that involves many team members of the organization. Usually, if you already have a running product, you can start by analyzing your current state and creating a user interface library. This library will help you to define the scope of your project and to build the foundations, components and your communication style. If you don’t have a product in the market, you can be more flexible and focus on how you would like it to be with fewer constraints.

Once you have defined your design system, the real challenge will be to make sure your teams embrace it. You will need to promote, update and maintain it to support the needs of your community. Your team needs to understand the benefits of adopting the new system and hopefully contribute to it. Everyone must feel owner of the system as the success of the project will also rely on them.

It may seem a complicated process, and it can involve a significant investment, especially if the project is already of a considerable size, but the long-term benefits are substantial. A design system will allow your team to be focused on how things should work while maintaining high quality and cohesive design, and will create a single source of truth for your organization.

What should you include in your design system?

A design system can cover different aspects of your development process. Some companies have just the visual layer, and it serves as a tool for designers to achieve consistency and brand empowerment, but other teams are bringing their development a few steps further by creating tools to prototype and create production-ready code from the design. This latter approach brings developers and designers to a closer workflow where any member of the tech department can improve the overall experience you offer to your customers.

Popular design systems

Here you can find a list of some of the most popular design systems with total or partial public access, and some tools that will enable you to go a step further in your design system implementation.

Polaris, Shopify
https://polaris.shopify.com/

Material Design, Google
https://material.io/design/

Fluent, Microsoft
https://www.microsoft.com/design/fluent/

Lightning, Salesforce
https://lightningdesignsystem.com/

Pajamas, Gitlab
https://design.gitlab.com/

Carbon, IBM
https://www.carbondesignsystem.com/

Tools

Figma

This popular web-based tool allows several team members to work simultaneously on the same project. You can design, edit, comment, and prototype within the same tool. And its libraries, components and styles can be used to store your design system elements and components.

https://www.figma.com/

Figma screenshot

Framer X

If you feel comfortable coding, Framer will bring your prototyping skills to a high level. Even you can create design components just using visual elements; the tool really stands out when using code components. These components are built using React, and they will allow you to create complex interactions and rich animations.

https://www.framer.com/blog/posts/design-systems-in-framer/

Framer X Store screenshot

InVision

The Design System Manager integrated into InVision can be used to maintain your design system easily accessible for any member of your organization. InVision Studio will also be very attractive if you want to produce click-through prototypes with minimal effort.  

https://www.invisionapp.com/design-system-manager

InVision DSM
InVision DSM screenshot