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
Title Example
Message Example