Sombras, ou drop shadows em Inglês, são essenciais para criar a sensação de elevação e hierarquia de alguns componentes na interface. Veremos sombras frequentemente em estados de botões, modais ou dropdowns, e elementos que precisam de evidência.
Para este guia, estou usando o sistema de superfícies criado pelo @micka_design que contém até 8 níveis de elevação e funcionam para light e dark mode. Usaremos de base mas simplificaremos diversos valores e variáveis para se adaptar a um cenário mais simples no Figma.
Anatomia
A versão para light mode é mais simples do que a versão para dark mode porque em interfaces escuras, dependendo do seu fundo, as sombras podem desaparecer e precisam de reforços visuais. Leve isso em consideração quando for definir sua paleta de cores.\
Na versão light temos o elemento Outline, que é a borda do componente; e o elemento Drop, que forma o conjunto de sombras de acordo com cada nível de elevação.
Anatomia de sombras em light mode
Na versão dark temos a presença do elemento Highlight que afeta a parte superior do componente e o elemento Ring, que é uma borda interna mais clara envolvendo todo o componente.
Anatomia de sombras em dark mode
Níveis de elevação
Variáveis no Figma
Estilos de sombras
Aula exclusiva para membros
O que está incluso:
Novas aulas todos os meses
20% off em mentorias particulares
Recursos exclusivos
Gravações de mentorias em grupo
Grupo exclusivo no Discord
