Fast Track Design to Code With Figma MCP

Hola a todos. Hoy voy a hablarles sobre la composición de servidores MCP, FastTrack Design to Code. Así que comencemos. Y hola a todos. Soy Riccardo. Soy un defensor de desarrolladores en Figma. Estoy basado en Londres, en Inglaterra, pero soy originario de Italia. He estado en Inglaterra desde 2010, y en realidad soy bastante nuevo en Figma. Me uní hace solo seis meses. Y antes de eso, trabajé como ingeniero de software durante 15 años, más o menos. Y he hecho muchas cosas de front-end. Y más recientemente hice mucho trabajo en el sistema de diseño. Trabajé en el equipo de sistema de diseño. Trabajé en múltiples sistemas de diseño.

Así que el rol en Figma se llama defensor de desarrolladores. Es un nombre raro. Entonces, ¿qué hacemos? Somos practicantes que intentan aportar el mayor valor posible a los desarrolladores, como en su trabajo diario y todos los desafíos que puedan enfrentar, especialmente en el contexto de trabajar con diseñadores. Así que enfoquémonos en eso primero. Así que todos sabemos que soy ingeniero. Era ingeniero de front-end. Solía trabajar con diseñadores todo el tiempo. Y todos sabemos que el desafío en el desarrollo de producción. Es como la desconexión entre el diseño y la implementación. Como pueden ver en una ilustración muy linda, el diseño está tan bien organizado, y es tan bonito. Y luego, una vez que te mueves a la implementación, es más o menos lo mismo. Se ve igual, pero no es como querías inicialmente en el diseño. Las piezas están ahí, pero están un poco desalineadas. No se ven tan bien como en el diseño. Y esto es muy, muy común. Y esto sucede porque pasar del diseño al código, es como un proceso con pérdida.

Esperamos tener una línea recta, pero en cambio es más como una montaña rusa. Hay mucho ida y vuelta. Hay muchos momentos donde hay incomprensión, malentendidos, frustración. Hay múltiples fuentes de información. Como puedes ver aquí, podrías reunir información de un mensaje de Slack o en una llamada o durante la entrega, y luego hay algunos problemas de ida y vuelta. Todo esto crea frustración muy a menudo de ambos lados, tanto para diseñadores como para desarrolladores.

Y creemos que esto sucede principalmente porque el diseño y el código están siendo aislados. Tú como desarrollador, trabajas en tu editor de código, y tu compañero diseñador trabaja en Figma, diseña cosas en Figma, y luego tienes que implementar en tu editor de código lo que ha sido diseñado en Figma. Y esto es como las dos aplicaciones diferentes, cualquiera que uses como editor de código. Simplemente tienen un lenguaje diferente. El contexto es diferente. Solo estás tratando de traducir un contexto, como el del diseño, al de la base de código, moviéndote de una herramienta a la otra. Y esto puede volverse complicado, nuevamente, como frustración, malentendidos, mala comunicación.

Por eso en Figma, trabajamos muy duro para crear herramientas que puedan ayudar a eliminar esta brecha y eliminar el aislamiento y acercar lo más posible a desarrolladores y diseñadores. Por eso tenemos DevMod. DevMod hace que sea muy fácil para ti como desarrollador entrar en Figma y realmente encontrar la información que necesitas para luego volver a tu editor de código y construir algo. Así que puedes entrar en Figma, puedes inspeccionar de la selección de diseño solo la parte importante, y luego vuelves a tu editor de código con el conocimiento, y luego comienzas a implementar algo.

Este es un buen primer paso, pero también sabemos que se necesita más para que los desarrolladores realmente, nuevamente, cierren esta brecha que tenemos. Por eso también trabajamos en implementar algo llamado Code Connect. Code Connect es una herramienta bastante útil. Es como un puente que puedes traer entre el diseño y los desarrolladores. Eso significa que además de DevMod, donde puedes ir, puedes inspeccionar en un archivo de Figma alguna información que necesitas como desarrollador. También puedes encontrar una conexión uno a uno entre lo que ves en el diseño y lo que realmente tienes que escribir en tu editor de código para lograr exactamente la selección de diseño. Así que encontrarás un fragmento de código, puedes simplemente copiar y pegar desde Figma a tu editor de código. Y realmente lo que tendrás en el código es exactamente la representación y el diseño. Y esto es muy útil. Vemos a muchos desarrolladores usando esto y realmente hace que esta conexión sea muy fluida.

