De Figma a TV y Más Allá: Escalando React UI con Design Tokens y MCP

Hola a todos. Soy Seungho Park de LG Electronics. Hoy, compartiré cómo escalamos una UI de React en muchas plataformas usando design tokens y Figma. Nuestro objetivo era simple, diseñar una vez y escalar en todas partes. Permítanme presentarme brevemente. Estoy liderando el motor web y el framework web para dispositivos LG. Soy el propietario del framework Enact, que se envía en decenas de millones de televisores cada año. También es de código abierto. En mi charla anterior en React Summit, compartí ideas de producción y estudios de caso del desarrollo de UI para TV.

Esto es lo que cubriremos hoy. Primero, por qué necesitamos design tokens en primer lugar. Luego, qué son los design tokens y cómo estructuramos nuestra arquitectura. Después de eso, mostraré nuestra pipeline de CI CD y cómo la IA se integra en el flujo de trabajo. A lo largo del camino, les mostraré algunas demostraciones. Comencemos. LG envía una amplia gama de productos. Electrodomésticos, televisores, aplicaciones móviles, web y mucho más. Cada equipo construyó su propia UI a su manera. El mayor problema era la inconsistencia sin una gobernanza central para la marca.

El equipo de diseño introdujo un sistema de diseño, y mi trabajo era convertir esos tokens en una biblioteca de código real. ¿Qué son los design tokens? Los design tokens son valores nombrados para decisiones de diseño, colores, espaciado, tipografía y más. En lugar de valores codificados en todas partes, usamos un nombre compartido en todas las plataformas. Así es como se ve en la práctica. A la izquierda, el color está codificado. Tienes que encontrar cada código hexadecimal en cada archivo solo para cambiar un tono de gris. A la derecha, usamos un token nombrado en su lugar. Cambia el valor una vez, y todo se actualiza en todas partes. Nuestros design tokens tienen tres capas, primitiva, semántica y de componente. Los tokens primitivos contienen los valores en bruto como un array específico. Los tokens semánticos dan a esos valores un rol como el color de la superficie de un botón.

Los tokens de componente describen un elemento de UI específico como el contenedor de un botón primario. Cada capa apunta a la que está por encima de ella. Usamos una paleta primitiva compartida en toda la empresa. Los tokens semánticos y de componente se definen por plataforma. Móvil, web y webOS tienen cada uno los suyos. Esto nos da una única fuente de verdad para los colores de la marca, y al mismo tiempo, cada plataforma mantiene la flexibilidad que necesita.

Así que con esta estructura, obtenemos una única fuente de verdad. En Figma, el diseñador gestiona todos los tokens en un solo lugar. Cada plataforma elige el tema que necesita a través de la función de modo de Figma. Esto es lo que hizo que nuestro sistema de diseño fuera realmente escalable. Teníamos los design tokens, pero el siguiente problema era mantenerlos sincronizados. Resolvimos esto con tres roles trabajando juntos.

Primero, el equipo de diseño. Actualizan los tokens en Figma y etiquetan o lanzan cuando están listos. Ese es su único trabajo en esta pipeline. Luego, GitHub Actions toma el control. Obtiene las últimas variables de Figma, las compara con los tokens actuales y las convierte en el formato que necesitamos. Luego abre una solicitud de extracción automáticamente. Finalmente, el equipo de desarrollo solo revisa la solicitud de extracción y publica la versión. Sin copiar y pegar manualmente, y sin esperar días. Entonces, ¿cómo extrae realmente la pipeline los datos de Figma? Figma proporciona una API rest oficial de variables. Te permite leer todos los design tokens directamente desde un archivo de Figma. Usamos el endpoint get local variables para obtener cada token en el archivo.

Veamos cómo lo llamamos. Esta es la llamada real que usamos. El código fuente completo está en GitHub, enlazado al final. Durante la acción, genera un diff de cada cambio añadido, modificado y eliminado. Este diff es de donde se construye la pull request.

