Dia 7: Início do seu design system
Parabéns por completar a primeira semana! Agora vamos organizar a casa e criar a base para todos os seus futuros projetos.
Parabéns por chegar até aqui!
Completar 7 dias seguidos de prática é uma vitória imensa e te coloca em um grupo seleto de pessoas que transformam a intenção em ação. O hábito que você está construindo é mais valioso do que qualquer layout perfeito. A jornada do design é uma maratona, não uma corrida de 100 metros. **Não desista!** O progresso é garantido se você continuar firme. Estamos só começando!
O que é um design system, afinal?
Pense em um Design System como uma **caixa de LEGO oficial** para um projeto. Em vez de criar uma peça nova toda vez que precisa de algo, você consulta a caixa e usa as peças que já existem e foram aprovadas. Isso garante que todo o "castelo" (ou site, ou aplicativo) que você construir tenha a mesma aparência, o mesmo encaixe e a mesma qualidade.
Ele é a "fonte única da verdade" que alinha designers e desenvolvedores, economizando tempo e garantindo consistência.
Os seus primeiros "tokens" de design
"Tokens" são os átomos do seu Design System. São as decisões de design fundamentais que você já tomou nesta primeira semana! Eles são as variáveis do seu design.
- Tokens de cor: Sua paleta primária, secundária e de destaque.
- Tokens de tipografia: Sua escala tipográfica (H1, Corpo, etc.).
- Tokens de espaçamento: Seus valores baseados em 8px (8, 16, 24...).
- Componentes (Átomos maiores): Seus botões e campos de formulário, com todos os seus estados.
Vídeos para sistematizar o conhecimento
Entenda o conceito de Design System e veja como começar a organizar o seu no Figma.
O que é Design System? (Canal Caio Gonzalez)
Seu desafio de hoje: o bibliotecário do design
Hoje o desafio é ser o organizador do seu próprio projeto. Você vai criar uma única página ou frame no Figma para documentar tudo o que fez e definiu na Semana 1, criando a primeira versão do seu Mini Design System.
Checklist do desafio:
- Crie uma seção para Cores e adicione sua paleta primária, secundária e de destaque.
- Crie uma seção para Tipografias e demonstre todos os estilos da sua escala (H1, Corpo, etc.).
- Crie uma seção para Espaçamentos e mostre exemplos da sua regra de 8px.
- Crie uma seção para Componentes e organize os botões e campos de formulário que você desenhou.
- (Bônus) Use os recursos de "Styles" e "Components" do Figma para transformar seus estilos e elementos em itens reutilizáveis.
Concluiu a primeira semana? Comemore!
Compartilhar a conclusão de uma etapa importante mostra comprometimento e disciplina.