Pero nuevamente, hay aún más que podemos hacer. Y por eso lanzamos hace unos meses nuestro Figma MCP server. Y lo que hace el Figma MCP server es que facilita mucho a los agentes traducir diseño a código. Hoy en día, la mayoría de los editores de código tienen un agente dentro y este agente ya tiene comprensión de tu base de código porque vive allí en tu base de código, pero carece de comprensión del diseño. Y gracias a nuestro Figma MCP server, podemos simplemente pasar esta información de Figma al agente para que el agente realmente, cuando estás tratando de construir algo, entienda mucho sobre la selección de diseño que estás tratando de implementar en tu base de código. Y porque, hablando de editor de código y hablando de IA, ya sabemos que la IA es bastante buena haciendo código y generando código.

Si le das una instrucción a tu agente, ni siquiera dentro de tu editor de código, solo en una aplicación de chat, y simplemente dices, construye este ejemplo, construye una aplicación móvil de pedidos de comida, hay una barra de búsqueda, hay una barra de búsqueda allí, hay un mapa y un montón de opciones, hay etiquetas, ya hará un trabajo bastante decente. Lo sabemos. Pero luego, si ejecutas tu IA y tu agente dentro de tu editor de código, entonces eso dará un resultado aún mejor porque entonces el agente tiene un contexto sobre tu base de código. Así que, por ejemplo, entiende el lenguaje en el que quieres que se construya esta aplicación, entiende el framework que ya estás usando, entiende los componentes que quieres usar. Si, por ejemplo, tienes un sistema de diseño, tiendes a reutilizar componentes. Así que el resultado se vuelve aún mejor.

Está más cerca de lo que realmente quieres. Y luego, si traes la información de tu lado de diseño, gracias a nuestro MCP server, la salida es aún mejor porque ahora el agente también entiende lo que quieres de tu lado de diseño. Qué tipo de colores quieres usar, qué tipo de espaciado quieres usar, todos estos aspectos muy, muy importantes que harán algo mejor en términos de diseño, en términos del lenguaje que tiene tu empresa, en términos de todo el esfuerzo que tu diseñador puso en diseñar una pantalla para ti, entonces toda esta información puede ser transmitida al agente, y el agente puede realmente crear algo que esté muy, muy cerca de lo que es la intención inicial en el lado del diseño.

Y por eso tenemos el Figma MCP server, es realmente útil para que los agentes generen un nuevo fragmento de código utilizando toda la información que tenemos en el diseño, las variables y los colores y el patrón de diseño. Es un montón de información que realmente puede ayudar al flujo de trabajo de desarrollo, pasando de diseño a código y evitando el proceso con pérdidas y volviéndose más enfocado. Y nuestro MCP, es nuestro MCP, está oficialmente hecho por Figma, es mantenido por nosotros. Tiene una conexión directa con Figma, es de seguridad a nivel empresarial, y lo mantenemos y lo apoyamos. Ya hemos hecho múltiples mejoras, hemos introducido múltiples herramientas. Nuestro MCP server solía ser local inicialmente, ahora también es remoto, lo que significa que puedes usarlo incluso si no tienes la aplicación de escritorio de Figma ejecutándose en tu computadora.

Así que tal vez un diseñador solo te pase un enlace de una selección de diseño que tienes que implementar, y puedes simplemente usar eso y realmente usarlo. Quiero mostrarte un ejemplo muy rápido de cómo funciona en la práctica. Como puedes ver, seleccioné una selección en Figma y luego en mi ID estoy usando cursor en este caso, pero funcionará igual en VS Code, todos los otros ID, tienen capacidad de agente. Puedes ver que estoy pidiendo realmente obtener una selección, implementando este archivo de demostración, y estoy diciendo usar estos otros archivos, usar pricing, solo porque queremos hacer una demostración real de probablemente el código de back-end, los datos de back-end vienen de un CMS o de otro lugar, no del diseño.

