Mantener sincronizado el espaciado de Figma y el código

El espaciado de Figma y el del código se mantienen sincronizados cuando ninguno de los dos lados mantiene su propia lista: una sola escala generada se exporta a ambos — como Figma Variables para el archivo de diseño, como propiedades personalizadas de CSS o un tema de Tailwind para el código — de modo que diseñadores y desarrolladores lean los mismos valores desde la misma fuente. Los plugins, las revisiones de redline y las reglas de lint vigilan el síntoma; una única fuente elimina la causa.

Sin esa fuente, la desviación sigue un guion predecible. Los diseñadores mantienen una lista de espaciado en Figma; los desarrolladores mantienen otra en CSS. Nadie decide divergir — un hueco se empuja a 20 para rescatar una tarjeta abarrotada, un 22 se redondea a 24 «para quedar en la rejilla» — y un año después un redline es una negociación: ¿eso es 20 o 24? La respuesta honesta suele ser «22 en el archivo, 20 en producción».

Este artículo cubre de dónde viene la desviación, qué son las Figma Variables, el flujo de exportación que permite que una sola escala alimente ambos lados, y una auditoría para productos existentes — la mitad diseño-a-código de un sistema de espaciado completo.

¿Por qué se desvían los valores de espaciado de Figma y del código?

Porque hay dos listas mantenidas a mano bajo presiones independientes. El archivo de diseño se edita para corregir problemas visuales frame a frame; la hoja de estilos se edita para corregir errores de maquetación y para acomodar contenido. Cada edición es local, razonable e invisible para el otro lado. Ningún cambio individual es un error — la divergencia es la suma de muchas decisiones correctas tomadas contra dos fuentes de verdad distintas.

Puedes oír la desviación en las conversaciones de handoff. Un equipo sincronizado discute sobre qué escalón debería ser un hueco («eso es una separación de sección, usa el escalón grande»); un equipo desviado discute sobre cuál es el valor («el archivo dice 22, la build dice 20»). Cuando la medición reemplaza al significado, las listas ya se han separado.

¿Qué son las Figma Variables?

Las Figma Variables son valores con nombre — un número como space/3 = 16 — que pueden vincularse a los huecos y el padding del auto-layout en lugar de números crudos; la introducción a las variables de Figma cubre la mecánica. Vincula el hueco de un frame a space/3 y el frame sigue a la variable: cambia la variable una vez y cada frame vinculado se actualiza. Es el equivalente en el archivo de diseño de una propiedad personalizada de CSS — una referencia donde antes había un número.

Una nota honesta de alcance: las Variables hacen que el lado del diseño sea capaz de leer tokens de espaciado, pero una colección de variables escrita a mano sigue siendo una lista mantenida a mano. La sincronización viene de generar esa colección a partir de la misma escala de espaciado que lee el código — no de la funcionalidad en sí.

¿Cómo alimenta una sola escala tanto al diseño como al código?

Tres movimientos:

1. Genera. Una escala a partir de tres números — base 16, ratio 2, dos notas por duplicación — produce los escalones 8, 11, 16, 23, 32, 45, 64.
2. Exporta en ambos sentidos. Los mismos escalones salen como Figma Variables para el archivo de diseño y como propiedades personalizadas de CSS o un bloque @theme de Tailwind v4 para el código, con tokens DTCG como formato de intercambio neutral.
3. Vincula y referencia. El diseñador vincula los huecos y el padding del auto-layout a las variables; el desarrollador referencia las propiedades personalizadas. Ninguno de los dos lados vuelve a escribir un valor en píxeles.

Abre esta escala con la exportación de Figma Variables a la vista — los siete escalones y los nombres que llevan a ambos entornos.

A partir de aquí, un cambio de espaciado es un evento aguas arriba: ajusta la base o el ratio una vez, vuelve a exportar ambos lados, y el cambio llega al archivo de diseño y a la build como los mismos números. La negociación de redline desaparece porque no queda nada local que negociar.

¿Cómo mides la desviación de espaciado en un producto existente?

Inventaría los valores de espaciado distintos de cada lado y compara. En el código, haz grep de las hojas de estilos buscando valores de margin, padding y gap y cuenta los resultados distintos; en Figma, muestrea los huecos y el padding a lo largo de tus pantallas principales. Una auditoría típica sin sincronizar se parece a algo así: 41 valores distintos en CSS, 13 en Figma, 9 compartidos entre ambos. El recuento de desajustes es la desviación, en un solo número — y la auditoría hace las veces de plan de migración: mapea cada valor existente a su escalón de escala más cercano (22 → 23; un 20 solitario se convierte en una decisión de criterio entre 16 y 23), y luego converge lado a lado en vez de en una sola reescritura.

¿Sincronizar los valores garantiza un espaciado consistente?

No — y vale la pena ser precisos sobre qué compra la sincronización. Las exportaciones compartidas resuelven los valores: ambos lados coinciden ahora en qué existe. Qué escalón va dónde — padding de tarjeta frente a hueco de sección frente a espaciado de iconos — es disciplina de uso, y eso sigue siendo criterio humano a ambos lados del handoff. Un diseñador puede vincular la variable equivocada a un hueco y estará fiel y consistentemente equivocada también en el código.

Lo que cambia la fuente compartida es que la elección equivocada se vuelve visible y nombrable: «eso debería ser space-4, no space-5» es una conversación que dos personas pueden zanjar en un hilo de comentarios, donde «¿eso es 20 o 24?» era arqueología. Valores por máquina, roles por criterio — esa es la división realista.

Configura la exportación de paridad

Parte de la escala en vez de de cualquiera de las dos listas: genera los escalones, luego pon las dos exportaciones lado a lado — los mismos siete valores renderizados una vez como Figma Variables y una vez como un bloque @theme de Tailwind — y cambia el ratio para ver cómo ambas se actualizan juntas. Ese movimiento simultáneo es todo el argumento a favor de una única fuente, visible en una sola pantalla: abre la exportación de paridad en Scale Composer.