First of all, I’m not an UI/UX professional, I’m Software Developer. But, I started this article because I saw in my personal projects there's redundant things between components. However, it did become a sadly job to update a property of a component per example. Thus, I did think how I can to makes better them? Answer to the ask, it is design system.
Design system
A design system is a complete set of principles, rules and best practices to manage design at scale using reusable components and patterns.
Why use a design system?
For create a system, can you has a lot work, but a good and robust design system, can saved hours of work and provide benefits to scale and the team*:*
- Development work can be created and replicated quickly and at scale;
- Consistency;
- Focus at more complex problems;
- It creates a patterns, to across products, channels and teams.
What do need to create design system?
I highlight two principal topics to makes a great design system:
- Style guide;
- Components;
Style guide
Style guide provide guidelines for way the your brand creating interfaces, like as: colors, typography and tone of voice. Generally, created by UX/UI team with developers team. The style guide is a tool that helps the team for maintaining consistent product and modular format.
Components
Components are reusable UI elements of our design system. Generally, it's clear, quickly and abstract enough to use at many projects and variety of use cases. Examples of components: button, text field and dropdown.
Generally components has to least two properties:
name: a name to component, quickly and easier to understand;
description: a description to the component, can you set details about the component like as: how it works and where be can used per example.
Conclusion
It's not only UI/UX professional should be do know about design system and little bit concepts about it, for create a design system requires a lot works but can saved time to reusable and scale design. However, it is need shared with developers team too, for makes an achieve a good and don’t out of curve design.
Top comments (0)