Veamos esto en acción. En esta demo, verás la ejecución de GitHub Action de principio a fin. Obtiene los tokens, abre una pull request, y verás el diff justo dentro del PR. Primero, automatizamos las actualizaciones de design tokens con Figma Sync. Al vincular la API de variables de Figma a GitHub Actions, cualquier cambio de diseño desencadena un flujo de trabajo para obtener y transformar esas variables automáticamente. Por supuesto, puedes ejecutar el flujo de trabajo manualmente.

Ahora está comprobando las variables de Figma usando la API de variables de Figma. Una vez que el flujo de trabajo se completa, genera una nueva pull request para que el equipo la revise. Al mirar la descripción del PR, el bot ha resumido automáticamente exactamente qué tokens fueron añadidos o modificados, facilitando a los desarrolladores el seguimiento de los cambios. Y en la pestaña de Cambios de Archivo, puedes ver las actualizaciones reales. Nuestros archivos JSON y CSS están actualizados con nuevos valores de diseño, manteniendo todo sincronizado. Aquí hay otro beneficio de usar design tokens. Aplicar un tema constante en la aplicación se vuelve realmente simple.

Porque cada componente proviene de tokens semánticos, cambiar un archivo en la raíz cambia la apariencia de toda la aplicación. No se necesitan cambios en los componentes. Veamos esto en funcionamiento. En esta demo, verás dos pantallas una al lado de la otra. El monitor de la izquierda es el sitio web lge.com. El monitor de la derecha es la aplicación Home Hub de WebStv. Ambos usan los design tokens de los que acabamos de hablar. Observa lo que sucede cuando cambio el tema. Tema claro, ahora tema oscuro, y finalmente un tema navideño. Ambas pantallas el mismo tema cada vez. Dos plataformas completamente diferentes, pero una apariencia consistente. Ese es el poder de un sistema de tokens compartidos.

Diseña una vez y escala en todas partes. Hasta ahora, los design tokens han automatizado todo el estilo visual. Colores, espaciado, tipografía, todo manejado. Pero aún queda una pieza. Convertir un diseño de Figma en código de aplicación real con tu componente. En un producto real, usas bibliotecas externas como ShedCN, MUI o Inet. O construyes tus propios componentes cuando lo necesitas. Así que para que la salida sea realmente utilizable, tiene que ser generada usando el componente que tu aplicación ya utiliza. Ese es el verdadero cuello de botella. Y eso es exactamente lo que CodeConnect resuelve.

Para resolver este cuello de botella, usamos dos piezas juntas. Primero, Figma MCP. Es una interfaz que permite a una IA leer tu archivo de Figma directamente. El diseño, la disposición, los tokens, todo. Segundo, CodeConnect. Aquí es donde le dices a Figma que este componente en el diseño se mapea a este archivo en nuestra base de código. Cuando juntas estas dos cosas, la IA no solo ve el diseño. Sabe exactamente qué componentes usar para construirlo.

Aquí está el flujo de trabajo de principio a fin. Comienza con un diseño en Figma. Luego, Figma MCP extrae el contexto, la disposición, los componentes, los tokens. Todo en una forma estructurada que una IA puede entender. A continuación, CodeConnect mapea cada componente de Figma al archivo real en nuestra biblioteca de React. Y finalmente, la IA genera el código usando tus componentes.

La entrega que solía ser manual ahora es un flujo continuo. Esta es la propia definición de Figma de CodeConnect. En resumen, es un puente entre tu base de código y el modo de desarrollo de Figma. Le dice a la IA exactamente a qué archivo en tu repositorio cada componente de Figma se mapea. La documentación completa está enlazada al final.

Esta es la interfaz de CodeConnect dentro de Figma. Lo que estás viendo es uno de nuestros diseños de aplicaciones reales en Figma ya conectado a CodeConnect. Aquí puedes ver cómo cada parte de esta pantalla está conectada. Esta pantalla es una vista de estilo emergente, así que la mapeé a un componente de panel emergente fijo inactivo. Y dentro del emergente, también conecté las piezas más pequeñas, el encabezado, el deslizador, y los botones. Puedes apuntar CodeConnect a un archivo local en tu repositorio, o a un archivo en GitHub. Ambos funcionan. Usa el que se ajuste a la configuración de tu equipo.

