Na prática + Reflita

Na Prática

Explorando um design system por dentro

Agora que você entende o que são design systems, tokens e como eles se organizam, é hora de ver isso funcionando de verdade. E a melhor parte: esse exercício é 100% no Figma, não precisa de código nenhum.

Se você estiver só no celular, faça uma versão alternativa: abra um app que você usa sempre e compare três telas diferentes. Liste quais botões, títulos, espaçamentos e padrões se repetem. Isso já é treino de pensamento sistêmico, sem abrir Figma nem código.

1. Abra uma Design System library no Figma. Vá em Community e busque por "Material Design 3 Design Kit" (é gratuito). Duplique o arquivo para o seu espaço.
2. Encontre um componente de botão. Navegue até a página de componentes e localize os botões. Observe: quantas variantes existem? Primário, secundário, outlined, text-only, com ícone, sem ícone, estados de hover, pressed, disabled... Um único botão pode ter mais de 20 variantes. Cada uma delas é uma combinação de tokens e propriedades.
3. Inspecione os tokens. Selecione um botão e olhe no painel da direita: quais cores estão sendo usadas? Elas podem aparecer de três jeitos: valor fixo (#1976D2), estilo (M3/sys/light/primary) ou variável (color/primary). No kit oficial do Google você vai encontrar estilos: foi assim que o time implementou os tokens semânticos ali. Repare no nome: "sys" é a camada semântica e "ref" é a primitiva, exatamente o caminho de tokens primitivos e semânticos que vimos no capítulo.
4. Veja a cascata acontecer. Instale o plugin gratuito Material Theme Builder (também do Google), rode ele no arquivo e troque a cor-fonte (source color). O plugin regenera o tema inteiro de uma vez: botões, cards e ícones mudam juntos. Essa é a cascata de tokens em ação, automatizada. Quer ver a versão manual? Procure na Community o arquivo "Material 3 Design Kit (Variables + Properties)", onde os tokens são Variables com alias: mude uma cor primitiva e observe a mudança se propagar até os componentes.

Isso é só no Figma, você não precisa abrir terminal, escrever código ou instalar nada. Está tudo visual, tudo clicável. O objetivo é que você sinta como um design system funciona por dentro, não apenas leia sobre.

E se você está em transição de carreira, preste atenção: esse é o tipo de conhecimento que diferencia um designer que entende sistemas de um que só entrega telas. Quando uma vaga pede "experiência com design systems", é disso que estão falando. Saber navegar dentro de uma library, entender como tokens se conectam e como mudanças cascateiam. É isso que mostra pensamento sistêmico no portfólio.