Design tokens de Figma a Tailwind: colores, tipografía y espaciado

Respuesta rápida: un valor de color/texto/espaciado de Figma se mapea a Tailwind comparándolo con la propia escala de utilidades de Tailwind — el paso de espaciado más cercano, el color más próximo, el tamaño de tipografía que coincide. Cuando un valor queda fuera de esa escala, la salida recurre a una clase de valor arbitrario como bg-[#f4f4f5] en lugar de inventar un nuevo color de tema que no existe en tu configuración.

Qué es un "design token" en un archivo de Figma, en concreto

Antes de que el mapeo tenga sentido, ayuda ser específico sobre qué cuenta como token frente a un valor puntual en Figma:

• Color styles — un relleno guardado y con nombre (por ejemplo, "Gray/100") aplicado de forma consistente en todo el archivo, en contraposición a un valor hexadecimal puntual elegido una vez y nunca reutilizado.
• Text styles — una combinación guardada de fuente, tamaño, peso e interlineado, aplicada de forma consistente a títulos o texto de cuerpo.
• Valores de espaciado — normalmente no se "guardan" como un estilo de la misma manera, pero sí son números de gap/padding de Auto Layout consistentes y usados repetidamente en distintos frames.

El mapeo a Tailwind funciona mejor cuando el archivo de Figma realmente usa estos elementos de forma consistente. Un archivo donde cada botón usa el mismo color style guardado "Primary" se convierte de forma limpia en una sola clase de Tailwind reutilizada en todas partes. Un archivo donde cinco botones tienen cada uno un azul puntual ligeramente distinto se convierte en cinco valores de Tailwind ligeramente distintos — porque eso es genuinamente lo que contiene el diseño, no un defecto de la conversión.

Cómo se resuelven los valores contra la escala de Tailwind

La propuesta de valor de Tailwind es una escala restringida y predefinida para espaciado, color y tipografía — no una paleta abierta. Convertir a esa escala significa comparar, no inventar:

Esta es una distinción deliberada: la salida en Tailwind de MarkupGen resuelve los valores contra la escala por defecto real de Tailwind en lugar de generar un tailwind.config personalizado que fuerce a que cada valor "encaje". Eso mantiene la salida honesta sobre los valores reales del diseño — un color fuera de escala aparece como una clase de valor arbitrario, lo cual es una señal visible de que vale la pena consultar con el diseñador si debería ajustarse a la paleta compartida, en lugar de un error de redondeo silencioso.

Qué significa esto al revisar la exportación

• Las clases de valor arbitrario son una señal, no un bug. Un grupo de clases bg-[#...] en la salida normalmente significa que el propio diseño tiene colores puntuales casi duplicados que deberían consolidarse en estilos compartidos — vale la pena señalarlo al equipo de diseño en lugar de "arreglarlo" solo en el código.
• Comprueba la consistencia del espaciado entre componentes repetidos, ya que la escala de Tailwind redondea cada valor de forma independiente — el mismo gap visual en dos frames distintos debería resolverse en la misma clase si el diseño usó el mismo número.
• Si el proyecto ya tiene un tema en tailwind.config, contrasta los valores arbitrarios generados con él — un color que parece fuera de escala respecto a la paleta por defecto de Tailwind podría ya ser un color con nombre en tu propia configuración, y valdría la pena sustituirlo a mano.

Para el flujo de trabajo completo —exportación con el plugin, generación por IA, edición, selección de formato de salida— consulta Figma to Tailwind CSS: A Practical Conversion Guide.

Pruébalo con tu propio diseño

La forma más rápida de ver con qué consistencia se convierten los colores y el espaciado de tu archivo es pasar un frame real por el proceso. Prueba MarkupGen gratis, o consulta la página del conversor de Figma a Tailwind para ver qué incluye.