Ahora, veamos cómo todo esto se une. En esta demostración, un agente de IA utilizó Figma MCP y CodeConnect para convertir un diseño de Figma en código React real, con los componentes reales de nuestra base de código. Vamos a verlo. Comenzaré pegando el enlace del diseño y la instrucción principal de Figma. Para guiar al agente, he añadido tres directrices específicas. Construir con nuestro esqueleto de aplicación, usar CodeConnect y aplicar nuestros design tokens.

El agente comienza analizando el proyecto, vinculando los datos de Figma con CodeConnect para identificar el componente Sandstone correspondiente. Sandstone es nuestra biblioteca de componentes para WebSTV construida sobre Inet. El agente se sumerge profundamente en las APIs de Sandstone. No solo busca nombres de componentes, está analizando las definiciones completas de los componentes. El objetivo es encontrar las props exactas que coincidan con el estado del diseño en Figma. Esto incluye todo, desde tamaños de botones hasta diseños de paneles, asegurando que cada atributo esté mapeado con precisión a la capacidad de nuestro framework.

Ahora, el agente verifica si los paquetes requeridos están disponibles para instalar. Dado que faltan en el entorno, inicia automáticamente la instalación a través del terminal. Una vez que el entorno está listo, avanza para implementar el diseño, generar los archivos module.js y main.panel.js. Con el código escrito, el agente ejecuta InetPack para verificar la compilación y buscar errores en tiempo real. Una vez que la tarea está completa, proporciona un resumen de todos los componentes y estilos que acaba de implementar, confirmando una implementación exitosa. Revisemos los resultados.

Al pasar el cursor sobre el código, puedes ver el componente real de panel emergente fijo aquí y los componentes de botón aquí. En el último archivo, puedes ver que los design tokens están importados y aplicados correctamente a nuestra variable de color semántico. Ahora ejecutemos la aplicación que el agente acaba de generar. El icono de encendido se aplica en el botón. El número de brillo se actualiza a medida que muevo el deslizador. Y la tecla de flecha del control remoto también funciona directamente. Aquí está el código que el agente realmente generó. A la izquierda, puedes ver que el código de la aplicación generada utiliza nuestros componentes correctamente. Utiliza paneles emergentes fijos, botón, encabezado y deslizador, y cada componente tiene las props correctas aplicadas. A la derecha está el archivo de estilos. El agente importó los design tokens de los que hablamos antes, y en lugar de valores codificados, utilizó la variable de token. Así que, todo está conectado.

Los componentes son reales. Los tokens son reales. Esto es lo que debes llevarte de hoy. Primero, estructura tus tokens para escalar. Componente semántico primitivo, tres capas, cada una con un rol claro. Con esta estructura, un sistema de diseño puede servir a muchas plataformas. Segundo, automatiza la pipeline. No copies y pegues los tokens de Figma en el código. Conéctalos con un flujo de trabajo CI, para que los cambios de diseño se conviertan en una pull request por sí mismos. Tercero, aprovecha MCP para un diseño de código sin transferencia. Empareja Figma MCP con Code Connect para que la IA no solo vea el diseño, sino que genere código usando los componentes reales de tu base de código. Tokens, automatización y MCP. Así es como nos acercamos al diseño-una-vez, escalar-en-todas-partes.

Estas son todas las referencias que utilicé hoy. La más importante está en la parte superior. Nuestro repositorio de tokens en GitHub. Siéntete libre de echar un vistazo o usarlo como punto de partida para el tuyo propio. Espero que esta sesión te haya dado una visión práctica sobre cómo construir UIs de React que escalen en muchas plataformas con design tokens. Si tienes alguna pregunta, por favor contáctame a través del enlace aquí. ¡Gracias por acompañarme hoy. ¡Adiós!