Componentes de UI

Blocos reutilizaveis (botao, campo, card) que constroem a interface com consistencia.

Hard

O que é

Componente de UI e o elemento reutilizavel e autocontido que forma uma parte da interface, como botao, campo de texto, menu, modal, card, checkbox ou dropdown. Cada um faz um trabalho especifico, carrega seu proprio estilo e se comporta igual onde quer que apareca.

A consistencia e o que mais importa nesse conceito. Um botao nao so parece igual sempre; ele tambem responde igual, ou seja, hover, foco, desabilitado e clique seguem a mesma regra em todo lugar. Voce define essa regra uma unica vez e depois usa o componente onde precisar.

Na pratica, eles costumam cair em quatro grupos: entrada, que coletam informacao; saida, que mostram informacao; navegacao, que movem a pessoa pelo produto; e container, que agrupam outros elementos. Um componente vira de fato reutilizavel quando e encapsulado, configuravel por propriedades e tem escopo claro, fazendo uma coisa bem feita. Por isso ele e a camada central de todo design system.

Em uma frase

A gente define o botao primario uma vez como componente, e a mudanca se propaga em todas as telas.

A pergunta que ele responde

Como evito ter seis versoes diferentes do mesmo botao espalhadas pelo produto?

Quando usar

Faz sentido pra construir interface com consistencia e velocidade, sem reinventar o mesmo elemento a cada tela.

Como não usar

O cuidado e nao recriar o mesmo elemento de formas levemente diferentes em cada tela, porque isso gera inconsistencia e custo de manutencao.

Na prática

Pense num produto sem sistema: depois de um ano, ele acaba com seis versoes diferentes do botao primario. Com componente, a mudanca e feita uma vez so e se propaga em tudo automaticamente.

Não confunda com

Vale separar componente de design token. O token e o valor cru, como uma cor ou um espacamento, enquanto o componente e o bloco ja montado que usa esses tokens. Ou seja, o token e o ingrediente, e o componente e a peca pronta feita com ele.

D

Em inglês

User Interface (UI) Components

Pronúncia

iu-ai com-po-nents

Também chamado de

componentes de UI, UI components, componentes de interface

Origem

Relacionado ao Atomic Design de Brad Frost (atomos, moleculas, organismos).

Fonte

Saiba mais

Brad Frost, Atomic Design