Espaciado

El espaciado se aplica al padding, al gap y a la separación entre bloques. En esta lección verás la escala de DesignToken101, de dónde sale y cómo encajar en ella tus propios valores.

En esta página

• La escala de DesignToken101
• De dónde sale la base de 4 px
• Encajar tu inventario en la escala
• Espaciado negativo
• En Figma
• Lo que te llevas

La escala de DesignToken101

Trece pasos. El número del nombre es proporcional al valor: 100 = 4 px.

Fíjate en cómo crecen los saltos: de 2 en 2 px al principio y de 32, 48 o 64 px al final. Entre dos elementos pequeños, 2 px se notan; entre dos secciones de una página, no. Por eso la escala tiene más pasos abajo que arriba.

Figma guarda el valor en píxeles y el CSS lo escribe en rem. Por qué, lo viste en Tipos simples.

De dónde sale la base de 4 px

La escala es la del Simple Design System (SDS) de Figma, paso por paso: --sds-size-space-100 mide 0.25rem (4 px) y --sds-size-space-4000, 10rem (160 px) (SDS: theme.css).

Coincide con Tailwind CSS. Su variable --spacing vale 0.25rem por defecto, y las utilidades de espaciado la multiplican: p-4 es calc(var(--spacing) * 4), 16 px (Tailwind CSS: Theme variables, Padding). Así, space/400 mide lo mismo que p-4.

Otros sistemas usan otra base. Atlassian parte de 8 px y su número es un porcentaje de esa base: space.100 mide 8 px y space.200, 16 px (Atlassian: Spacing).

Encajar tu inventario en la escala

Toma los espaciados de tu inventario del módulo 1, ordenados de menor a mayor, y lleva cada uno al paso más cercano:

• Los casi duplicados se funden en un paso. Es el caso de 15 y 16 px.
• Un valor entre dos pasos obliga a decidir. Mira dónde aparece y qué paso tienen sus vecinos.
• Un valor que aparece una vez rara vez justifica un paso nuevo. Es más probable que sea un error del diseño.

Espaciado negativo

Un espaciado negativo superpone elementos: dos avatares que se solapan, por ejemplo. Los sistemas lo nombran en un nivel propio: --sds-size-space-negative-100 en el SDS (SDS: theme.css) y space.negative.100 en Atlassian (Atlassian: Spacing).

En CSS, la superposición se hace con márgenes negativos, que son válidos (MDN: margin). El gap y el padding no admiten negativos (MDN: gap, MDN: padding).

Figma acepta variables con valores negativos (Figma: Overview of variables). Lo probamos en el archivo de DesignToken101:

• Una variable de −8 en el gap de un auto layout funciona: los elementos se solapan.
• La misma variable se puede aplicar al padding, y Figma acepta un padding de −8.
• En la API de plugins hay un único scope, GAP, para gap y padding. No se puede limitar la variable a un uso.

En Figma

En la colección Primitives, crea una variable Number por paso (Figma: Create and manage variables):

1. Nómbrala con la ruta completa, por ejemplo space/400. Figma crea el grupo space al escribir la barra.
2. Escribe el valor en píxeles, sin unidad: 16.
3. En Edit variable, abre el scope y deja marcado el espaciado de auto layout. La ayuda de Figma lo lista como Gap y Padding; en la exportación aparece como un único scope, GAP.
4. Añade el code syntax Web: var(--t101-space-400).
5. No la ocultes al publicar.

:root {
  --t101-space-400: 1rem;            /* Figma: space/400 = 16 */
  --t101-space-negative-200: -0.5rem; /* código: space/negative/200 */
}

@theme inline {
  --spacing-400: var(--t101-space-400);
}

Fuentes

• Figma: Simple Design System, theme.css
• Figma: Overview of variables, collections, and modes
• Figma: Create and manage variables and collections
• Tailwind CSS: Theme variables
• Tailwind CSS: Padding
• Atlassian Design System: Spacing
• MDN: margin
• MDN: gap
• MDN: padding