Centraliza colores, tipografías y espaciados con Variables en Figma para actualizar tu proyecto en segundos, mantener coherencia y trabajar mejor en equipos grandes.
1) 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.
2) 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.
3) 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.
color-primary, textos heredan font-size-*, contenedores heredan spacing-*.4) 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.5) 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