Escala & Espaçamento (Spacing)

Acesso Restrito!

Para acessar o conteúdo, você precisa de uma assinatura ativa!

Acesso Restrito!

Para acessar o conteúdo, você precisa de uma assinatura ativa!

Os fundamentos de um Design System

0
0

Escala & Espaçamento (Spacing)

Escala & Espaçamento (Spacing)

A escala é um aspecto muito importante no Design System, pois afeta a densidade da interface e a experiência do usuário. A densidade refere-se à quantidade de informações que podem ser exibidas em uma interface sem a necessidade de rolagem (scroll). Um alto nível de densidade pode aumentar a eficiência, mas também pode dificultar a interação e sobrecarregar o usuário. Portanto, encontrar o equilíbrio certo de escala e densidade é essencial.

Ao escalar Design Systems em empresas, a densidade pode se tornar um ponto de atrito. Equipes que projetam produtos com muitos dados podem ter dificuldade em usar componentes projetados para conteúdo de marketing, por exemplo. Portanto, é importante ter um sistema que guie e forneça ferramentas para ajustar a escala dos componentes de forma consistente.

A escala de um componente é determinado pela combinação de espaços (margin e padding) entre os elementos e a tipografia. Aumentar ou diminuir o tamanho da fonte e do espaçamento afeta a escala do componente. No entanto, muitas bibliotecas de componentes têm tamanhos inconsistentes, o que pode levar a problemas de consistência e usabilidade no seu design system e no seu produto.

Para unificar a escala dos componentes, é necessário estabelecer uma escala padrão, identificar os componentes atômicos (textos, icones...), determinar um tamanho-alvo e ajustar as propriedades de cada componente individualmente. É importante identificar os componentes que precisam ter um tamanho unificado e começar com os elementos básicos, como botões. A tipografia e o espaçamento também devem ser unificados para garantir consistência.

No entanto, nem todos os componentes precisam ter todos os tamanhos. Alguns componentes, como alertas e notificações, podem ter apenas um tamanho, enquanto outros, como botões e cards, podem ter diferentes tamanhos dependendo do contexto. É importante evitar o uso de tamanhos desnecessários e oferecer apenas os tamanhos que fazem sentido para cada componente.

Um sistema de nome muito usado na indústria, é o T-Shirt Size, que traz os tamanhos S,M,L e suas variações (xs, xxs, xl, xxl..) para nomear diferentes elementos do seu Design System, desde os espaçamentos até a tipografia.

Ao criar componentes, também é possível misturar e combinar tamanhos para criar contrastes e otimizar a experiência do usuário. O importante é encontrar o equilíbrio certo e garantir que os tamanhos sejam consistentes em todo o sistema.

Em resumo, a escala é um aspecto importante no Design System e afeta a densidade da interface e a experiência do usuário. Unificar a escala dos componentes é essencial para garantir consistência e usabilidade.


Introdução ao cfPRO
0 de 5 aulas concluidas
Introdução ao Design System
0 de 10 aulas concluidas
Governança & Documentação
0 de 11 aulas concluidas
Os fundamentos de um Design System
0 de 12 aulas concluidas

Os Fundamentos de um Design System

02:20

Acessibilidade no Design System

21:15

Baralho WCAG 2.2

14:53

Checklist de Acessibilidade [Toolkit]

05:57

Cores no Design System

14:24

Escala de cores no Figma (Color Ramp)

17:18

Escala & Espaçamento (Spacing)

18:13

Sistema de Grid (Grid System)

13:59

Tipografia Escalável

21:32

Iconografia

14:56

Design Tokens & Convenção de Nomes

40:40

Design Tokens [TOOLKIT]

24:49
Introdução ao cfPRO
0 de 5 aulas concluidas
Introdução ao Design System
0 de 10 aulas concluidas
Governança & Documentação
0 de 11 aulas concluidas
Os fundamentos de um Design System
0 de 12 aulas concluidas

Os Fundamentos de um Design System

02:20

Acessibilidade no Design System

21:15

Baralho WCAG 2.2

14:53

Checklist de Acessibilidade [Toolkit]

05:57

Cores no Design System

14:24

Escala de cores no Figma (Color Ramp)

17:18

Escala & Espaçamento (Spacing)

18:13

Sistema de Grid (Grid System)

13:59

Tipografia Escalável

21:32

Iconografia

14:56

Design Tokens & Convenção de Nomes

40:40

Design Tokens [TOOLKIT]

24:49

Data de lançamento

06/04/2025

Duração

18:13

Legendas

Português [PT-BR]

Tags

escala, densidade, design, componentes, tipografia

Introdução ao cfPRO
0 de 5 aulas concluidas
Introdução ao Design System
0 de 10 aulas concluidas
Governança & Documentação
0 de 11 aulas concluidas
Os fundamentos de um Design System
0 de 12 aulas concluidas

Os Fundamentos de um Design System

02:20

Acessibilidade no Design System

21:15

Baralho WCAG 2.2

14:53

Checklist de Acessibilidade [Toolkit]

05:57

Cores no Design System

14:24

Escala de cores no Figma (Color Ramp)

17:18

Escala & Espaçamento (Spacing)

18:13

Sistema de Grid (Grid System)

13:59

Tipografia Escalável

21:32

Iconografia

14:56

Design Tokens & Convenção de Nomes

40:40

Design Tokens [TOOLKIT]

24:49

Title Example

Message Example