Crear variables de espaciado en Figma: padding y gap

Para crear variables de espaciado en Figma, crea variables numéricas y vincúlalas a los campos de padding o gap de Auto Layout. Comprueba la conexión cambiando una variable y observando los marcos previstos. Distingue los valores fijos de la distribución automática y vuelve a inspeccionar los vínculos después de ajustar el espaciado desde el lienzo.

Construiremos una tarjeta ficticia de proyecto con título, explicación y botón con icono. Los nombres, valores y ejercicios son propuestas para practicar. Buscamos una configuración pequeña que otra persona pueda inspeccionar y reutilizar con seguridad, con un registro suficiente para entender qué cambia y por qué. No hace falta diseñar toda una arquitectura multimarca para empezar.

Separa padding y gap

Identifica qué contenedor controla cada espacio antes de crear variables. En la tarjeta, el marco exterior controla el margen interior alrededor del contenido. Una pila vertical controla la separación entre título, explicación y acción. Dentro del botón, otra pila horizontal controla la distancia entre icono y etiqueta. Marca esos tres límites en una copia antes de elegir valores.

La guía de Auto Layout de Figma distingue padding alrededor de los elementos y gap entre ellos. Aplicamos esa diferencia a una receta propuesta: padding de tarjeta 24, gap de contenido 16, padding horizontal de botón 16, vertical 12 y gap de icono 8. Son valores del ejercicio, no requisitos universales ni valores predeterminados de Figma.

Dos números iguales no implican una responsabilidad compartida para siempre. El margen interior de la tarjeta y la separación entre contenidos podrían coincidir en otra revisión, pero cambiar el borde interior no debería alejar necesariamente el icono de su etiqueta. Empieza por las relaciones que quieras conservar y decide después qué elementos compartirán cada valor.

Anota un mapa breve: Tarjeta → margen interior; Contenido → ritmo vertical; Acción → espaciado interno. Facilita la revisión cuando el componente aparece dentro de una página. La separación entre tarjetas vecinas pertenece al diseño de su contenedor: modificar el padding de una tarjeta no corrige un canal excesivo entre columnas.

Crea una colección pequeña de espaciado

Crea únicamente las variables necesarias para la primera tarjeta. Un conjunto inicial manejable es space/8, space/12, space/16 y space/24. Añade una nota que explique que el sufijo identifica el valor propuesto actual. Si el equipo prefiere nombres por tamaños, documenta su significado: no presupongas que «mediano» representa la misma medida para todas las personas.

Abre Variables, elige la colección prevista, crea una variable Number e introduce nombre y valor. La referencia de gestión de variables explica creación y ámbitos. Limita estas variables a gap y padding de Auto Layout cuando corresponda. El ámbito facilita la selección; no decide qué marco debe controlar una relación.

En una primera implementación resulta más sencillo inspeccionar vínculos directos que varias capas de alias. Añade una función como card/inset cuando represente una decisión independiente útil. Proponemos una condición de aceptación: otra persona debe identificar el origen de los cinco campos sin abrir colecciones ajenas ni consultar un documento extenso de arquitectura.

Mantén la escala y la tarjeta en la misma página de revisión. Indica qué usos están aceptados y cuáles siguen siendo experimentales. Evita añadir diez peldaños sin consumidores para completar visualmente la tabla. Para distinguir entre almacenar un valor y conservar un tratamiento reutilizable, consulta variables frente a estilos en Figma.

Antes de adoptar la colección, añade un segundo consumidor: una nota breve de proyecto con otra cantidad de contenido. Asigna el mismo margen interior propuesto, pero revisa su pila de contenido por separado. Decide si cambiar el margen debe afectar a ambas tarjetas y documenta esa responsabilidad compartida. Si solo el resumen necesita una disposición más densa, modifica su vínculo o introduce una función documentada en lugar de alterar el origen de todos los consumidores. Este ejercicio revela dependencias accidentales cuando la configuración todavía es pequeña. Conserva ambas muestras junto a la tabla para que la siguiente revisión pueda comparar sus efectos.

Vincula el campo y prueba un cambio

Selecciona el marco de Auto Layout que controla el espaciado concreto. En la tarjeta ficticia, vincula primero el margen interior exterior y deja intacto el gap del contenido. Es una comprobación controlada: antes de tocar la variable, quien revisa puede explicar qué área vacía cambiará. Si esa predicción no está clara, revisa el mapa de responsabilidades.

Haz clic en el campo numérico y pulsa = para abrir el selector; elige después la variable prevista. La referencia para aplicar variables detalla campos compatibles y métodos alternativos. Verifica la identidad de la variable en el campo. Escribir el mismo número visible no crea la relación que quieres comprobar.

Cambia temporalmente space/24 de 24 a 32 en la muestra de trabajo. Predice que variará el margen interior vinculado mientras el gap independiente del icono seguirá en 8. Comprueba otra tarjeta que utilice la misma variable y restaura 24. El cambio es una prueba: no redefinas silenciosamente una escala compartida de producción para realizarla.

Registra campo, nombre de variable, valor original, valor temporal y consumidores observados. Una captura de la tarjeta terminada no demuestra el vínculo. Si el contenido no se adapta como esperabas al variar el margen, investiga el dimensionado por separado con el flujo de Fill Container anidado. Mantener separados ambos diagnósticos permite explicar la corrección.

Elige gap fijo o distribución automática

Utiliza un gap fijo cuando quieras una separación concreta entre elementos vecinos. Nuestro icono y su etiqueta deben seguir formando una acción compacta aunque la tarjeta gane ancho. Aplicar distribución automática a esa fila interna expresa otra relación: el espacio disponible podría decidir una separación que pretendías mantener estable. Comprueba la intención antes de copiar una configuración.

