Cuando trabajas con un design system, copiar colores uno por uno desde Figma a tu CSS es una pérdida de tiempo. Existe una forma de exportar design tokens de Figma a variables CSS de manera automática, usando un plugin que convierte los estilos locales en custom properties listas para pegar en tu código.

¿Qué son los design tokens y las custom properties en CSS?

Los design tokens son los valores fundamentales que el equipo de diseño define para mantener consistencia visual: colores, tipografías, espaciados y elevación. Cuando los traes al código, se convierten en custom properties de CSS, también conocidas como variables CSS, que se declaran dentro de :root y se reutilizan a lo largo del proyecto.

En el archivo de Figma del equipo de diseño aparecen organizados en familias claras:

• Colores primary para la identidad de marca.
• Colores neutrales para fondos, textos y bordes.
• Colores semánticos como info, success, warning y error.

¿Qué es un design token? Es un valor base del sistema de diseño (un color, un tamaño, un espaciado) que se nombra una sola vez y se reutiliza en diseño y código para mantener coherencia.

¿Por qué automatizar la exportación de tokens en lugar de copiarlos a mano?

Hacerlo manual funciona si tienes pocos colores, pero en un proyecto real puedes tener decenas de variantes entre primary, neutrales y semánticos. Inspeccionar cada estilo, copiar el hexadecimal y pegarlo en tu CSS se vuelve lento y propenso a errores.

La alternativa es delegar ese trabajo a un plugin que lea los estilos locales que el equipo de diseño ya organizó y los entregue en formato de variables CSS. Así reduces fricción entre diseño y desarrollo, y te aseguras de que el valor en código sea idéntico al de Figma.

¿Cómo usar el plugin Color Import Export en Figma? [01:30]

El flujo dentro de Figma es directo y lo puedes pedir al equipo de diseño si tú no tienes acceso al archivo. Estos son los pasos para exportar los colores como variables CSS:

1. Haz zoom out para ver todos los colores del sistema en pantalla.
2. Abre el plugin Color Import Export y dale correr.
3. Arrastra los colores que quieres exportar; el plugin los detecta de inmediato.
4. Selecciona el lenguaje CSS como salida.
5. Define el formato del nombre (mayúsculas o minúsculas) y el tipo de valor, en este caso hexa.
6. Copia el bloque generado o expórtalo como archivo.

Para que el plugin funcione, los colores deben estar creados como estilos locales dentro del archivo de Figma. Si el equipo de diseño no los ha registrado así, el plugin no podrá leerlos.

¿Qué hace el plugin Color Import Export? Toma los estilos locales de color de Figma y los devuelve como variables CSS dentro de un selector :root, listas para copiar y pegar en tu hoja de estilos.

¿Dónde guardar las variables CSS dentro del proyecto? [04:10]

Una vez tienes el bloque de variables, conviene darle un lugar claro dentro de la estructura del proyecto. Dentro de la carpeta stories se crea una subcarpeta llamada common, pensada para alojar todo lo que se comparte entre componentes.

Dentro de common se crea el archivo variables.css, que va a contener todas las custom properties del sistema. Ahí pegas el código que copiaste del plugin, con preferencia por nombres en minúscula porque resultan más legibles al consumirlos desde otros archivos.

Esta organización tiene una ventaja práctica: cualquier componente que necesite un color del design system lo consume desde el mismo archivo, y si un token cambia en Figma, basta con regenerar y reemplazar el bloque para propagar el cambio en todo el proyecto.

¿Qué reto queda pendiente con tipografías y otros tokens?

En esta primera versión solo se exportaron colores, pero un design system completo también incluye tipografías, espaciados y elevación. Ahí entra una pregunta de colaboración real con el equipo de diseño: cómo solicitar esos tokens y en qué formato te conviene recibirlos.

Algunas ideas para abrir la conversación:

• Pedir que las tipografías estén registradas como estilos locales en Figma, igual que los colores.
• Acordar una convención de nombres que funcione tanto en diseño como en código.
• Investigar plugins de Figma alternativos que exporten tipografías o tokens completos en JSON o CSS.

Cuéntame en los comentarios cómo plantearías esta petición al equipo de diseño y qué plugin usarías para llevar tipografías y espaciados a tu archivo de variables.