Avatar
Nesta aula você vai aprender a criar um componente de avatar de foto, ilustração e inicial usando diferentes propriedades no Figma.
O que é
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.
Basicamente, avatares são representações gráficas de usuários. Eles podem assumir três formas principais:
Fotos de Perfil: A imagem real enviada pelo usuário.
Iniciais (Placeholders): Quando não há foto, o sistema exibe a primeira letra do nome ou as iniciais do nome e sobrenome.
Ícones Padrão: Um ícone genérico usado como marcação de posição (placeholder).
Estados e Indicadores
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.
Avatar Groups
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:
Sobreposição Parcial: Avatares são ligeiramente sobrepostos para maximizar o uso do espaço.
Limite com Contador: Quando há muitos usuários, exibe-se um número (ex: +10) para indicar que a lista continua.
Interatividade: Efeitos de hover que podem destacar um perfil ou exibir informações extras ao passar o mouse.
Precisa de ajuda?
Em casos de dúvidas, crises existenciais ou necessidade de um designer amigo para conversar, considere uma mentoria particular.
O que é
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.
Basicamente, avatares são representações gráficas de usuários. Eles podem assumir três formas principais:
Fotos de Perfil: A imagem real enviada pelo usuário.
Iniciais (Placeholders): Quando não há foto, o sistema exibe a primeira letra do nome ou as iniciais do nome e sobrenome.
Ícones Padrão: Um ícone genérico usado como marcação de posição (placeholder).
Estados e Indicadores
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.
Avatar Groups
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:
Sobreposição Parcial: Avatares são ligeiramente sobrepostos para maximizar o uso do espaço.
Limite com Contador: Quando há muitos usuários, exibe-se um número (ex: +10) para indicar que a lista continua.
Interatividade: Efeitos de hover que podem destacar um perfil ou exibir informações extras ao passar o mouse.
Precisa de ajuda?
Em casos de dúvidas, crises existenciais ou necessidade de um designer amigo para conversar, considere uma mentoria particular.
Conteúdo:
componentes.design
v3
Conteúdo de qualidade não precisa custar seu salário.
Esse projeto é uma resposta à elitização do ensino de design no Brasil. Meu objetivo principal é entregar conteúdo de qualidade que é pequeno em preço mas gigante em valor.
Leia mais sobre minha visão e meus valores no manifesto do projeto.
componentes.design
v3
Conteúdo de qualidade não precisa custar seu salário.
Esse projeto é uma resposta à elitização do ensino de design no Brasil. Meu objetivo principal é entregar conteúdo de qualidade que é pequeno em preço mas gigante em valor.
Leia mais sobre minha visão e meus valores no manifesto do projeto.
componentes.design
v3
Conteúdo de qualidade não precisa custar seu salário.
Esse projeto é uma resposta à elitização do ensino de design no Brasil. Meu objetivo principal é entregar conteúdo de qualidade que é pequeno em preço mas gigante em valor.
Leia mais sobre minha visão e meus valores no manifesto do projeto.
componentes.design
v3
Conteúdo de qualidade não precisa custar seu salário.
Esse projeto é uma resposta à elitização do ensino de design no Brasil. Meu objetivo principal é entregar conteúdo de qualidade que é pequeno em preço mas gigante em valor.
Leia mais sobre minha visão e meus valores no manifesto do projeto.
componentes.design
v3
Conteúdo de qualidade não precisa custar seu salário.
Esse projeto é uma resposta à elitização do ensino de design no Brasil. Meu objetivo principal é entregar conteúdo de qualidade que é pequeno em preço mas gigante em valor.
Leia mais sobre minha visão e meus valores no manifesto do projeto.