# Cómo usar variables en Figma para agilizar tu diseño

> Centraliza colores, tipografías y espaciados con Variables en Figma para actualizar tu proyecto en segundos, mantener coherencia y trabajar mejor en equipos grandes.

- URL canónica: https://www.martagonzalez.dev/blog/como-usar-variables-en-figma-para-agilizar-tu-diseno/
- Fecha de publicación: 2025-08-10T10:52:40
- Última actualización: 2026-05-25T21:04:15

---

![Variables agrupadas por colecciones (Light/Dark) y ligadas a componentes y estilos.](https://martagonzalez.dev/wp/wp-content/uploads/2025/08/como-usar-variables-en-figma.avif)
 
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.