Training app
Figma to Cursor
LLM, Figma, Design System, Cursor, Mcp Server
2025
A principio de año aparecian las primeras plataformas capaces de crear una app en segundos gracias a los LLM; como Lovable, V0, o base44. Lo cuál suponía el fin de los diseñadores y desarrolladores, nunca más tendríamos trabajo porque Lovable iba a ocupar nuestro puesto, una vez mas se equivocaron, no es tan sencillo deshacerse de nosotros… Lo que si ha pasado es que se han reformulado las metodologías de trabajo, los roles y las prioridades. Diseño y desarrollo están mas juntos que nunca, la línea empieza a desdibujarse en según que casos/productos, es posible que un emprendedor con tres cigarros y dos euros en el bolsillo opte por las IA´S generativas para resolver su MVP, lo cual es fantástico (tampoco son el perfil de contratador). Pero las grandes empresas, con equipos especializados en un producto validado y funcionando en el mercado siguen necesitando ambos perfiles, ahora bien, las cosas han cambiado.
En Junio de 2025 se hacia popular el concepto MCP Server o "Model context protocol" este protocolo dotaba a la IA de un contexto prioritario, lo cual ayudaba a reducir en gran medida las alucinaciones en según que procesos. Una avalancha de tiktoks inundaban la red, las automatizaciones ahora eran mas fiables que nunca, podías dejar que la IA gestionara tu negocio porque gracias a los MCP -> agentes de IA podrás dejar tu negocio en sus manos e irte a descansar a la playa. En cierto modo, y en según que casos bastantes específicos… es cierto.
A mi me surge otra pregunta ¿Y si dotamos a la IA de un sistema de diseño complejo? ¿Podrá mediante protocolos de contexto interpretar exactamente lo que necesito y encima ceñirse a mi sistema de diseño? Como si se tratara del becario definitivo. Estas preguntas son las que he intentado responder durante los últimos meses, en mi tiempo libre, creando una app de entrenamiento no-code, con cursor y a través de un MCP Server.
Set-up
Para hacer las pruebas empezaré con un componente sencillo, con el objetivo de comprobar que la comunicación entre ambos entornos esta funcionando correctamente, mas adelante intentaré que la IA de cursor sea capaz de hacer una pantalla mas compleja compuesta por varios componentes e interacciones.
Una vez conectado el MCP de figma a Cursor, empiezo a hacer pruebas con un componente sencillo, el objetivo es comprobar que la comunicación entre ambos entornos esta funcionando correctamente.
Le he pasado a cursor un enlace al componente y le he preguntado si es capaz de ver el componente, y en caso de que asi sea, que me describa lo que ve.
Por lo que se puede apreciar, no solo es capaz de nombrar los elementos que lo componen también hace referencia a otros componentes que tengo en el mismo archivo de Figma.
Crear una librería con React + Tailwind
Uno de mis objetivos principales es ser capaz de pasar mis sistemas de diseño (Tokens, variables y variantes) desde Figma a código, de la forma mas ágil posible. He creado una librería de React para contener el componente y verlo desplegado,
Tan solo con pasarle el enlace al componente y decirle a la IA que lo convierta en un componente React, lo ha pasado a código, esto me confirma que es viable la generación de componentes React a traves de los MCP.
Conclusiones
Por lo que he podido ver durante estos experimentos (esto es una pequeña muestra) la tecnología tiene futuro, pero es muy importante generar una base solida:
Tokens: tanto en Figma como en Cursor deben llamarse de la misma manera para que la IA sepa que debe usar.
Layers: esta partes es muy importante, para asegurar el correcto funcionamiento entre ambos todas la capas en figma deben estar nombradas y diferenciadas correctamente, esto ayuda a que Cursor no confunda elementos.
Variables: Enlazar todas la variables a los diseños en Figma, no dejar ninguna valor numérico sin enlazar, ayuda a que Cursor no alucine.
Teniendo en cuenta estas consideraciones es muy viable usar MCP para agilizar mucho el desarrollo de productos digitales. Estoy seguro de que en un futuro cercano estas tecnologías serán dominadas tanto por los equipos de diseño como los desarrolladores, es un buen puente entre los equipos.