Nessa aula, abordamos o tema de variáveis de espaçamento no Figma e como elas podem ser utilizadas para estruturar de forma eficiente o design system de um projeto. Aqui estão os pontos importantes que você, deve se atentar:
- Simplificação de Nomes de Variáveis: Optamos por nomes curtos para as variáveis, como "Space-0", para facilitar a compreensão e o uso por parte dos desenvolvedores.
- Criação de Variáveis Primitivas: Inicialmente, criamos variáveis primitivas para espaçamento, que vão do valor zero até 128. Essas variáveis são fundamentais para estabelecer uma base de espaçamento consistente em todo o design.
- Uso de Variáveis no Figma: Demonstramos como criar e aplicar essas variáveis no Figma, mas ressaltamos que elas não devem ser aplicadas diretamente em componentes, e sim servir como referência para variáveis semânticas.
- Estruturação de Pastas: Ajustamos a estrutura de pastas para que as variáveis de espaçamento fiquem organizadas de maneira lógica e acessível, facilitando o trabalho do desenvolvedor.
- Variáveis Semânticas: Explicamos a importância de criar variáveis semânticas, que são usadas para dar significado e intenção ao uso das variáveis primitivas no design. Por exemplo, criamos uma variável semântica chamada "--gap-16" para definir o espaçamento entre elementos.
- Restrições e Aplicações de Variáveis: Mostramos como definir restrições e aplicações específicas para as variáveis, como curvatura de borda, largura, altura e padding, garantindo que elas sejam usadas corretamente dentro do design system.
- Ocultação de Variáveis Primitivas: Discutimos a opção de ocultar as variáveis primitivas na publicação da biblioteca no Figma, para que os designers que utilizam o design system tenham acesso apenas às variáveis semânticas.
- Documentação e Dev Mode: Enfatizamos a importância de documentar as variáveis e mostramos como o Dev Mode do Figma pode ajudar a identificar e sugerir variáveis com base nos valores definidos.
- Convenção de Nomes e Taxonomia: Por fim, mencionamos a necessidade de estabelecer uma convenção de nomes e uma taxonomia clara para os tokens, o que será abordado mais adiante no curso.
Lembre-se de que o objetivo dessa aula é garantir que você entenda como estruturar e utilizar variáveis de espaçamento de forma eficaz, para criar um design system coeso e fácil de manter.
Data de lançamento
21/04/2025
Duração
Legendas
Português [PT-BR]
Tags
variáveis, espaçamento, Figma, designsystem, semânticas