Pular para conteúdo

Gerenciamento de Estilos (Styles)

Objetivos da Aula

  • [ ] Compreender os conceitos de Gerenciamento de Estilos (Styles).
  • [ ] Praticar as ferramentas relacionadas no Figma.
  • [ ] Criar um exemplo prático.

Conteúdo Teórico

Gestão de Estilos (Styles)

Para manter a consistência e agilizar o trabalho em equipe, usamos estilos globais para cores, textos e efeitos.

graph LR
    S[Estilo Global] --> C[Cor]
    S --> T[Tipografia]
    S --> E[Efeitos/Sombras]
    C --> |Atualiza| L1[Camada 1]
    C --> |Atualiza| L2[Camada 2]
  • Vantagens: Mudou o estilo em um lugar, muda em todo o projeto.
  • Tipos de Estilos: Color Styles, Text Styles e Effect Styles (Glow, Drop Shadow).
  • Organização: Use barras / para criar pastas (ex: Brand/Primary).

Conceito

Estilos são o primeiro passo para criar um Design System. Eles garantem que todos os designers usem a mesma "língua" visual.

Como Criar no Figma

O painel de estilos fica visível quando nenhum elemento está selecionado.

$ # Atalhos de Estilos
$ Ctrl + Alt + C: Copiar propriedades
$ Ctrl + Alt + V: Aplicar propriedades
$ Edit Style: Clique no ícone de quatro pontos (Grid)

Dica

Sempre nomeie seus estilos de acordo com a função, não com a cor. Use Primary Action em vez de Blue, pois a cor pode mudar no futuro!

Em Prática

Vamos converter nossa paleta da Aula 05 em Color Styles oficiais e criar nossos primeiros Text Styles para títulos e corpos.

Atenção

Camadas vinculadas a estilos não permitem mudanças de cor manuais. Você deve "desvincular" ou editar o estilo global.

Resumo

Nesta aula aprendemos sobre: - Padronização com estilos globais. - Criação de bibliotecas locais de cores e textos. - Organização profissional de assets.

🎯 Próximos Passos