Una escala de espaciado es una lista corta de distancias permitidas para rellenos, espacios y márgenes. En lugar de escribir cualquier número cada vez, eliges de la lista. Las interfaces hechas así se ven tranquilas y consistentes, y diseñadores y desarrolladores dejan de discutir si son 14 o 15 píxeles.
Por qué funciona una escala
- Menos decisiones: eliges el paso siguiente o el anterior, no un número entre 1 y 100.
- Ritmo visible: los mismos pasos se repiten y el diseño se siente ordenado aunque nadie sepa decir por qué.
- Entrega fácil: diseño y código comparten nombres y valores (space-2, space-4).
- Densidad gratis: un modo compacto solo usa pasos más pequeños para las mismas relaciones.
La grilla de 4 y 8 px
La mayoría de los equipos parte de una base de 4 px: 4, 8, 12, 16, 24, 32, 40, 48 y 64. Los pasos pequeños (4 a 12) van dentro de los controles y entre elementos relacionados. Los pasos grandes (16 a 48) separan grupos y secciones. El 8 es el caballo de batalla porque divide bien, coincide con interlineados comunes y deja las áreas táctiles en números redondos.
Reglas para no perder el rumbo
- El espacio entre cosas es mayor que el espacio dentro de ellas, así la proximidad muestra qué va junto.
- El relleno es al menos tan grande como el mayor espacio interno del elemento.
- La misma relación usa el mismo paso en todas partes: todas las tarjetas tienen el mismo relleno.
- No agregues un 10 o un 14 para arreglar una pantalla. Si un paso se siente mal, el diseño está mal, no la escala.
En Figma
Crea variables de espaciado para la escala y vincula a ellas el relleno y el espacio del auto layout, para que un cambio en un lugar llegue a todos los marcos. En Preferencias, pon el desplazamiento con teclas en 4 (pequeño) y 8 (grande) para que las flechas se muevan en pasos de la grilla. Selecciona un marco y pulsa Shift + A para añadir auto layout, y revisa los campos de relleno: lo que no sea un paso es candidato a ajustarse.
En CSS
Nombra los pasos una vez como propiedades personalizadas y úsalos en todas partes:
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
}
.card {
display: grid;
gap: var(--space-2);
padding: var(--space-6);
}Para practicar
Ajusta a la grilla te da cinco componentes con el espaciado desviado de la escala y un reloj que vencer. Ajusta cada relleno y espacio a su paso y lee por qué ese paso encaja.