Como puedes ver, está pasando por, entendiendo el diseño, tomando una captura de pantalla, pero también entendiendo el código que ya estás usando, todos los componentes. {{^}}Como puedes ver, es como importar un montón de componentes que ya estaban en el repositorio, y está diciendo, está bien, construye todo esto, aceptamos estos cambios, miramos esto, y puedes ver que está muy cerca del diseño, no es perfecto.

Y quiero mostrar exactamente una situación donde la salida es lo suficientemente buena, como 90-95% allí, pero no al 100%, porque queremos ser realistas. Esos MCP servers y la IA en general son bastante útiles, pero hay trabajo que tienes que hacer para poder obtener y obtener un resultado muy bueno. No es como una varita mágica que simplemente indicas algo y luego todo será perfecto. Por eso usualmente tenemos algunas recomendaciones que realmente pueden ayudar a obtener lo mejor de tu diseño y realmente llevar la mayor cantidad de contexto posible a tu agente y luego guiar a tu agente tanto como sea posible para obtener algo bueno.

Así que siempre decimos, en el archivo de diseño, y esto es principalmente probablemente para tus compañeros diseñadores, pero creo que es un buen conocimiento para tener en general, intenta reutilizar componentes que ya tienes allí, tus botones y tus tarjetas. Y como decía al principio, tenemos una herramienta muy poderosa llamada Code Connect. Intenta usar eso, intenta implementarlo. Esa es la mejor manera de reutilizar el código que ya existe. Así que si tienes Code Connect, entonces el agente entiende, está bien, este es el diseño que tiene que ser implementado, pero esos componentes que se usan en este diseño, ya existen en el código, así que realmente debería reutilizarlos. No debería crear un nuevo botón, una nueva tarjeta, o algo así.

Y también, obviamente, intenta usar variables. Intenta tener tus variables en el lado del diseño conectadas a tus tokens en el lado del código porque obviamente, el agente entiende la conexión y reutilizará los tokens en lugar de escribir nuevos estilos desde cero basados en las variables. También, nuevamente, en el lado del diseño, intenta tener una buena convención de nombres para tus capas. Nómbralas adecuadamente. No uses solo nombres aleatorios porque, nuevamente, esta información se transmite a través del MCP al agente, por lo que el agente puede realmente entender bastante leyendo esos nombres de capas. Usa AutoLayout. Es una característica masiva que tenemos en Figma que realmente ayuda a comunicar al agente que quieres que algo sea responsivo y se adapte basado en el viewport, por ejemplo, del navegador o si construyes en una app, el tamaño diferente de tus dispositivos.

Y también, usa anotaciones en DevMod con algo muy útil llamado anotación. Y está destinado a que un diseñador en el proceso de entrega transmita un montón de información al ingeniero que va a implementar el componente, el diseño, y decir algo. Es más como una intención explicada, algo que no es visible en el lado del diseño. Ver tal vez algo sobre accesibilidad, y luego tal vez tu diseñador escribirá una anotación y dirá, oh, recuerda que esta imagen necesita un valor alt para que pueda ser leída por lectores de pantalla o algo así. Esas anotaciones también pueden ser transmitidas al agente a través del MCP. Nuevamente, información realmente útil para que el agente entienda tanto como sea posible sobre cómo quieres construir algo basado en una selección de diseño.

Pero también una vez que estés en tu editor de código, también recomendamos algunas sugerencias o mejor manera de trabajar para el propio agente. Cuando le des una instrucción a tu agente, intenta ser lo más explícito posible. En el ejemplo que te estaba mostrando, la instrucción era muy, muy simple. Solo implementa esto desde la selección en este archivo, y luego estaba el extra sobre usar algunos datos de backend. Pero si sabes, por ejemplo, qué tipo de componentes quieres usar y qué tipo de codificación de estilo o sintaxis o framework quieres usar, intenta usar eso tanto como sea posible. Intenta informar al agente. Después de todo, al agente, deberías tratarlo como a un colega, alguien que realmente te ayuda a hacer el trabajo. Así que obviamente, cuanta más información le des a un colega, en términos de construir algo, más realmente el colega puede entender y realmente puede construir algo que esté muy cerca de la especificación que compartiste.

