DEV Community

Leonardo Rosa
Leonardo Rosa

Posted on • Edited on

2 1

Design system by a person don't well-know

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.

style guide

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.

components

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.

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay