Claude Talk to Figma, mi primer servidor MCP

La semana pasada Marc, compañero del increíble equipo UX/UI de Making Science, nos pasó un servidor MCP para conectar Cursor a Figma y proporcionarle a sus agentes la capacidad no sólo de ver diseños en Figma, sino también de manipularlos 😳

El MCP era Cursor Talk to Figma, de Sunny Lazuardi. Si estás buscando la forma de conectar Cursor con Figma no sigas, este es tu MCP 👌🏻

Como tengo una licencia de Cursor, le dije que podía instalarlo y hacer con ellos una prueba. La prueba salió bien, la verdad que fue bastante sorprendente ver al agente de Cursor tomar el control de Figma y modificar un diseño, pero poco después me entró la duda de si era la forma correcta de que el equipo de UX/UI introdujese en su flujo de trabajo la IA, fundamentalmente porque Cursor es una herramienta enfocada al desarrollo de código.

Revisando el código del MCP vi que quizás se podría adaptar para usarlo en Claude Desktop, ya que mis compañeros de UX/UI tienen licencias de esta herramienta. Lo cierto es que el original se podía conectar ya a Claude, pero la forma de hacerlo no era evidente y no estaba descrita en la documentación, así que con ánimo de trastear un poco y aprender cómo funciona un MCP server por dentro, me puse manos a la obra:

1. Escribí un script para configurar Claude de forma automática lanzando un comando vía terminal: bun run configure-claude.
2. Amplié las características del socket:
   1. Logging mejorado
   2. Creación de endpoint de estado /status
   3. Sistema de canales para permitir que diferentes clientes se unan a canales específicos
   4. Inclusión de estadísticas de cada canal
3. Añadí tests para comprobar la correcta integración del proyecto.
4. Redacté un README.md con la documentación ya orientada a su uso en Claude.
5. Publiqué el MCP server como paquete de npm.
6. Publiqué el proyecto en GitHub...

Y voilá, mi primer MCP server: Claude Talk To Figma MCP 🥳

Actualización, 11 de abril

Después de unos días de pruebas, el equipo de UX/UI detectó que en la colección inicial de herramientas para modificar diseños faltaban algunas importantes como auto layout (layoutMode, paddingTop, paddingBottom, etc.), control tipográfico (fontName, fontSize, fontWeight, etc.) o creación de formas (createEllipse, createPolygon, createStar, etc.), por lo que actualmente estamos añadiéndolas poco a poco. Puedes seguir el progreso en el changelog del proyecto.