Dia 12: Tabs e acordeões

Mestre da organização: aprenda a agrupar conteúdo denso de forma limpa e intuitiva, sem sobrecarregar o usuário.

O problema: muita informação, pouco espaço

Muitas vezes, precisamos mostrar diversas seções de conteúdo relacionadas em uma única tela. Se simplesmente colocarmos tudo um abaixo do outro, a página fica gigante e confusa. Tabs e Acordeões são padrões de design de "revelação progressiva": eles escondem a complexidade e mostram ao usuário apenas o que ele precisa ver no momento.

Tabs (abas): navegando no mesmo nível

Pense nas abas de um fichário. Cada aba revela um conteúdo diferente, mas todos fazem parte do mesmo "dossiê". Em UI, as Tabs são usadas para alternar entre diferentes visualizações dentro de um mesmo contexto. São ideais para um número pequeno de seções (geralmente de 3 a 5).

Quando usar? Em um perfil de usuário (Abas: "Posts", "Fotos", "Amigos"), em uma página de produto (Abas: "Descrição", "Ficha Técnica", "Avaliações").

Acordeões (sanfonas): expandindo e contraindo detalhes

Um Acordeão (ou "Accordion") é uma lista de cabeçalhos empilhados verticalmente. Ao clicar em um cabeçalho, ele se expande para revelar seu conteúdo, como uma sanfona. É perfeito para conteúdo que pode ser resumido em um título, como uma lista de perguntas.

Quando usar? O caso de uso mais clássico é uma página de Perguntas Frequentes (FAQ). Também é ótimo para formulários longos divididos em etapas ou para menus de navegação complexos.

Vídeo para expandir seu repertório

Aprender a criar esses componentes de forma interativa no Figma é um grande diferencial.

CRIANDO ANIMAÇÃO DE TABS NO FIGMA (Canal Dicas de site)

Seu desafio de hoje: o organizador de conteúdo

Sua missão é projetar um componente de Tabs e um de Acordeão, mostrando que você sabe como lidar com interfaces ricas em informação.

Checklist do desafio:

Desenhe um componente de Tabs para a página de um produto. As abas devem ser: "Descrição", "Especificações Técnicas" e "Avaliações". Mostre o estado de uma das abas como "ativa".
Desenhe um componente de Acordeão para uma seção de "Perguntas Frequentes" (FAQ). O componente deve mostrar pelo menos 3 perguntas, com uma delas "aberta" (exibindo a resposta) e as outras "fechadas".
Dica de mestre: Preste atenção nos ícones! Use um `+` para o acordeão fechado e um `-` para o aberto, ou uma seta `>` que gira para baixo `v` quando aberto.