Centraliza colores, tipografías y espaciados con Variables en Figma para actualizar tu proyecto en segundos, mantener coherencia y trabajar mejor en equipos grandes.
Qué son las variables y tipos disponibles
Las variables son valores reutilizables que puedes vincular a propiedades de tus capas y componentes. Se gestionan en colecciones desde el panel Variables.
Color
Fondos, texto, bordes, estados (hover/active/disabled).
Número
Espaciados, radios, opacidades, elevaciones.
Texto
Tamaños, interlineado, tracking (como tokens tipográficos).
Booleano
Activa/desactiva estados o variantes condicionales.
Tip pro: piensa en las variables como design tokens que luego mapearás a código.
Beneficios clave para equipos
- Coherencia visual: un valor único por concepto (ej.
color-primary). - Cambios masivos: actualiza marca, temas o espaciados en segundos.
- Menos errores: reduce estilos duplicados y capas sueltas.
- Puente con desarrollo: facilita exportar tokens y sincronizar con el repo.
Cómo crear y usar variables (paso a paso)
- Abre el panel de Variables (Shift + I → pestaña Variables).
- Crea una Colección (ej. Theme Light y Theme Dark).
- Añade variables:
color-primary,spacing-md,font-size-body, etc. - Vincula una propiedad al valor: en el inspector, haz clic en el icono </> y elige la variable.
- Modifica el valor en el panel y verifica cómo se propaga por todo el archivo.
Atajo mental: Botones y chips heredan color-primary, textos heredan font-size-*, contenedores heredan spacing-*.
Casos prácticos: colores, tipografía y espaciados
Colores de marca y temas
- Crea dos colecciones: Light y Dark con variables espejo.
- Vincula fondos, textos y bordes a las variables adecuadas.
- Cambia de colección para alternar tema sin tocar componentes.
Tipografía
- Define variables de tamaño (ej.
font-size-sm/md/lg) y line-height. - Asócialas a estilos de texto (H1, H2, body) para cambios globales.
Espaciados
- Variables numéricas:
spacing-4,spacing-8,spacing-16… - Úsalas en Auto Layout (padding y gap) para consistencia total.
Ejemplo real: tu CTA primario usa color-primary + spacing-12/24. Cambias la marca → todos los CTAs se actualizan.
Errores comunes y buenas prácticas
- Nombres crípticos: evita azul1. Usa
color-primary,surface-elevated. - Sin colecciones: mezcla valores y complica el mantenimiento.
- Aplicación parcial: si no vinculas todos los componentes, perderás el beneficio.
- Sin documentación: añade una página “Tokens” con ejemplos y guía de uso.
Checklist rápida
- Variables agrupadas por colecciones (Light/Dark)
- Nomenclatura clara y consistente
- Colores, tipografía y espaciado vinculados a variables
- Componentes clave heredando tokens
- Documentación visible para todo el equipo
Preguntas Frecuentes (FAQs)
1) ¿Puedo usar variables en la versión gratuita?
Sí, aunque algunas capacidades avanzadas pueden requerir planes Professional u Organization.
3) ¿Variables y estilos son lo mismo?
No. Los estilos son presets visuales; las variables son valores que puedes reutilizar y combinar en múltiples propiedades.
4) ¿Se pueden exportar variables a código?
Sí, mediante plugins de Design Tokens o integraciones con el repositorio de desarrollo.