Pular para conteúdo

Bibliotecas e Design Systems

Objetivos da Aula

  • [ ] Compreender os conceitos de Bibliotecas e Design Systems.
  • [ ] Praticar as ferramentas relacionadas no Figma.
  • [ ] Criar um exemplo prático.

Conteúdo Teórico

Bibliotecas e Design Systems

Um Design System é a "fonte da verdade" de uma empresa. Ele vai além de componentes visuais, incluindo documentação, tom de voz e regras de uso.

graph TD
    DS[Design System] --> F[Fundamentos: Cores, Tipografia]
    DS --> C[Componentes: Botões, Inputs]
    DS --> P[Padrões: Layouts, UX]
    DS --> D[Documentação: Como usar]
  • Bibliotecas de Equipe: Publique seus estilos e componentes para que outros arquivos possam usá-los.
  • Tokens de Design: Valores semânticos que ligam o design ao código (ex: color-primary-main).
  • Escalabilidade: Permite que centenas de designers e desenvolvedores trabalhem no mesmo produto com consistência.

Conceito

Design System não é um projeto com fim. É um produto vivo que cresce e evolui conforme a necessidade do negócio e dos usuários.

Ecossistema de Apoio

Designers não criam tudo do zero. Usamos recursos externos para acelerar o processo.

$ # Recursos Digitais
$ Imagens: Unsplash, Pexels
$ Ícones: FontAwesome, Lucide
$ Ilustrações: Humaaans, Undraw

Dica

Ao usar bancos de imagens, procure por fotos que tenham a mesma iluminação e estilo visual para manter a unidade do seu Design System.

Em Prática

Vamos criar uma biblioteca de ícones pictográficos e organizar nosso primeiro "Mini Design System" com cores, fontes e 3 componentes básicos.

Atenção

Um Design System sem documentação é apenas um arquivo de UI Kit. Explique o PORQUÊ das decisões, não apenas o como.

Resumo

Nesta aula aprendemos sobre: - Conceito de Design System vs UI Kit. - Publicação de bibliotecas no Figma. - Integração de elementos de apoio (ícones e imagens).

🎯 Próximos Passos