Definir el espaciado y la elevación en Figma es lo que evita que un design system se sienta improvisado. Cuando trabajas con múltiplos de cuatro y tokens de sombra reutilizables, cualquier persona del equipo sabe exactamente qué medida usar y dónde. Esta guía te muestra cómo dejar esas reglas listas en tu archivo de foundations.

Por qué revisar otros design systems antes de definir el tuyo

Antes de inventar pautas desde cero, vale la pena mirar cómo lo hacen los grandes. Polaris, el design system de Shopify, documenta con detalle los espaciados entre labels, formularios y componentes. Verlo te da contexto y referencias para ajustar lo que tu proyecto necesita sin reinventar la rueda.

¿Por qué usar múltiplos de 4 en el espaciado? Porque generan una escala consistente y predecible. Valores como 4, 8, 12, 16, 24, 32, 40 y 56 cubren tanto espacios internos de componentes como decisiones de layout sin generar caos visual.

Cómo configurar la escala de spacing en Figma

La idea es construir una fuente de verdad visual dentro de tu archivo de foundations. Crea un frame de iPad mini, ajústalo con un padding de 40 píxeles y replica el encabezado que ya usaste en colores. Cambia el título a spacing y mantén el radius de 12 y el stroke de 2 para conservar coherencia. [3:00]

Dentro del frame, cada medida se representa así:

• Un cuadrito cuyo width y height coinciden con el valor del token, por ejemplo 4x4 píxeles.
• Una etiqueta de texto con el nombre del token aplicado.
• Una separación de 24 píxeles entre filas para que el layout respire.

Para la siguiente medida, copias y pegas el cuadrito y cambias las dimensiones. Activando el ícono del candado entre width y height, Figma actualiza ambos lados al cambiar uno solo, ideal para mantener cuadrados perfectos al saltar de 4 a 8, 12 o 16 píxeles. [5:30]

Qué medidas dejar listas y cuáles delegar al equipo

La escala base que conviene documentar incluye 4, 8, 12, 16, 24, 32, 40 y 56 píxeles. Las primeras suelen usarse para espaciados internos de componentes; las más grandes funcionan mejor a nivel de layout. La distinción se vuelve evidente cuando empiezas a construir botones, cards o formularios reales.

Cómo crear el token de elevación con sombras

La elevación se trabaja en otro frame de iPad con la misma estructura visual: encabezado elevation, radius de 12, stroke de 2. Dentro colocas un cuadrado con relleno blanco, radius de 12 y stroke de 2 para que reciba la sombra. [7:15]

El truco está en convertir esa sombra en un estilo global reutilizable. En el panel de efectos, agregas una sombra y configuras estos valores:

• Eje X en valor negativo, por ejemplo -4, para que la sombra caiga hacia el lado opuesto.
• Spread o intensidad al 100% para lograr una sombra marcada.
• Blur en 0, eliminando el difuminado y reforzando la estética del sistema.

Luego guardas ese efecto como estilo con el nombre $shadow, siguiendo la convención del signo de pesos para identificar tokens. Cuando diseñes un componente nuevo, basta con aplicar ese token y la elevación queda consistente en todo el sistema.

¿Qué es un token de sombra en Figma? Es un estilo de efecto guardado con un nombre, como $shadow, que puedes reutilizar en cualquier componente. Cambias el token una vez y todos los componentes que lo usan se actualizan.

Cómo documentar los breakpoints junto al spacing

Un detalle fácil de olvidar son los breakpoints. Documentarlos en el mismo archivo le dice al equipo con qué medidas responsivas vas a trabajar. Para mobile, el valor de referencia es 768 píxeles, con márgenes externas de 24 píxeles y una grilla de 4 columnas. [10:45]

Para construirlo en Figma:

• Trae un texto con el nombre del breakpoint, por ejemplo mobile 768, en tamaño 18.
• Crea una caja con auto layout usando Command+Shift+A.
• Aplica stroke de 2, radius de 2 y un padding interno de 16 píxeles arriba y abajo.
• Detalla dentro las márgenes y la cantidad de columnas que corresponden a ese breakpoint.

Estas medidas coinciden con las de Tailwind CSS, lo que facilita la conversación con el equipo de desarrollo. Faltaría replicar el bloque para tablet y desktop usando los valores acordados con tu equipo.

Qué reto te queda pendiente

La escala de espaciado quedó iniciada, pero faltan tamaños por completar. Tómalo como ejercicio: aplica la regla de 4, revisa otros design systems como Polaris y termina de documentar los valores que tu proyecto necesita. Cuéntame en los comentarios cómo te quedó tu sistema de spacing y elevación.