Leonardo Maldonado Full Stack Developer. JavaScript, React, TypeScript, GraphQL.

Design system tips for developers

5 min read 1420

A picture of the JavaScript and CSS logos.

Design systems are everywhere (without us noticing). They help to increase the productivity of teams around the world, help companies build better products with a more mature level of standards and principles, and improve the consumers’ experience.

Building a design system is a hot topic right now, especially in the development community.

Today, it’s easier to build a design system than it was 10 years ago when we didn’t have such a mature level of frameworks, libraries, and tools.

To create a robust and consistent design system that can be delivered for consumers through many different platforms requires time and a lot of hard work.

A good design system involves a lot of hard work, along with a lot of time studying, analyzing, prototyping, developing, and testing to deliver the best experience for the users.

Why build a design system?

To build a successful company, one thing that’s essential is communication.

A company that doesn’t have a very communicative team will probably not succeed, and it will certainly fail to deliver a nice product or experience for its users.

A company that wants to be scalable, maintainable, consistent, and robust needs to create and follow a set of principles, standards, and guidelines for better development and experience.

This set of principles, standards, and guidelines can help the team succeed and create awesome products by creating a better way to communicate. Communication improves the experience for the whole team, resulting in a better final product for the consumers.

That’s the idea of a design system. A design system is a system of principles, standards, guidelines, and components that are used to create better products.

We made a custom demo for .
No really. Click here to check it out.

Design systems help build better and faster products. They facilitate consistency, eliminates friction and inconsistencies among components, behaviors, standards, and improve productivity and maintainability of the existing products in a company.

A chart of a design system.

A successful design system takes care of everything. The system is built on principles, guidelines, and standards that center on achieving consistency, reusability, maintenance, scalability, and value for customers.

In case you’re wondering how a design system can help a company and the lives of its own team to deliver better and more consistent products, here a few things a design system can do for you:

Eliminate friction and inconsistencies

Imagine a company that has many professionals in different countries, most of these professionals working on the same product.

If they don’t create a process of principles, standards, and guidelines to follow, they can very easily create friction and inconsistencies in the product.

A design system can help in this case by providing the process and showing them what to do, how to do it, and when to do it.

Improve alignment, speed, and experience

Knowing what to do and when to do it is a process. A design system can help in this situation to enable a more aligned and communicative team.

When the team knows exactly what needs to be done to complete a certain task, the speed and the quality of the work will be significantly better.

Brand awareness

Brand awareness reflects how familiar a consumer is with a certain brand and whether they recognize this brand.

A successful design system can help spread brand awareness so the consumer can be more familiar with the brand and more likely to recognize it quickly.

A successful design system

A successful design system is more than beautiful colors, spacing, and a few different UI components.

Create a design system is not an easy task and needs to be done carefully from the beginning of the process so the final result can be consistent and robust.

It’s important to know how to avoid certain errors during the development process to ensure a design system functions well.

We’re going to cover some points that we, as developers, must pay attention to while developing our own design systems or working in existing ones.

Understand your company’s culture

A company’s culture is the result of a combination of ethics, values, and goals that connect the people who work in an organization.

The company’s culture affects how people who work at an organization feel about their job, the values that they believe in, the expected future of the organization, their preferences, and how they feel their jobs affect people’s lives.

Understand your company’s culture is very important in the process of creating the design system.

A company with a well-defined culture will end up having a design system with clear principles and standards.

The design system will also help improve the culture of the company by creating standards and principles that the people who work there will follow so they can deliver products faster, more consistently, and more efficiently. People will feel more empowered to contribute to the organization.

Accessibility

Every company wants their products to be consumed by everybody, but when we’re talking about accessibility on the web, many people don’t see accessibility as a priority.

Inclusivity should be a core value for every company nowadays. People with different forms of disabilities also have access to the internet, and they need to be able to have a pleasant experience when using any product.

A picture of the words 'accessibility is a principle.'

Developers should pay attention to this topic, and a consistent design system should factor in accessibility. Accessibility should be a principle in a design system, not an extra feature.

One thing that helps a lot is to create a page dedicated only to accessibility and show how it works in the design system.

For example, the Lightning Design System for Salesforce has a page where they share their guidelines and patterns for accessibility. Create something design system consistent, robust, unique, but that can be used for everybody. That’s what a successful design system sounds like. Follow the [WCAG Web Content Accessibility Guidelines.

Consistency is key

As a company grows, products get bigger, new features are added, and one principle needs to be top of mind during these changes: consistency.

Developers should be aware of it and pay attention to details. Consistency is essential for every design system to be successful.

A brightly colored image set next to a simple, plain black image.

One of the things that might compromise the consistency of a design system is flexibility.

For example, if your design system is going to be used in many different platforms  — such as iOS, Android, or Apple Watch  —  the design system will have to be enforced and support different platforms.

The design system needs to have the same effectiveness and level of consistency across all platforms.

A successful design system is a system that ensures consistency for all of its principles, standards, and components.

Use design tokens

Every design system will end up having a lot of different values for different components such as spacing values, animations values, color values, etc.

How to store those values and make sure that they are been used correctly is the question.

Design tokens are visual atoms that can store design attributes such as HEX, pixel, colors, spacing, typography, and many other values.

Every value that’s going to be used in the design system can and should be stored in a design token for better consistency and maintainability of that design system.

Some design tokens displaying colors including white, gray, black, green, yellow, red, and blue.

Similar to a variable in a programming language, design tokens represent cohesive and consistent decisions inside the design system. They make sure that every piece is systemically unified and uses the right values.

Documentation is very important

Documentation is very important nowadays, especially for developers. It helps developers to not only keep track of changes, ensure consistency, and understand the purposes of different features, but it also describes how a tool or product works and how to get started with it.

A screenshot of the words 'document everything.'

A design system can be really beautiful, with its modern typographies, beautiful colors, and awesome UI components.

But it will be not useful at all without proper documentation, or with a documentation that is poorly-written.

Documentation is so important because of other parts of a design system such as principles, components, etc. Keep in mind that you are probably not the only one that will read, use, and edit a design system.

A comprehensive design system documentation can help people get started faster and more easily. It will take them straight to the point that they want, without having to read and search a lot.

Conclusion

In this article, we learned about how to create better design systems that can help companies and developers to have a better experience when creating new products by having a set of principles, standards, and components to use.

: Debug JavaScript errors easier by understanding the context

Debugging code is always a tedious task. But the more you understand your errors the easier it is to fix them.

LogRocket allows you to understand these errors in new and unique ways. Our frontend monitoring solution tracks user engagement with your JavaScript frontends to give you the ability to find out exactly what the user did that led to an error.

LogRocket records console logs, page load times, stacktraces, slow network requests/responses with headers + bodies, browser metadata, and custom logs. Understanding the impact of your JavaScript code will never be easier!

.
Leonardo Maldonado Full Stack Developer. JavaScript, React, TypeScript, GraphQL.

Leave a Reply