Anatomia (de componente)

O detalhamento das partes que formam um componente ou um fluxo.

Hard

O que é

Anatomia, no design de interface, e a descricao das partes que compoem um elemento. Um botao, por exemplo, tem rotulo, fundo, borda e estados. Saber nomear cada uma dessas partes e o que permite recriar o componente igual em qualquer tela, sem precisar chutar.

Por isso a anatomia e a espinha de um design system. Quando a estrutura de cada elemento esta documentada, qualquer pessoa de design ou de codigo consegue reconstruir sem improvisar, o que significa menos inconsistencia e menos retrabalho la na frente.

O conceito tambem vale pra fluxo, e nao so pra componente. Mapear a anatomia de um checkout, ou seja, cada passo e cada bifurcacao, ajuda a enxergar onde mora a complexidade desnecessaria e onde esta o ponto fraco.

Em uma frase

Antes de estilizar, vamos fechar a anatomia do card pra todo mundo montar do mesmo jeito.

A pergunta que ele responde

Quais sao exatamente as partes desse componente pra eu conseguir documentar e refazer igual?

Quando usar

Ajuda na hora de documentar um componente, montar um design system ou destrinchar um fluxo pra achar o gargalo.

Como não usar

O cuidado e nao tratar a anatomia como um exercicio teorico que ninguem volta a consultar depois de pronto.

Na prática

Pense num time que, antes de abrir o Figma, lista as partes do card (imagem, titulo, tag, acao). Com essa lista combinada, todo mundo desenha igual.

Não confunda com

Vale separar anatomia de estilo. A anatomia diz quais partes existem, enquanto o estilo diz como elas parecem. Tanto e assim que dois botoes podem ter a mesma anatomia e um visual completamente oposto.

D

Em inglês

Anatomy

Pronúncia

n/a

Também chamado de

anatomia de componente, partes do componente

Origem

n/a

Fonte

Saiba mais

Nathan Curtis, artigos sobre anatomia de componentes em design systems