title: "Cómo conectar Figma con Claude Code usando MCP: de diseño a código (y viceversa)" description: "Aprende a integrar el MCP oficial de Figma con Claude Code para convertir diseños en código, sincronizar cambios bidireccionalmente y hasta generar diseños en Figma a partir de código." tags: [Claude Code, Figma, MCP, IA, Frontend]

Cómo conectar Figma con Claude Code usando MCP

Aunque hoy la IA puede crear el diseño de un sitio web por sí sola, lo cierto es que rara vez lo hace del todo bien. Es por eso que herramientas como Figma siguen siendo muy útiles: te permiten armar un diseño mucho más cuidado en un lienzo y, desde ahí, pasarlo a código. O al revés: partir del código y llevarlo a Figma para iterar visualmente.

Para conectar ambos mundos existe el MCP de Figma, un servidor que permite a herramientas de IA como Claude Code, Codex, Cursor o Copilot leer y escribir directamente sobre tus archivos de Figma.

En este artículo te muestro paso a paso cómo configurarlo con Claude Code, qué se puede hacer realmente y qué consideraciones hay que tener en cuenta (especialmente en cuentas gratuitas).

¿Qué es un MCP?

Un MCP (Model Context Protocol) es básicamente una forma estandarizada de añadir una conexión entre una IA y una plataforma externa. Por defecto, Claude Code no puede manipular tu Figma, pero al instalar el MCP correspondiente y darle autorización, sí puede hacerlo.

Existen MCPs para muchísimos servicios (Stripe, PayPal, Supabase, Chrome DevTools, etc.), y Figma publica un remote MCP server oficial que funciona con cualquier herramienta de IA compatible. Aquí lo voy a usar con Claude Code, pero el flujo es prácticamente el mismo en otros editores; en algunos incluso basta con un click para activarlo.

Instalación del Figma MCP en Claude Code

En la documentación oficial de Claude Code están listados todos los MCPs disponibles, incluyendo el de Figma. El comando para registrarlo es el siguiente; basta con pegarlo en tu terminal:

claude mcp add --transport http figma https://mcp.figma.com/mcp

Con eso el MCP queda registrado en tu instalación de Claude Code. Pero todavía falta autenticarlo:

1. Abre Claude Code escribiendo claude en tu terminal.
2. Dentro, escribe el comando /mcp. Verás la lista de MCPs instalados (Supabase, Chrome DevTools, etc., dependiendo de tu setup).
3. Selecciona Figma Remote MCP y pulsa Enter.
4. Claude te pedirá autenticarte. Elige la opción authenticate.
5. Se abrirá una ventana en tu navegador donde Figma te pedirá permitir el acceso. Acepta.
6. Vuelves a la terminal y verás el mensaje authentication successful.

Si vuelves a ejecutar /mcp, Figma Remote MCP debería aparecer ya con estado connected. Con eso ya puedes empezar a usarlo.

Caso 1: de Figma a código

Este es probablemente el caso de uso más obvio y atractivo. Para probarlo voy a tomar un template público de dashboard desde la comunidad de Figma; se puede hacer con cualquier diseño propio o con plantillas gratuitas que encuentres por la web.

El flujo es muy simple:

1. Abre el archivo en Figma y copia la URL del diseño.
2. Crea una carpeta vacía para tu proyecto (en mi caso la llamé nft-store).
3. Arrastra esa carpeta dentro de Claude Code.
4. Pídele algo como:

crea aquí este diseño usando Figma MCP
<URL_DEL_DISEÑO_DE_FIGMA>

Lo que ocurre internamente es que Claude Code inspecciona la estructura del archivo de Figma a través del MCP, identifica los nodos, frames, estilos e incluso descarga las imágenes embebidas. Luego arma un plan y empieza a generar el código.

En mi prueba tardó alrededor de 6 minutos en generar un proyecto completo en Next.js que se ve muy similar al diseño original. Hay que aclarar algo importante: parte del parecido se debe a que las imágenes vienen directamente del archivo de Figma, no a que la IA esté replicando ilustraciones desde cero. Aun así, el resultado es una base muy sólida sobre la que se puede iterar.

A partir de ese punto, ya no necesitas el MCP para extender el diseño. Puedes pedir cosas como:

crea la página de settings en base al diseño actual

Como los componentes ya están estilizados y siguen una temática consistente, Claude se encargará de mantener la coherencia sin tener que volver a llamar a Figma.

Consideración importante: el plan gratuito tiene límites

Aunque parezca que el MCP es ilimitado, Figma cobra créditos de IA por cada consulta que se hace desde tu IDE hacia su plataforma. En cuentas gratuitas estos créditos se agotan rápido si lo usas seriamente.

La buena noticia es que tienen planes relativamente baratos. El más básico cuesta alrededor de $3 al mes e incluye 500 créditos de IA, que ya alcanzan para iterar bastante sobre un diseño.

Hay un detalle clave a la hora de elegir plan: por defecto Figma te empuja al plan Full, pero si solo te interesa la parte de desarrollo y MCP, basta con seleccionar Dev o Collab, que son notablemente más baratos y también incluyen créditos de IA.

