Exportar design tokens de Figma a CSS

Curso de Storybook: Sistemas de Diseño con JavaScript

Contenido del curso

Visión general de los sistemas de diseño en desarrollo

Desarrollo de componentes

Historias en Storybook

Essential Addons en Storybook

Pruebas de componentes en Storybook

Próximos pasos

21
Qué sigue después de Storybook
01:17 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:22

Exportar design tokens de Figma a CSS

Curso de Storybook: Sistemas de Diseño con JavaScript

Clase 5 de 21

Clase 5 / 21

Recursos

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:

Haz zoom out para ver todos los colores del sistema en pantalla.
Abre el plugin Color Import Export y dale correr.
Arrastra los colores que quieres exportar; el plugin los detecta de inmediato.
Selecciona el lenguaje CSS como salida.
Define el formato del nombre (mayúsculas o minúsculas) y el tipo de valor, en este caso hexa.
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.

Visión general de los sistemas de diseño en desarrollo

Qué es Storybook y para qué sirve

Creación de Sistemas de Diseño con Storybook

Desarrollo de componentes

Instalación de Storybook con Vanilla JavaScript

Arquitectura de componentes en Storybook con Atomic Design

Exportar design tokens de Figma a CSS

Crear un botón reutilizable con Storybook

Estilización de Botones en CSS: Clases y Hover Interactivo

Componente Card en JavaScript con BEM

Container Queries vs Media Queries en CSS

Estilización de Componentes CSS con Container Queries

Historias en Storybook

Cómo estructurar historias en Storybook

Controles de argTypes para botones en Storybook

Parámetros y decoradores en Storybook

Essential Addons en Storybook

Qué son los add-ons en Storybook

Actions y Backgrounds en Storybook

Viewports y outline en Storybook

Pruebas de componentes en Storybook

Cómo usar el test runner de Storybook

Pruebas de Interacción con Storybook y Testing Library

Pruebas de Accesibilidad en Storybook con Add-ons

Pruebas visuales de UI con Chromatic

Próximos pasos

Qué sigue después de Storybook

Exportar design tokens de Figma a CSS

Progreso del curso

Visión general de los sistemas de diseño en desarrollo

Desarrollo de componentes

Historias en Storybook

Essential Addons en Storybook

Pruebas de componentes en Storybook

Próximos pasos

Recursos

Recursos