El servidor MCP de Figma en modo desarrollador expone tres herramientas núcleo —código, imágenes y definiciones de variables— directamente en el editor, y se consume desde Claude Code, Cursor, VS Code, Windsurf o Codex. La diferencia de fondo no está en que genere código, sino en contra qué lo genera.
Sin un mapeo explícito, el agente mira tu diseño y compone un botón nuevo: plausible, pero ajeno a tu sistema. Con Code Connect, el MCP le entrega el componente real de tu repositorio —con su import, sus props y su uso— y, si has definido la sintaxis de código de una variable, el token exacto. El agente deja de adivinar y empieza a reutilizar.
Es exactamente la capa de exposición de la spec de sistema agéntico: de poco sirve un sistema impecable que el agente no puede consultar. Aquí la lección operativa es que la pieza que más rinde no es el generador, sino el mapeo diseño ↔ código. Como lo resume el propio equipo de Figma: sin él, el modelo adivina.
Fuentes
- 01 Figma · Introducing the Dev Mode MCP serverwww.figma.com/blog/introducing-figma-mcp-server →
- 02 Figma · Code Connect en el MCPdevelopers.figma.com/docs/figma-mcp-server/code-connect-integration →
A seguir
Redactado con ayuda de IA, contrastado contra su fuente y firmado por Joan Arbó.
Del diario al fondo de armario
- GlosarioFigma Code ConnectUna función de Figma que conecta cada elemento de diseño con el trozo de código real que le corresponde en tu proyecto. Así, cuando un agente de IA genera pantallas, usa tus componentes ya construidos en lugar de inventarse otros nuevos. La conexión se le pasa al agente a través de un MCP (un canal por el que las herramientas le dan contexto al modelo).
- El ParteFigma Code ConnectFigma Code Connect explica cómo mapear componentes de diseño con código real. Permite a los agentes reutilizar librerías de código.
- HerramientaProtocolo anti-adivinaSi el modelo recompone en vez de reutilizar, el mapeo está roto. Esta es la prueba.
