# De Figma a código con MCP: cómo un agente lee tu diseño

> El servidor MCP de Figma deja que un agente de IA lea frames, variables y componentes para escribir código. Cómo conectarlo, preparar el archivo y sus límites.

*Tags: ia, mcp, figma, handoff, design-to-code*

---


> [!info] Definición Rápida
> **Figma MCP** es un servidor del Model Context Protocol que da a un agente de IA acceso estructurado a tus archivos de Figma. Con él, el agente puede leer un frame, sus variables y sus componentes, y usarlos como base para escribir código. El resultado es contexto de diseño que el agente debe traducir a tu proyecto, no código final.


## ¿Qué es MCP y qué papel juega Figma aquí?

MCP (Model Context Protocol) es, según su sitio oficial, un estándar abierto para conectar aplicaciones de IA con sistemas externos, comparable a un puerto USB-C: una forma común de enchufar cosas distintas. Para entender el protocolo a fondo, lee [[mcp|MCP explicado para diseñadores]]; para ver qué más puedes conectar, [[servidores-mcp-para-disenadores|servidores MCP útiles para diseñadores]]. Aquí nos quedamos en el flujo concreto de Figma a código.

El servidor es de Figma y expone herramientas con nombres concretos. Las principales de lectura son `get_design_context` (contexto y código de una selección), `get_metadata` (un esquema ligero en XML), `get_screenshot`, `get_variable_defs` (variables y estilos usados) y `search_design_system` (busca componentes, variables y estilos en tus bibliotecas). En vez de que copies valores a mano desde Dev Mode, el agente pregunta a Figma por el frame y recibe estructura, estilos y variables.

## ¿Cómo preparo mi archivo para que el agente lo entienda?

Tu trabajo cambia: los nombres, las capas, el auto layout y las variables ahora los lee una máquina. Si un componente se llama "Frame 1268" o los colores son valores sueltos, el agente tendrá que adivinar. La guía de Figma para estructurar archivos recomienda:

- **Componentes** para todo lo que se repite (botones, tarjetas, campos, elementos de navegación), para que el agente reutilice una sola implementación.
- **Variables** para espaciado, color, radio de borde y tipografía, para que use tus tokens y no valores fijos. Si quieres repasar la diferencia, mira [variables y estilos](/es/wiki/conceptos/variables-vs-styles/) y la [arquitectura de tokens](/es/wiki/conceptos/arquitectura-de-tokens/).
- **Nombres descriptivos** en capas y componentes, en lugar de "Frame1268" o "Group5".
- **Auto layout**, que evita el posicionamiento absoluto y suele dar código más limpio y predecible. Antes de generar, cambia el tamaño del frame para comprobar que se comporta bien.
- **Anotaciones** para lo que no se ve, como cómo debe alinearse o responder un elemento.
- **Code Connect**, la función de Figma que enlaza componentes del diseño con componentes de tu código. La propia guía la llama la forma más eficaz de que el agente reutilice tus componentes reales; sin ella, tiene que adivinar cuál corresponde.

Todo esto descansa en un [sistema de diseño](/es/wiki/conceptos/sistema-de-diseno/) con componentes bien nombrados.

## ¿Cómo se conecta y cuál es el flujo de trabajo?

Según la documentación de Figma, hay dos caminos para Claude Code:

- **Plugin oficial**: `claude plugin install figma@claude-plugins-official`. Instala la conexión y también las skills de Figma. Después reinicia Claude Code, abre `/plugin`, elige `figma` en la pestaña Installed y autoriza el acceso en el navegador.
- **Manual**: `claude mcp add --transport http figma https://mcp.figma.com/mcp`. No instala las skills. Abre una sesión nueva, escribe `/mcp`, elige `figma`, pulsa Authenticate y autoriza en el navegador. Con `--scope user` queda disponible en todos tus proyectos; sin él, solo en el actual.

Una vez conectado, un flujo razonable, que sigue las reglas de ejemplo de Figma, es:

1. Copia el enlace de un frame o de un componente desde Figma. Con el servidor remoto, el prompt debe incluir ese enlace.
2. Si el diseño es grande, pide primero `get_metadata`: Figma lo recomienda porque `get_design_context` puede devolver demasiado a la vez.
3. Pide `get_design_context` solo sobre la parte que vas a construir.
4. Toma una captura con `get_screenshot` como referencia visual.
5. Implementa traduciendo el resultado a las convenciones de tu proyecto y valida contra Figma antes de dar el trabajo por terminado.

Figma también ofrece el prompt `create_design_system_rules`, que redacta un archivo de reglas a partir de tu código para que el agente respete tus convenciones.

## ¿Qué cambia entre el servidor remoto y el de escritorio?

