Los design tokens de Figma son ranuras con nombre, agnósticas a la plataforma, para decisiones visuales - implementadas de forma nativa como Variables - que desacoplan el nombre de un token de su valor para que una actualización de colección única se propague instantáneamente en todos los componentes. Cambiar al modo oscuro o aplicar un cambio de marca significa editar valores en un solo lugar, no buscar códigos hex en cientos de capas. Esta guía cubre el flujo de trabajo completo: capas primitiva vs semántica, colecciones, modos, nomenclatura, alcances, exportación de código y el estándar DTCG.
Flujos relacionados: Modo oscuro con Variables Figma para la configuracion de temas claro/oscuro, Paridad Figma-Codigo para sincronizar tokens con el repositorio, y Flujos de IA del Sistema de Diseno para exportar tokens DTCG que los agentes de IA puedan leer.
¿Qué Son los Design Tokens?
Los design tokens son el contrato compartido entre diseño y código - una decisión con nombre que ambas partes referencian en lugar de valores en bruto. El concepto fue popularizado por el equipo del Sistema de Diseño Lightning de Salesforce y ahora está siendo estandarizado por el Grupo Comunitario de Design Tokens del W3C (DTCG) para que las herramientas y las bases de código puedan intercambiar archivos de tokens sin parsers personalizados. En Figma, los tokens viven como Variables: una ranura con nombre mantiene el valor, y cada componente que lo referencia se actualiza en el momento en que el valor cambia. Esa indirección es lo que hace que el modo oscuro, las opciones de densidad y los cambios de marca sean manejables sin reconstruir componentes: actualiza el valor detrás de un token y cada componente que lo referencia lo sigue automáticamente.
Variables de Figma vs Design Tokens: ¿Cuál es la Diferencia?
Los design tokens son el concepto - una decisión con nombre (un color, un valor de espaciado, un tamaño de fuente) que tanto el diseño como el código referencian en lugar de un valor en bruto. Las Variables de Figma son el mecanismo nativo que implementa ese concepto dentro de Figma: una ranura tipada (Color, Número, Cadena o Booleano) que guarda valores y soporta alias y modos. Cada Variable de Figma que creas es efectivamente un design token; la distinción importa al conectar Figma con una canalización de construcción, porque no todos los flujos de trabajo de tokens requieren Variables de Figma - algunos equipos mantienen archivos de tokens en JSON fuera de Figma completamente. En un flujo de trabajo Figma-first, los dos términos se usan de forma intercambiable en la práctica.
Tokens Primitivos vs Semánticos
Cada sistema de tokens de grado de producción necesita dos capas - primitivas y semánticas - o la primera solicitud de tema lo rompe todo. Las primitivas guardan valores en bruto sin significado de producto (pasos de paleta, incrementos de espaciado, tamaños de tipo); las semánticas los alias por rol de interfaz (fondo de página, acción primaria, texto destructivo). Sin esa separación, los componentes se vinculan directamente a valores en bruto, y añadir un segundo tema significa anular manualmente cada uno. Al construir Atomize, Vitalina revisó cientos de bibliotecas de Figma y encontró que la mayoría tenía primitivas pero no capa semántica - los botones estaban conectados a blue/600 en lugar de interactive/default, por lo que el modo oscuro requería cirugía a nivel de componentes en lugar de un cambio de modo. Un relleno de botón que referencia blue/600 en lugar de interactive/default se ve idéntico en modo claro pero se rompe en el momento en que intentas añadir un segundo tema. La arquitectura de dos capas se siente como trabajo extra al principio, pero se devuelve inmediatamente la primera vez que alguien pide un interruptor de modo oscuro.
Color
Las primitivas guardan pasos de paleta en bruto sin significado de producto. Las semánticas los alias por rol de interfaz. Un relleno de botón referencia interactive/default, nunca un hex - por lo que el modo oscuro es solo un cambio de modo en la colección semántica con cero cambios en los componentes.
/* Primitivas */
gray/50 → #f9fafb
gray/950 → #030712
blue/600 → #2563eb
red/600 → #dc2626
/* Semántica - modo Claro */
background/default → gray/50 (#f9fafb)
text/primary → gray/950 (#030712)
text/subdued → gray/600 (#4b5563)
interactive/default → blue/600 (#2563eb)
interactive/destructive → red/600 (#dc2626)
/* Semántica - modo Oscuro (mismos nombres, diferentes valores) */
background/default → gray/950 (#030712)
text/primary → gray/50 (#f9fafb)Tipografía
Tamaños de tipo primitivos: font/size/12, font/size/14, font/size/16, font/size/20, font/size/24, font/size/32. Presets semánticos: text/body/sm usa font/size/12, weight/regular, lineheight/150%; text/body/md usa font/size/14; text/heading/lg usa font/size/24, weight/semibold, lineheight/110%. Los presets agrupan primitivas para que tu producto use un subconjunto controlado de la escala completa.
Espaciado, radio, elevación, movimiento
El espaciado, radio y movimiento usan variables Numéricas para que los campos de padding de auto-layout, gap, radio de esquina y efecto se mantengan en escala automáticamente.
/* Espaciado - variables Numéricas, escala base 4 */
space/1= 4px
space/2= 8px
space/3= 12px
space/4= 16px
space/6= 24px
space/8= 32px
space/12= 48px
space/16= 64px
/* Radio */
radius/none= 0
radius/sm= 4px
radius/md= 8px
radius/lg= 12px
radius/full= 9999px
/* Duración de movimiento */
duration/fast= 150ms
duration/base= 250ms
duration/slow= 400msVariables de Figma como Tu Motor de Tokens
Las Variables de Figma son el motor de tokens nativo - cuatro tipos (Color, Número, Cadena, Booleano) agrupados en colecciones, cada uno con soporte para múltiples modos para conjuntos de valores paralelos. La mayoría de los equipos los subutilizan: crean variables de color pero dejan el espaciado y el radio como números en bruto, por lo que el auto-layout se sale de escala y el padding diverge entre diseñadores. Los usuarios de Atomize que pueblan completamente las colecciones Numéricas para espacio, radio y movimiento ven que las revisiones de componentes caen de horas a minutos porque cada valor se rastrea hasta un token con nombre. Alias las primitivas en semánticas usando el selector de variables (el icono de cubo) para que la relación sea explícita, navegable y aplicada dentro del archivo.
Configuración mínima de colecciones
- Crea ‘Primitivas - Color’: pasos de paleta en bruto, sin modos. Restringe la edición a los propietarios del sistema.
- Crea ‘Semántica - Color’: variables aliasadas a primitivas. Añade modos Claro y Oscuro; establece valores por modo.
- Crea ‘Primitivas - Espacio’: variables Numéricas para tu escala de espaciado.
- Crea ‘Primitivas - Radio’ y ‘Primitivas - Movimiento’ como variables Numéricas.
- En cada componente, vincula rellenos, trazos, padding, gap, radio de esquina y texto a Variables - nunca a valores en bruto.
Modos: temas sin componentes duplicados
Los modos viven en una colección y definen conjuntos de valores paralelos. La colección Semántica - Color tiene modos Claro y Oscuro; cada variable semántica obtiene dos valores. Aplica el modo a nivel de frame para previsualizar el flujo completo en tema oscuro sin tocar un solo componente. Añade modos solo cuando toda la colección necesite valores paralelos; los ejes no relacionados (temas de color vs densidad) pertenecen a colecciones separadas.
Alcances: dónde se permite una variable
Los alcances controlan en qué propiedades de diseño aparece una variable. Una variable de color de texto con alcance en ‘Relleno de Texto’ no aparecerá en el selector de trazo. Una variable de espaciado con alcance en ‘Gap’ y ‘Padding’ no aparecerá en el radio de esquina. Los alcances ajustados previenen la aplicación incorrecta accidental y reducen el ruido del selector a medida que la biblioteca crece.
Cómo Configurar Design Tokens en Figma: Paso a Paso
- Crea una colección Primitivas - Color: pasos de paleta en bruto (gray/50 hasta gray/950, blue/600, red/600). Sin modos, sin alias - solo valores. Restringe el acceso de edición a los propietarios del sistema.
- Crea una colección Semántica - Color: añade modos Claro y Oscuro. Alias cada variable semántica a una primitiva usando el icono de cubo en el selector de valores - nunca introduzcas valores hex directamente.
- Crea colecciones Primitivas - Espacio y Primitivas - Radio usando variables Numéricas. Establece tu escala de espaciado (4, 8, 12, 16, 24, 32, 48, 64) y pasos de radio (0, 4, 8, 12, 9999).
- Vincula cada componente: rellenos y trazos a variables Semántica - Color, padding y gap a Primitivas - Espacio, radio de esquina a Primitivas - Radio. Nunca vincules un componente directamente a una variable Primitiva - Color.
- Configura la exportación: usa Atomize o haz clic derecho en una colección → Exportar a JSON para generar propiedades personalizadas CSS, constantes TypeScript o JSON DTCG. Añade este paso a tu lista de verificación de publicación de biblioteca para que los archivos de tokens estén actualizados con cada lanzamiento.
Nombrar Tokens
Los nombres de los tokens son la API pública compartida por diseñadores y desarrolladores - los malos nombres crean deriva que rompe silenciosamente el tema. La restricción es que los nombres semánticos deben mantenerse significativos en todos los modos: text/gray es incorrecto porque deja de tener sentido en el momento en que añades un tema oscuro; text/subdued es correcto porque describe la intención, no un tono. El patrón category/role/variant (color/text/primary, spacing/gap/md) se mapea directamente a las convenciones de propiedades personalizadas CSS (--color-text-primary), por lo que las rutas de Figma y los nombres de código se mantienen sincronizados sin capa de traducción. Acuerda el caso y las convenciones de nomenclatura una vez, documéntalos en las descripciones de variables y aplícalos en las revisiones de biblioteca.
El patrón de nomenclatura incorrecta más común que Atomize marca en las auditorías son los nombres semánticos codificados por tono: text/blue, border/gray-300, background/white. Pasan la revisión en modo claro porque el nombre y el valor resuelto coinciden. Se rompen silenciosamente en el momento en que se asigna un valor de modo oscuro - la variable todavía existe y se resuelve en algo, pero el nombre ahora miente sobre a qué apunta. La primera vez que un ingeniero abre las herramientas de desarrollador del navegador y ve --text-blue resolviéndose en casi blanco, la confianza en el sistema de tokens queda dañada. Renombra con una ventana de deprecación, documenta el reemplazo basado en roles en la descripción de la variable y elimina el nombre antiguo en la próxima versión mayor.
Exportar Tokens al Código
Los tokens solo se convierten en un contrato compartido cuando los mismos nombres se envían a la base de código - un token que solo existe en Figma es una nota privada. Sin una canalización de sincronización, las actualizaciones de diseño y los valores de código divergen silenciosamente: los ingenieros codifican valores hex porque no pueden leer de forma fiable el archivo de Figma, y el sistema de tokens se vuelve decorativo. Atomize lee tus Variables de Figma directamente y exporta archivos de tokens estructurados - JSON, propiedades personalizadas CSS o constantes TypeScript - para que el repositorio siempre refleje el estado actual de la biblioteca sin copiar y pegar manualmente. Conecta la canalización una vez y cada publicación de biblioteca se convierte en una actualización de código.
Una exportación CSS típica de una colección de color semántica. En modo oscuro los mismos nombres de variable se resuelven en diferentes valores - la aplicación cambia de tema alternando un atributo de datos, no cargando una segunda hoja de estilos.
/* Tokens de color semántico - modo Claro */
--color-background-default: #f9fafb;
--color-text-primary: #111827;
--color-text-subdued: #4b5563;
--color-interactive-default: #2563eb;
--color-interactive-destructive: #dc2626;
/* Modo oscuro: alternado via [data-theme="dark"] en <html> */
[data-theme="dark"] {
--color-background-default: #030712;
--color-text-primary: #f9fafb;
--color-text-subdued: #9ca3af;
--color-interactive-default: #3b82f6;
}Un token solo en Figma es una nota privada. Un token en Figma y en la canalización de construcción es un contrato compartido.
Comparación de formatos de exportación de tokens
| Formato | Ideal para | Soporte de herramientas | Limitación clave |
|---|---|---|---|
| Propiedades personalizadas CSS | Proyectos web, todos los navegadores modernos | Atomize, Style Dictionary, todas las principales herramientas | Sin metadatos de tipo de token; no compila para plataformas nativas |
| JSON DTCG | Canalizaciones multiplataforma (web, iOS, Android) | Style Dictionary, Theo, Token Transformer | Requiere $type limpio en cada token; estructura estricta |
| Constantes TypeScript | Bases de código de tipo seguro, autocompletado de design tokens | Atomize, scripts de construcción personalizados | Se requiere paso de construcción; no útil para proyectos solo CSS |
| Variables SCSS | Proyectos web heredados, hojas de estilos de diseño intensivo | La mayoría de los plugins de exportación | Sin soporte de alias; los valores se duplican en lugar de referenciarse |
Mejores Prácticas
- Lanza las primitivas antes que las semánticas; alias, nunca dupliques valores en bruto en componentes.
- Restringe el acceso de edición a las colecciones primitivas; el trabajo del día a día ocurre en las semánticas.
- Usa las descripciones de variables para la intención, los pares de contraste y los avisos de deprecación.
- Versiona las exportaciones de tokens junto con los lanzamientos de biblioteca - mismo ritmo, mismo changelog.
- Tokeniza las decisiones recurrentes; los casos extremos puntuales no necesitan un token.
- Audita anualmente: fusiona duplicados, elimina tokens no utilizados, documenta cualquier renombrado que rompa compatibilidad.
Errores Comunes
- Vincular primitivas directamente en los componentes - pierdes la indirección semántica; los cambios de tema requieren ediciones manuales de componentes.
- Demasiados modos en una sola colección - divide los ejes no relacionados (temas de color vs densidad) en colecciones separadas.
- Variables de cadena para cada número - usa el tipo Numérico para espacio y radio para que la matemática de auto-layout permanezca consistente.
- Palabras de tono en nombres semánticos (text/blue, background/white) - se rompen cuando cambia la paleta.
- Sin canalización de exportación - ingeniería inventa nombres paralelos; la deriva está garantizada.
Interoperabilidad DTCG
El cumplimiento de DTCG protege tu sistema de tokens contra los cambios de cadena de herramientas al establecer un formato JSON portátil y agnóstico al parser. La mayoría de los equipos hoy en día usan esquemas de exportación propietarios vinculados a un único plugin - cuando ese plugin queda obsoleto o se añade una nueva plataforma, todo el archivo de tokens debe migrarse manualmente. La especificación DTCG del W3C da a cada token un $value y un $type (color, dimensión, duración, sombra, etc.), y herramientas como Style Dictionary y Token Transformer leen ese formato de forma nativa sin parsers personalizados. La dirección de exportación de Variables de Figma se alinea con DTCG, por lo que la nomenclatura category/role/variant se mapea limpiamente a la jerarquía de grupos y sobrevive los cambios de cadena de herramientas sin renombrar. Estructura tus tokens como si fueran a dejar Figma - porque eventualmente lo harán.
Lectura Relacionada
- Coverage Audit vs Valores No Tokenizados - cuándo usar cada auditoría de Atomize y el orden recomendado antes del contraste
- Cómo Construir un Sistema de Diseño en Figma - configuración paso a paso después de las capas de tokens
- Encontrar Valores No Tokenizados en Figma - audita la cobertura de tokens antes de exportar o publicar modos
- Plugins de Figma para Tokens, Git Sync y Flujos de Trabajo - exportación, Git y canalización de plugins
Veredicto final - Design Tokens de Figma
Los design tokens construidos sobre una arquitectura de dos capas son la única base que escala - las primitivas guardan valores en bruto, las semánticas son dueñas de la intención del producto y la brecha entre ellas es donde el modo oscuro, los cambios de marca y las variantes de densidad viven de forma gratuita. La inversión es al principio: obtener correctamente las colecciones, la nomenclatura y la canalización de exportación en el primer sprint significa que cada cambio futuro es una edición de valor en lugar de una cirugía de componentes. Los usuarios de Atomize informan consistentemente que la primera exportación completa de tokens a CSS es el momento en que el sistema de diseño deja de ser un artefacto de Figma y empieza a ser un activo de ingeniería compartido. Construye la estructura temprano, trata el archivo de tokens como fuente de verdad y el sistema paga rendimientos compuestos durante toda la vida del producto.
