Avatar

O componente Avatar é um elemento essencial em interfaces modernas, servindo como a representação visual primária de um usuário no sistema. Seja em aplicativos de redes sociais, ferramentas de colaboração ou dashboards financeiros, entender sua estrutura e variações é crucial para qualquer designer de interface.

1. O que é um Componente Avatar?

Basicamente, avatares são representações gráficas de usuários. Eles podem assumir três formas principais:

1. Fotos de Perfil: A imagem real enviada pelo usuário.

2. Iniciais (Placeholders): Quando não há foto, o sistema exibe a primeira letra do nome ou as iniciais do nome e sobrenome.

3. Ícones Padrão: Um ícone genérico usado como marcação de posição (placeholder).

2. Estados e Indicadores de Disponibilidade

O avatar raramente vive isolado. Ele é frequentemente combinado com outros componentes, como Badges, para transmitir informações adicionais:

Status de Disponibilidade: Indicadores visuais (geralmente bolinhas coloridas) que mostram se o usuário está Online (verde), Offline (cinza) ou Ocupado/Não Perturbe (vermelho ou laranja).

Notificações: Pequenos indicadores que informam a quantidade de mensagens ou alertas pendentes.

3. Avatar Groups (Agrupamentos)

O Avatar Group é uma variação usada para representar uma coleção de usuários, comum em fóruns, tópicos de discussão ou como prova social em landing pages. Suas principais características incluem:

1. Sobreposição Parcial: Avatares são ligeiramente sobrepostos para maximizar o uso do espaço.

2. Limite com Contador: Quando há muitos usuários, exibe-se um número (ex: +10) para indicar que a lista continua.

3. Interatividade: Efeitos de hover que podem destacar um perfil ou exibir informações extras ao passar o mouse.

4. Estrutura Técnica no Figma (Propriedades Essenciais)

Para criar um componente robusto e escalável no Figma, deve-se configurar propriedades que permitam variações rápidas. De acordo com as fontes, a estrutura ideal inclui:

Dimensões e Formatos

1. Tamanhos (Size): Grande (48px), Médio (40px) e Pequeno (32px).

2. Formatos (Shape): Redondo (round) e Quadrado (square) com cantos arredondados.

Propriedades de Instância

1. Type: Alterna entre foto, texto (iniciais) e ícone.

2. hasBadge (Booleana): Ativa ou desativa a presença do indicador de status.

3. Instance Swap: Permite trocar o ícone interno por qualquer outro da biblioteca do sistema.

4. Text Property: Facilita a alteração das iniciais sem precisar clicar diretamente na camada de texto.

5. Dicas de Implementação e Estilização

Uso de Auto Layout: Utilize o comando Shift + A para alinhar elementos e garantir que o badge se mova corretamente em relação ao círculo.

Efeito de Recorte: Para que o badge ou avatares sobrepostos pareçam "recortar" o elemento abaixo, utilize um stroke (borda) da mesma cor do fundo da interface.

Espaçamento Negativo: Em grupos de avatares, utilize valores negativos no Auto Layout (ex: -12px ou -16px) para criar o efeito de empilhamento.