Transformar los fundamentos visuales que define el equipo de diseño en código reutilizable es uno de los pasos más importantes al construir un design system. Aquí se explica cómo extraer design tokens directamente desde Figma y convertirlos en variables CSS listas para usar en cualquier componente.
¿Qué son los design tokens y por qué importan?
Los design tokens son los valores fundamentales que el equipo de diseño establece en herramientas como Figma: colores, tipografías, espaciados y elevaciones [0:15]. Representan la fuente de verdad compartida entre diseño y desarrollo. Sin ellos, cada desarrollador tendría que inspeccionar manualmente cada color o tamaño de fuente, copiando valores uno a uno, lo que resulta lento y propenso a errores.
En el archivo de Figma que entrega el equipo de diseño se encuentran organizados los fundamentos del sistema:
- Colores primary con sus diferentes tonalidades.
- Colores neutrales para fondos y textos.
- Colores semánticos: info, success, warning y error [1:05].
Cuando el proyecto crece y la paleta se amplía, hacerlo de forma manual deja de ser viable. Por eso existen herramientas que automatizan la extracción.
¿Cómo exportar tokens de Figma con un plugin?
El plugin Color Import Export permite seleccionar los estilos locales de color en Figma y generar código CSS al instante [2:20]. El flujo es sencillo:
- Seleccionar todos los colores creados como estilos locales en Figma.
- Abrir el plugin y ejecutarlo; este detecta automáticamente los colores seleccionados.
- Elegir el lenguaje de salida: en este caso, CSS.
- Definir el formato de escritura: mayúsculas o minúsculas según preferencia.
- Seleccionar el tipo de valor deseado, por ejemplo hexadecimal [2:55].
El resultado es un bloque listo para copiar que utiliza la pseudo-clase :root con todas las variables declaradas como Custom Properties de CSS. Las Custom Properties son variables nativas del navegador que se declaran con el prefijo -- y se consumen con la función var() [3:10].
css
:root {
--primary-50: #f0e6ff;
--primary-100: #d1b3ff;
--neutral-100: #f5f5f5;
--success: #28a745;
--warning: #ffc107;
--error: #dc3545;
}
Este código se copia directamente del plugin y se pega en el proyecto sin ajustes adicionales.
¿Dónde organizar las variables en el proyecto?
Dentro de la estructura del proyecto se crea una carpeta llamada Common al mismo nivel que Stories [4:00]. Esta carpeta contiene todo lo compartido entre los distintos componentes del sistema. Allí se genera el archivo variables.css, donde se pegan las Custom Properties exportadas.
¿Qué tokens faltan por agregar?
El archivo inicial cubre únicamente los tokens de color. Sin embargo, un design system completo también necesita tokens de tipografía —familias, tamaños, pesos— y de espaciado [4:25]. Integrar estos valores sigue la misma lógica: el equipo de diseño los define como estilos locales en Figma y el equipo de desarrollo los exporta y los traduce a variables CSS.
¿Cómo mejorar la comunicación con el equipo de diseño?
Solicitar los tokens faltantes requiere una comunicación clara. Lo ideal es pedir que todas las decisiones de diseño estén registradas como estilos locales dentro de Figma antes de la entrega. De esa forma, cualquier plugin de exportación puede leerlos y generar el código correspondiente sin ambigüedades.
Si conoces otro plugin de Figma que facilite esta tarea o tienes una forma particular de solicitar tokens al equipo de diseño, compártelo en los comentarios para enriquecer la conversación.
