Nessa aula, discutimos um aspecto crucial do nosso design system: o espaçamento, também conhecido como spacing. Abordamos a importância de definir a distância e o relacionamento entre os elementos de um design para criar uma interface coesa e esteticamente agradável.

Pontos importantes que destacamos na aula incluem:

• Conceito de Spacing: Refere-se aos espaços que determinam a relação de distância entre os elementos de um design.

• Grids Comuns: A maioria dos Design Systems utiliza grids baseados em incrementos de 4 ou 8 pixels para definir o espaçamento.

• Tipos de Espaçamento: Definimos dois tipos principais - valores unitários para tokens primitivos, que são referências básicas, e espaçamentos semânticos, como o GAP, que dão propósito e contexto ao uso do espaço entre elementos.

• Nomenclatura e Escala: É crucial definir uma nomenclatura clara para os espaçamentos e escolher uma base (como 16, 8 ou 4 pixels) para construir uma escala flexível que atenda às necessidades do produto e facilite a comunicação com os desenvolvedores.

• Uso de T-shirt Sizes: Discutimos a possibilidade de usar tamanhos como XS, S, M, L, XL, etc., para definir espaçamentos, o que será explorado mais adiante no curso.

• Ferramentas e Visualização: Apresentamos o site, que ajuda a visualizar diferentes proporções de espaçamento, tipografia e iconografia, e como eles se relacionam entre si.

• Aplicação Prática no Figma: Demonstramos como definir os valores de espaçamento no Figma, que servirão de referência para a criação de componentes e layouts futuros.

• Hierarquia e Harmonia: Enfatizamos a importância de uma estrutura hierárquica e harmônica no design, que pode ser alcançada através de um sistema de espaçamento bem definido.

• Decisões de Design Consistentes: Com espaçamentos padronizados, podemos garantir consistência no design, como por exemplo o espaçamento de 12 pixels entre um ícone e um texto dentro de um botão.

Essa aula passa uma compreensão clara de como definir e aplicar espaçamentos em um design system, permitindo criar designs mais estruturados e consistentes. A aplicação no Figma é um fator essencial para visualizar os conceitos discutidos nessa aula.