Existem muitas dúvidas sobre como aplicar um Design System e como organizá-lo. O Design System é um conjunto de bibliotecas de design e conteúdo de uma empresa ou produto, com diretrizes de estilo e componentes codificados reutilizáveis e documentados, para a construção de interfaces de produtos e sistemas.
Neste post, explicaremos o que são os componentes de um Design System e quais são as suas aplicações.
O que são os componentes?
Os componentes são as partes visuais codificadas dentro do design system, e servem para a construção da parte visual de um produto. Suas características principais são sua reutilização, flexibilidade, consistência e modularidade.
Cada design system pode adotar um modelo de divisão que facilite o seu uso na equipe. Na Tuia, usamos um modelo que consiste em separar estilos de design, componentes simples e componentes mais complexos:
Tokens
Os Tokens são parâmetros de estilo para o projeto. Eles definem os valores visuais para a construção do design system a partir de termos genéricos, trazendo flexibilidade e unidade em todos os produtos. Ou seja: são cores, fontes, animações, estilos de texto, entre outros.
A biblioteca de tokens é importante para o Design System, pois eles facilitam a criação de novos componentes e variação de componentes já existentes, evitando o retrabalho.
Esses parâmetros são tanto de forma visual quanto semântica, pois os desenvolvedores precisam se referir a um determinado token pelo mesmo nome, independente da plataforma. Digamos que uma marca usa um tom de ciano. Caso essa cor seja alterada, a alteração precisa ocorrer em todas as plataformas automaticamente.
Os tokens são divididos em duas categorias:
Brand tokens: conhecidos como tokens de marca. Eles são variáveis relacionadas à identidade visual de um produto e/ou empresa. Incluímos nesta categoria as cores de marca, cores de feedback e erro e também famílias de fontes.
Global tokens: como o nome sugere, são variáveis que seguem as mesmas regras de valores, independente do produto inserido. São, por exemplo, espessuras de borda, valores de opacidade e valores e tamanhos de espaçamentos.
Base Components
Os base components ou componentes de base são os componentes que servem de estrutura para outros mais complexos. Eles auxiliam a manter a consistência das interfaces e também são chamados de componentes primários. Os componentes de base também facilitam a construção de novos layouts.
Os base componentes mais comuns em um projeto são:
Avatar: é o componente que representa o perfil da pessoa usuária em produtos digitais, podendo vir acompanhado de uma ação, como direcionar a pessoa para uma página de perfil, com mais informações sobre o cadastro.
Button: são os famosos botões de sites, que permitem fazer escolhas e realizar ações através de um clique, como ir para uma página e enviar formulários. Ele pode estar acompanhado por ícones à direita do título.
Card: são containers com conteúdo e ações sobre um determinado assunto relacionado ao produto, podendo ser clicáveis ou não. Eles necessitam ser fáceis de ler e interpretar, por isso os elementos (textos, imagens, links, ícones, entre outros) precisam seguir uma hierarquia de informação.
Checkbox e Radio Button: muita gente confunde esses dois elementos, mas eles são diferentes. Tanto o Checkbox quanto o Radio Button são componentes onde é possível selecionar e desmarcar itens em uma lista, porém o checkbox, como o nome sugere, possui o formato de um quadrado, e permite selecionar mais de uma opção dentro de uma lista. Já com o Radio Button é possível selecionar apenas uma opção para prosseguir com a navegação e, ao contrário do Checkbox, possui o formato circular.
Link: são os elementos clicáveis em formato de texto, que direcionam a pessoa usuária para uma nova página, interna (dentro da plataforma) ou externa. Os links geralmente possuem a cor azul no texto.
Components
Os componentes são construídos a partir dos base components. São elementos mais complexos, que são essenciais para a construção de produtos digitais. Esses componentes atendem a uma ou mais funções dentro da interface e podem oferecer soluções, marcações, avisos e outras ações às pessoas usuárias.
Os components mais comuns em um projeto são:
Accordion: é o componente que permite controlar se uma seção de conteúdo será exibida ou não na tela. Ele comprime verticalmente uma lista de itens como nomes, thumbnails, blocos de texto, links, etc.
Carousel: é o componente que permite colocar vários conteúdos de imagem em sequência com rolagem horizontal, como os carrosséis de parques de diversões. Essa rolagem pode ser manual ou automática.
Filter: ele permite filtrar informações relevantes de uma página, reduzindo os itens mostrados e permitindo escolher apenas o que for de seu interesse. O filtro deve ter um indicativo do que está exibindo e também uma opção de limpar as seleções feitas.
Modal: é o componente criado para indicar informações que exigem atenção e ação imediata da pessoa usuária. São exibidos como um pop-up, ou seja, ficam sobrepostos ao conteúdo da tela principal, fazendo com que a pessoa precise interagir com ele para retornar. Pode ser usado para indicar erro, sucesso ou atenção. Também é utilizado quando o sistema não consegue continuar o processo por falta de informação, como ao fazer um cadastro ou login.
Toast alert: serve para definir alertas e mensagens de sistema, tanto mobile quanto desktop. Eles podem ser classificados como uma confirmação, erro ou incerteza, de acordo com a ação da pessoa usuária. Em alguns casos, possui um tempo limitado de visualização. Visualmente, ele necessita do uso de cores de feedback para diferenciar as mensagens de acordo com sua função. Por exemplo: as mensagens de erro são acompanhadas da cor vermelha, as de alerta da cor amarela e assim por diante.
Como fazer uma lista de componentes
Para uma melhor organização do projeto, devemos seguir alguns passos para definir quais são os componentes necessários. O primeiro passo aqui na Tuia é fazer um inventário dos componentes já existentes. Com a análise e compilação dos componentes do produto, conseguimos ter uma dimensão de quais possuem inconsistências e quais devemos sugerir para o produto.
Aprenda mais sobre Design System
Acompanhe nossa série de posts sobre o assunto:
UI Kit e Design System: quais são as diferenças entre os dois e quando aplicar
Design Principles: o que são e qual a sua importância para o Design System
O que é o Manual de Tom de Voz e seus benefícios
Nós da Tuia
Aqui na Tuia temos soluções para empresas que querem desenvolver um Design System. Você pode conferir em nossa página de serviços.
Nos acompanhe também pelo LinkedIn.
Acompanhe a Tuia também pelo LinkedIn.