La referencia de flujos horizontal y vertical documenta gaps numéricos y espaciado Auto. Auto distribuye el espacio disponible según la opción elegida; no es un token numérico de espaciado. Para comparar, duplica una fila de acciones y ensancha ambas copias. Conserva un gap fijo en una y distribución automática en la otra.

Contrasta el resultado con la función del componente. Una fila que coloca el título de sección en un extremo y una acción en el opuesto puede beneficiarse de esa distribución. La pareja icono-etiqueta necesita su propia relación interna. Anídala dentro de un marco de acción para que la fila exterior y el control puedan expresar decisiones distintas.

No añadas modos de densidad simplemente porque la tabla inicial sea pequeña. Si el producto necesita presentaciones compacta y cómoda, especifica qué relaciones varían y revisa ambas. La documentación de modos de Figma explica los valores alternativos. Estrechar un marco no demuestra que se haya seleccionado el modo previsto: inspecciona el contexto aplicado y compruébalo deliberadamente.

Localiza una variable de espaciado desvinculada

Si una tarjeta deja de seguir el origen del espaciado, reproduce la diferencia en una copia de trabajo. Selecciona el mismo marco responsable en una muestra correcta y otra defectuosa. Compara primero la identidad del vínculo. Dos campos pueden mostrar 24 aunque solo uno conserve la variable; una captura idéntica puede esconder esa diferencia de mantenimiento.

Figma advierte en las instrucciones para desvincular variables que cambiar padding o gap mediante los controles del lienzo elimina los vínculos numéricos aplicados. Después de arrastrar para explorar, inspecciona y restablece la variable prevista. Terminar el arrastre en el número original no demuestra que hayas recuperado también la relación original.

Practica una recuperación de tres pasos: anota la variable correcta, realiza un ajuste manual y restaura el vínculo mediante el selector. Repite el cambio temporal del origen en una muestra local y confirma que responde otra vez. Conserva la referencia original hasta entender la recuperación. Así compruebas una relación mantenible en lugar de memorizar el aspecto de una captura.

Si la variable no aparece en el selector, comprueba propiedad seleccionada, tipo y ámbito, y después la disponibilidad de la biblioteca. Si existe el vínculo pero sorprende el valor, inspecciona el modo antes de renombrar variables o reconstruir la tarjeta. Registra la causa mínima observada: varios cambios simultáneos dificultan saber qué ha reparado realmente el problema.

Revisa la muestra real de botones de EmviUI

La muestra real de EmviUI que aparece debajo contiene botones repetidos con icono y etiqueta en distintos tratamientos visuales. Sirve para elegir un control concreto: compara el espacio alrededor del contenido con la separación interna. La web de EmviUI describe un kit editable y un sistema de diseño para Figma con variables y correspondencias Tailwind.

La captura no revela valores exactos de padding, nombres de variables ni vínculos. Nuestra receta 16/12/8 es un ejemplo didáctico independiente, no una afirmación sobre esos archivos. Abre el componente editable antes de documentar su estructura. Conserva la relación entre icono y etiqueta al probar un texto más largo, como «Crear espacio de trabajo del proyecto».

Reutiliza un tratamiento visual como punto de partida y coloca al lado otra muestra con la etiqueta larga. Comprueba espacio disponible, reconocimiento de la acción y colocación dentro del padre. Si la tipografía es la causa, la guía de variables para funciones de texto desarrolla esa responsabilidad por separado.

Redacta una nota explícita de implementación

Entrega una tabla pequeña de correspondencias en lugar de una página de números sin explicar. Incluye marco responsable, variable de Figma, propiedad CSS, unidad propuesta y estado de revisión. En el ejercicio, el marco exterior corresponde a padding y la pila de contenido a gap. Conserva ambas filas aunque otra versión les asigne temporalmente el mismo valor.

La referencia de gap de MDN describe los canales en contenedores compatibles; la de padding describe el área interior alrededor del contenido. El ejemplo CSS utiliza píxeles explícitos para conservar las medidas propuestas. Es una correspondencia escrita para revisar, no una exportación automática ni una obligación de utilizar píxeles en todos los proyectos.

Comprueba la tarjeta implementada con su fuente y contenido reales. Una correspondencia numérica correcta puede convivir con una caja de altura fija que corta una explicación larga. Pide a desarrollo que identifique el selector responsable y cambie un solo valor cada vez. Documenta expresamente cualquier decisión de breakpoint o densidad para que pueda revisarse.

.project-card { padding: 24px; }
.project-card__content { display: flex; flex-direction: column; gap: 16px; }
.project-card__action { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; }

Acepta el cambio mediante una revisión repetible

Prepara tres muestras: tarjeta habitual, tarjeta con título de dos líneas y tarjeta con etiqueta de acción larga. Conserva el ancho mientras cambias contenido, y conserva el contenido mientras pruebas un ancho menor. Así separas un problema del origen del espaciado de una disposición que necesita organizarse de otra manera para admitir la tarea.

Entrega una lista concreta: identificar responsables, localizar vínculos, realizar un cambio reversible del origen y explicar qué consumidores responden. Inspecciona después las excepciones manuales y repite el control con texto traducido. Acepta la configuración cuando otra persona pueda predecir el resultado y recuperar la referencia siguiendo las notas que acompañan al componente.

Registra archivo, componente, colección, contexto seleccionado y excepciones pendientes. La variable aporta valor cuando el siguiente consumidor puede utilizarla correctamente. Guarda ese registro con el componente: el próximo cambio tendrá un punto de partida observable, sin depender de la memoria de quien creó la tarjeta ni de una captura aislada.