Os spacings são fundamentais para criar harmonia e organização visual nos layouts, garantindo que os elementos tenham o respiro necessário para facilitar a leitura e a interação do usuário.
✅ Atualizado (30/06/2025) - Ver detalhes
Junho 2025
30/06/2025
.Adicionamos a categoria de tokens largerOnTablet e dentro dela o token base-largeX-base
Abril 2025
23/04/2025
. Adicionamos 5 novos tokens fixedBeforeTablet à nossa coleção.Esses tokens nos permitirão fazer mais transições de tamanho entre devices
Sendo eles:
fixedBeforeTablet - small-base, base-small, base-large, base-largeX, large2x-largeX
. Além disso, atualizamos a visualização das referências no inicio dessas tabelas, para facilitar a leitura e identificação dessas transições na tabela.
Guia de Espaçamentos
Fixed
Espaçamentos Fixed se mantém os mesmos entre todos os breakpoints.
Ref
Tamanho
Token
Diferença
2px/dp
spacing-small3x
+2px/dp
4px/dp
spacing-small2x
+2px/dp
8px/dp
spacing-smallX
+4px/dp
12px/dp
spacing-small
+4px/dp
16px/dp
spacing-base
+4px/dp
20px/dp
spacing-large
+4px/dp
24px/dp
spacing-largeX
+4px/dp
32px/dp
spacing-large2x
+8px/dp
40px/dp
spacing-large3x
+8px/dp
48px/dp
spacing-large4x
+8px/dp
60px/dp
spacing-large5x
+12px/dp
72px/dp
spacing-large6x
+12px/dp
84px/dp
spacing-large7x
+12px/dp
96px/dp
spacing-large8x
+12px/dp
Regra dos 4px
A regra dos 4 pixels é um princípio de design amplamente utilizado para garantir consistência e coesão nos espaçamentos dentro de um layout, incluindo aqueles criados no Figma ou em outras ferramentas de design. A ideia por trás dessa regra é que, ao ajustar os espaçamentos entre elementos em um design, é preferível utilizar múltiplos de 4 pixels (ou seja, 4px, 8px, 12px, 16px, etc.).
Isso é útil por várias razões:
1
Consistência
Ao seguir múltiplos de 4 pixels, você cria uma grade visual que proporciona uma sensação uniforme e organizada.
2
Facilidade de implementação
Ao utilizar a regra, você facilita o trabalho dos desenvolvedores, pois eles podem traduzir as dimensões diretamente para valores de pixels no código.
3
Acessibilidade
Ajuda a criar espaçamentos mais consistentes e confortáveis para os usuários. Tamanhos de fonte, margens e preenchimentos consistentes podem contribuir para uma experiência mais agradável e acessível para todos.
4
Escalabilidade
Ao criar layouts baseados em múltiplos de 4 pixels, você está criando um sistema que é mais fácil de ajustar e adaptar a diferentes tamanhos de tela e dispositivos.
Vale ressaltar que, embora a regra dos 4 pixels seja uma diretriz comum, ela não é uma regra rígida que sempre deve ser seguida. Em alguns casos, pode ser necessário desviar dessa regra para atender a requisitos específicos do design ou da interação, ex.: na nossa tabela existe o valor de 2px de espaçamento para casos extraordinários.
No entanto, em geral, essa regra serve como uma boa prática para ajudar a manter a consistência e a qualidade do produto.
Dynamic
Espaçamentos Dynamic mudam de acordo com os breakpoints.
Existem 3 categorias para Espaçamentos Dynamic :
fixedAfterTablet
fixedAfterTablet são espaçamentos que têm um valor diferente apenas no breakpoint <700
Ref
Breakpoint <700
Breakpoint ≥700
Breakpoint ≥1200
Token
4 - 8 - 8
4px/dp
8px/dp
8px/dp
small2x-smallX
8 - 12 - 12
8px/dp
12px/dp
12px/dp
smallX-small
12 - 16 - 16
12px/dp
16px/dp
16px/dp
small-large
16 - 20 - 20
16px/dp
20px/dp
20px/dp
base-large
16 - 24 - 24
16px/dp
24px/dp
24px/dp
base-largeX
24 - 32 - 32
24px/dp
32px/dp
32px/dp
largeX-large2x
fixedBeforeTablet
fixedBeforeTablet são espaçamentos que têm um valor diferente apenas no breakpoint ≥1200
Ref
Breakpoint <700
Breakpoint ≥700
Breakpoint ≥1200
Token
0 - 0 - 2
0px/dp
0px/dp
2px/dp
null-small3x
12 - 12 - 16
12px/dp
12px/dp
16px/dp
small-base
12 - 12 - 24
12px/dp
12px/dp
24px/dp
small-largeX
16 - 16 - 12
16px/dp
16px/dp
12px/dp
base-small
16 - 16 - 20
16px/dp
16px/dp
20px/dp
base-large
16 - 16 - 24
16px/dp
16px/dp
24px/dp
base-largeX
16 - 16 - 32
16px/dp
16px/dp
32px/dp
base-large2x
24 - 24 - 32
24px/dp
24px/dp
32px/dp
largeX-large2x
32 - 32 - 24
32px/dp
32px/dp
24px/dp
large2x-largeX
32 - 32 - 40
32px/dp
32px/dp
40px/dp
large2x-large3x
largerOnTablet
largerOnTablet são espaçamentos que aumentam no breakpoint de tablet e voltam ao valor inicial no desktop.
Ref
Breakpoint <700
Breakpoint ≥700
Breakpoint ≥1200
Token
16 - 24 - 16
16px/dp
24px/dp
16px/dp
base-largeX-base
Linear
linear são espaçamentos que mudam em todos os breakpoints de forma linear entre eles.
Ref
Breakpoint <700
Breakpoint ≥700
Breakpoint ≥1200
Token
16 - 24 - 32
16px/dp
24px/dp
32px/dp
base-largeX-large2x
24 - 32 - 40
24px/dp
32px/dp
40px/dp
largeX-large2x-large3x
32 - 40 - 48
32px/dp
40px/dp
48px/dp
large2x-large3x-large4x
40 - 48 - 60
40px/dp
48px/dp
60px/dp
large3x-large4x-large5x
48 - 60 - 72
48px/dp
60px/dp
72px/dp
large4x-large5x-large6x
linear são espaçamentos que mudam em todos os breakpoints de forma linear entre eles, sendo de 8 em 8 pixels ou 12 em
Paddings
Os paddings são usados para criar espaçamentos internos nos componentes, garantindo que o conteúdo tenha uma boa legibilidade e proporções adequadas. Eles ajudam a evitar que textos, ícones ou outros elementos fiquem "grudados" nas bordas, proporcionando um design mais equilibrado e confortável para o usuário.
Diretrizes Gerais:
Utilize paddings para espaçar o conteúdo interno de componentes, como botões, cards, modais, campos de formulário e seções.
Priorize a consistência visual: escolha valores de padding que se alinhem aos tokens definidos na escala de espaçamento do design system.
Adapte os paddings conforme o tamanho do componente ou contexto de uso:
Elementos pequenos: prefira valores menores como xSmall ou Small.
Elementos médios/grandes : utilize valores como Base ou Large.
Seções amplas (ex.: headers ou rodapés): considere xLarge ou superior, conforme necessário.
Nos componentes criados em nosso UI Kit por padrão já estará aplicado os paddings recomendados para cada tipo, por exemplo modais.
As regras de aplicação de paddings por componentes ainda está sendo revisada, e será documentada em cada contexto e atualizada no geral nesta seção.