Similar, there's some examples. Por ejemplo, primero que nada, genera iOS con código UI desde este marco. Así que quieres decirle a tu agente, está bien, quiero que se use este lenguaje de programación. Quiero este framework específico. Esto es muy importante. Y tenemos otros ejemplos allí.

Y luego, sí, como estaba diciendo, tu agente debería convertirse en tu colega. La intención clara es muy, muy útil para llevar a un mejor resultado. Y otra recomendación que hacemos, y lo que estaba mostrando antes, como el ejemplo en el diseño y también, como puedes ver, como las capturas de pantalla del código, esto es como ambos basados en SDS, como sistema de diseño simple. Ese es un sistema de diseño que construimos en Figma, tanto en el lado del diseño como en el lado del código. Y tanto el diseño como el código son de código abierto.

Así que puedes encontrar el archivo de Figma en nuestra comunidad y puedes encontrar el repositorio con el lado del código del sistema de diseño en GitHub. Y así como, ya sabes, es un repositorio abierto, así que puedes echar un vistazo, puedes bifurcarlo, y lo construimos porque queremos mostrar y ayudar a otros desarrolladores y diseñadores tal vez a iniciar un nuevo sistema de diseño y a inspirarse. Así que en el repositorio, no te mostré en el video, pero puedes ver aquí, tenemos un montón de reglas personalizadas, un montón de instrucciones. Siempre recomiendan escribirlas, porque nuevamente, esto informa al agente sobre cuáles son tus guías, cuáles son tus preferencias en términos de, ya sabes, cómo quieres construir archivos, cómo no quieres construir archivos, ya sabes, qué tipo de patrón de nombres quieres usar, qué tipo de trampas quieres evitar.

Esas cosas son muy, muy importantes. Nuevamente, quieres mantener a tu agente lo más enfocado posible en la tarea y no hacer que tu agente, de alguna manera, piense demasiado o trate de entender las cosas. Si sabes cosas, comparte la información con el agente. Y esta es la mejor manera de preparar una lista de reglas que luego el agente pueda consumir y entender. Y esos archivos tienden a ser largos porque generalmente hay muchas reglas basadas en el tamaño de tu repositorio, pero puede haber bastante material. Pero también decimos que, ya sabes, la IA puede ayudarte a escribir esas reglas. Como si tienes un repositorio, puedes pedirle a tu agente, está bien, revisa el repositorio, escribe un conjunto de reglas basado en cómo escribo componentes, cómo estructuro mis carpetas. Eso podría ser un punto de partida, y luego puedes continuar desde ahí.

Entonces, ya sabes, estaba mostrando en el MCP, conectas una aplicación, como Figma, a tu agente, y sientes como, ya sabes, una ciencia, estás juntando cosas. Es como sentirse un mago, como, ya sabes, sacando un conejo blanco de un sombrero. Pero, ya sabes, también pensamos que, ya sabes, es importante entender desde el lado del diseño, lo que tienes que hacer. Quieres descomponer la pantalla en pequeñas partes porque, ya sabes, en el ejemplo que te estaba mostrando, solo seleccioné una sección simple. Sabes, si quieres construir una página completa, no selecciones toda la página. Hazlo sección por sección. Es mucho más importante. Mantienes el conocimiento, como corto y enfocado, para tu agente a través del servidor MCP. Y sí, como decía antes, una vez que haces esta conexión y las cosas funcionan, te sientes un poco como un mago, ¿verdad? Pero solo estás tratando con uno, como un MCP, un servidor. Eres un mago, pero no uno muy bueno. Solo estás malabareando una cosa.