Lo más interesante es que estos planes habilitan algo llamado inspección avanzada del Dev MCP, que es justamente lo que permite trabajar de forma bidireccional: que cambios en Figma se reflejen en tu código.

Caso 2: sincronización bidireccional (Figma → código)

Una vez tienes el plan adecuado, conviene también instalar el plugin oficial de Figma dentro de Claude Code. Para eso:

1. Dentro de Claude Code escribe /plugin.
2. Se abrirá el marketplace. Busca Figma.
3. Selecciona el plugin oficial e instálalo en el user scope (para que esté disponible en toda tu máquina).

Con el plugin instalado, el flujo de actualización desde Figma queda muy fluido. Por ejemplo, si cambias el color de un elemento en Figma:

1. Selecciona el nodo modificado.
2. Activa el modo Dev (modo desarrollador de Figma).
3. Figma te dará un mensaje del tipo "implement this design" con la URL del nodo.
4. Pega esa URL en Claude Code con una instrucción como:

actualiza este componente según el nuevo diseño
<URL_DEL_NODO_DE_FIGMA>

Claude Code llamará tanto al skill de Figma (que viene con el plugin) como al Figma Remote MCP, identificará el nodo en cuestión y aplicará los cambios solo en el componente correspondiente. Sin reescribir todo el proyecto.

Esto es especialmente útil cuando tienes una card que se repite en varios lugares, o cuando estás iterando un componente UI específico y quieres que el cambio en Figma se propague al código sin tener que tocarlo manualmente.

Caso 3: de código a Figma (proceso inverso)

Esta es probablemente la parte más sorprendente. Si ya tienes un diseño implementado en código y quieres llevarlo a Figma para iterar visualmente, también se puede, pero solo con un plan de pago.

El flujo es así:

1. Dentro de Claude Code, le pides que cree un diseño. Por ejemplo:

crea un landing page de un SaaS que hace seguimiento de gastos

Claude lo puede generar como HTML o como un componente React; lo importante es que tenga un diseño concreto con el que trabajar. (Si tienes activado el skill de frontend design de Claude, el resultado suele ser bastante decente).

2. Crea un proyecto vacío en tu cuenta de Figma. En el panel de proyectos selecciona uno tipo Dev, crea un diseño en blanco y copia su URL.

3. De vuelta en Claude Code, pídele algo como:

transfiere este diseño a Figma
<URL_DEL_PROYECTO_DE_FIGMA>

Aquí Claude Code llama de nuevo al MCP, verifica que el lienzo está vacío y empieza a:

• Crear las variables de diseño (colores, tipografías, espaciados).
• Generar los frames y la estructura general.
• Armar cada componente uno por uno y rellenarlo.

En mi prueba este proceso tardó alrededor de 14 a 15 minutos y el resultado es un archivo de Figma completamente editable, con sus variables, componentes y estilos. A partir de ahí ya puedes iterar visualmente y, si quieres, volver a sincronizar los cambios al código (con eso cerramos el ciclo bidireccional).

Limitaciones reales

Antes de cerrar, hay que ser honestos con lo que esta integración puede y no puede hacer:

• El diseño no se traduce de forma 100% exacta. Algunos bordes redondeados, sombras o detalles tipográficos pueden no reflejarse igual al pasar de un lado al otro. Esto le pasa a cualquier herramienta de IA en este momento.
• Los créditos se gastan rápido. Aunque el plan de $3 con 500 créditos suena generoso, si estás iterando todo el día sobre el mismo proyecto se pueden agotar antes de lo que crees.
• Parte del "magic" depende de las imágenes embebidas. Cuando un diseño se basa en imágenes (como cards con assets ya diseñados), el clon en código se ve casi idéntico porque está reutilizando esos assets. En interfaces que dependen 100% de CSS la fidelidad es algo menor.
• El código generado no siempre es funcional al 100%. Sirve como base muy sólida, pero suele necesitar ajustes para conectar datos reales, manejar estados, etc.

Conclusión

El MCP de Figma cierra una brecha que llevaba tiempo abierta entre las herramientas de diseño y los flujos con IA. Con Claude Code, el flujo de trabajo queda bastante completo:

• Partes de un diseño en Figma y lo conviertes en un proyecto Next.js (o cualquier otro framework) en minutos.
• Iteras desde Figma y los cambios se reflejan en componentes específicos del código.
• Y si prefieres empezar por el código, también puedes generar el archivo de Figma para entregarlo a un equipo de diseño o iterar visualmente.

Para freelancers, equipos pequeños o creadores de contenido que quieran prototipar rápido, la combinación Claude Code + Figma MCP vale mucho la pena explorarla, aunque sea con el plan más barato. La diferencia entre construir desde cero y partir de una base estilizada bien estructurada es enorme.

Si conoces otros casos de uso interesantes con el MCP de Figma, déjamelos en los comentarios. ¡Nos vemos en el próximo!