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 sitehttps://proportio.app/, 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.