Como, ya sabes, ¿qué pasa si combinamos otros contextos, otra información de otras fuentes, verdad? Así que echemos un vistazo. En esta segunda demostración, esto es una continuación de lo que te estaba mostrando antes. Así que ahora tenemos algo construido, y quiero verificar cómo se ve. Así que está ejecutándose en localhost, y en realidad le estoy pidiendo al agente que redimensione la ventana y verifique si en realidad en móvil, está en un diseño de una columna porque queremos que sea responsivo. Como puedes ver, fue allí, tomó una captura de pantalla. Está entendiendo que no se ve como queremos, y va a cambiar el archivo real con el código, tomando la captura de pantalla nuevamente. Y ahora nos está diciendo, está bien, arreglé eso. Ahora es realmente un diseño de una columna. Y puedes ver que estoy aceptando el archivo, y ahora puedes ver que es completamente responsivo. Y ahora es mucho mejor, ¿verdad? Estás usando múltiples MCP, múltiples contextos juntos para realmente ayudar a tu agente a construir cosas de la mejor manera posible. Lo que estaba mostrando antes, como ese conocimiento, la capacidad de realmente ir a un navegador, abrir una ventana, mover, redimensionar la pantalla, tomar capturas de pantalla, en realidad era, era como el Google Chrome como DevTools MCP como un MCP que realmente te ayuda a interactuar con una página en vivo, y en realidad puedes tomar capturas de pantalla, puedes redimensionar el navegador, incluso puedes hacer clic en cosas, puedes seguir un flujo completo.

Y de nuevo, ahora te sientes como un mejor mago. Estás malabareando con múltiples cosas, pero tal vez podamos hacer algo aún más. Digamos que, ya sabes, tu diseño generalmente vive en Figma, pero tu conocimiento podría vivir en otro lugar. Como que los diseñadores tal vez escribieron un montón de documentación para ti como desarrollador para entender cómo implementar algo. El ejemplo estaba en Notion. Así que ahora veamos qué podemos hacer con eso.

Ahora estoy copiando y pegando un enlace, y le estoy pidiendo al agente que busque en la página, encuentre la información sobre el comportamiento responsivo, y lo implemente en lo que ya hemos construido. Y luego ahora, como puedes ver, está pasando por, es capaz de realmente ir a la página, conectarse a la página, encontrar la página, como obtener la información, y tratar de comparar con lo que tenemos en el código. Y está haciendo una comparación, está encontrando cosas que no están claras, que no están correctas y no son como se supone que deben ser. Así que ahora va a aplicar algunos cambios.

Como puedes ver, está volviendo a la página de nuevo, está tomando una captura de pantalla, está comparando la página con el conocimiento, con el código, y tratando de realmente encontrar algo que realmente esté conectando todas las diferentes piezas, y tratar de entender cómo tiene que construir algo. Y ahora, como puedes ver, hizo un montón de cambios. Y ahora soy un verdadero mago. Ahora estás realmente malabareando con múltiples piezas. Y el conocimiento estaba en Notion, y estaba usando el servidor MCP de Notion, pero tal vez tu conocimiento, tu documentación tal vez no esté al último, no tienes las herramientas. Hay muchos, muchos, muchos servidores MCP basados en múltiples aplicaciones y servicios.

Esta es solo una lista que encontré en el sitio web de Coursera, y hay mucho aquí. Pero potencialmente hay aún más, y hay uno nuevo cada día. Y al final, MCP, vienen de todos los diferentes lugares, de todas las diferentes aplicaciones y servicios para todos. E incluso puedes construir tu propio MCP. Por ejemplo, con Figma, hemos visto clientes que están en una situación donde tal vez su sistema de diseño, en términos de base de código, está en un repositorio, pero luego están construyendo una aplicación en otro repositorio.

Así que quieren poder tener al agente informado por el conocimiento de los componentes que existen en el sistema de diseño. Así que construyen como un pequeño MCP para conectar los dos repositorios. Eso significa que cuando le piden al agente en el repositorio de la aplicación que construya algo, el agente es capaz de realmente encontrar los componentes del repositorio del sistema de diseño y poder importar y consumir los componentes basados en otro repositorio. Así que esto es muy útil.

Y al final, cuando combinas múltiples servidores MCP, traes un montón de beneficios. Tienes un montón de conocimiento proveniente de diferentes fuentes. Tienes conocimiento visual, conocimiento de comportamiento que puedes validar, porque puedes, por ejemplo, en el ejemplo, puedes probar lo que construiste en el navegador.