Glossário de Product Design
O que é componente de interface?
Também chamado de Componente, UI component
Componente é uma peça reutilizável da interface, como um botão, um campo de formulário ou um card, desenhada uma vez com todas as suas variações e usada em várias telas.
Em detalhe
Um bom componente tem propriedades claras (tamanho, estilo, ícone, estado) e funciona em qualquer contexto sem ser redesenhado. No Figma, isso vira variantes e propriedades; no código, um componente com props.
Componentes vão de átomos (botão, ícone) a peças maiores e específicas do produto (um card de decisão, uma linha de tabela com ações). Os específicos são os que mais aceleram o time, porque carregam regras de negócio já resolvidas.
Na prática
- Desenhe os estados de interação antes de usar o componente em telas.
- Evite variantes que só existem uma vez: talvez seja um caso especial, não um componente.
- Teste o componente com textos longos e em português, que costuma ocupar mais espaço que o inglês.