| | Servidor remoto | Servidor de escritorio |
|---|---|---|
| Dirección | `https://mcp.figma.com/mcp` | `http://127.0.0.1:3845/mcp` |
| App de escritorio | No la necesita | Sí, actualizada y con un archivo de diseño en Dev Mode |
| Prompt con tu selección actual | No: hay que pegar el enlace del frame | Sí |
| Escribir en el lienzo | Sí | No |
| Herramientas | Todas, incluidas las solo remotas (como `search_design_system`) | Las que no están marcadas como solo remotas |
| Asiento y plan | Escribir fuera de tus borradores pide un asiento Full | Dev o Full en Professional, Education, Organization, Government o Enterprise |

Escribir en el lienzo está en beta, es gratis durante ese periodo y Figma avisa de que pasará a cobrarse por uso; las preguntas frecuentes advierten además que su resultado es de calidad beta y puede necesitar revisión.

Los límites de lectura dependen del plan y del asiento. La página de Figma consultada el 4 de noviembre de 2026 indica, para asientos Dev o Full, 200 llamadas al día y 10 por minuto en Professional, 200 al día y 15 por minuto en Organization y 600 al día y 20 por minuto en Enterprise. Los asientos View o Collab tienen 20 llamadas al mes, y Education recibe los mismos límites que Professional. Los precios y límites cambian: confirma la página oficial antes de planificar.

## ¿Cuándo NO conviene usarlo?

- Cuando el diseño no tiene estructura: capas sin nombre, sin auto layout y sin componentes. El código que sale es difícil de mantener.
- Cuando esperas un resultado idéntico al diseño sin revisión humana. Figma lo dice sin rodeos: no es un camino de un clic hacia código terminado.
- Cuando el proyecto no tiene sistema de diseño ni tokens. Sin ellos, el agente crea componentes nuevos en lugar de reutilizar los existentes.
- Cuando solo tienes un asiento View o Collab y necesitas muchas consultas: 20 al mes se agotan rápido.

## Ejemplo

Ejemplo ilustrativo: una diseñadora tiene un formulario de registro en Figma con cuatro campos, un botón primario y mensajes de error. Conecta el servidor remoto a Claude Code y escribe: "Usa get_design_context sobre este enlace y construye el formulario con los componentes de `src/components`. Reutiliza `Button` y `TextField` si existen. Genera en el framework de mi proyecto, no en React con Tailwind." El agente lee el contexto, toma una captura y mira el código del proyecto. Como el botón de Figma está enlazado a `Button` mediante Code Connect, lo reutiliza; los campos no tenían enlace, así que propone uno nuevo. La diseñadora compara el resultado con la captura y anota las diferencias de espaciado.

El valor está en el paso de revisión, no en la generación: sin comparar con el diseño no sabes si el código lo respeta.

## Errores comunes

- Pedir "hazlo igual que Figma" sin pasar el enlace exacto del frame o del componente.
- Usar `get_design_context` sobre una página entera. Empieza por un componente o una sección, o por `get_metadata`.
- Confiar en el código sin revisar accesibilidad, estados de foco y comportamiento responsivo. Figma muestra un estado; tu producto necesita todos.
- No indicar el framework y recibir React y Tailwind por defecto aunque tu proyecto use otra cosa.
- Esperar que el agente conozca tus convenciones sin dárselas: Figma aclara que solo las conoce si las compartes mediante Code Connect, variables, reglas o el prompt.
- Tratar el resultado como código de producción.

## Fuentes

- [Figma Developers: Figma MCP server, introducción](https://developers.figma.com/docs/figma-mcp-server/)
- [Figma Developers: set up the remote server](https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/)
- [Figma Developers: set up the desktop server](https://developers.figma.com/docs/figma-mcp-server/local-server-installation/)
- [Figma Developers: tools and prompts](https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts/)
- [Figma Developers: structure your Figma file for better code](https://developers.figma.com/docs/figma-mcp-server/structure-figma-file/)
- [Figma Developers: add custom rules and instructions](https://developers.figma.com/docs/figma-mcp-server/add-custom-rules/)
- [Figma Developers: write to the canvas](https://developers.figma.com/docs/figma-mcp-server/write-to-canvas/)
- [Figma Developers: rate limits and access](https://developers.figma.com/docs/figma-mcp-server/rate-limits-access/)
- [Figma Help Center: Figma MCP server FAQs](https://help.figma.com/hc/en-us/articles/39252411778583-Figma-MCP-server-FAQs)
- [Model Context Protocol: What is MCP?](https://modelcontextprotocol.io/docs/getting-started/intro)


---

Source: https://www.fernandoux.com/es/wiki/ia/figma-a-codigo-con-mcp/