Saltar al contenido
Carlos Lagos
esen

Guía

Cómo conectar Figma con Claude Code (MCP oficial, paso a paso)

Cómo conectar Figma con Claude Code con el MCP oficial: las dos formas de instalarlo, el link con node-id, las herramientas clave y los límites de cada plan.

· 8 min de lectura

Durante años, «pasar de Figma a código» fue inspeccionar capas y copiar valores a mano. Los plugins que exportan HTML resolvían la primera hora y arruinaban las siguientes: posiciones absolutas, colores sueltos y ningún componente reutilizable.

El MCP oficial de Figma cambia la pregunta. Ya no es «¿cómo exporto esto?», sino «¿cómo hago que un agente que ve mi diseño y mi código tome las decisiones que tomaría yo?». Esta guía cubre la primera mitad de eso: dejar a Claude Code conectado a tu Figma, saber cuánto te va a costar y pasarle un diseño de forma que el resultado sirva.

Qué es el MCP de Figma

MCP (Model Context Protocol) es el estándar con el que Claude Code se conecta a herramientas externas. El servidor MCP de Figma es oficial y le da a Claude herramientas para leer tus archivos: la estructura de un frame, las variables que usa, los componentes, una captura y un código de referencia.

Hay dos versiones:

Remoto (recomendado) Escritorio
Dirección https://mcp.figma.com/mcp http://127.0.0.1:3845/mcp
Necesita la app de escritorio de Figma No Sí
Cómo le indicas el diseño Con el link del frame Con el link o con la selección actual
Plan Cualquiera, con límites (abajo) Asiento Dev o Full en un plan pagado

Figma recomienda el remoto, y es el que usa esta guía.

Antes de instalar: los límites de cada plan

Cada vez que Claude lee algo de Figma (el contexto de un frame, sus variables, una captura), eso es una llamada, y cuenta contra un límite que depende de tu plan y de tu asiento. La tabla oficial, a octubre de 2026:

Asiento Starter (gratis) Professional Organization Enterprise
View o Collab hasta 20 al mes hasta 20 al mes hasta 20 al mes hasta 20 al mes
Full o Dev — 200 al día (10 por minuto) 200 al día (15 por minuto) 600 al día (20 por minuto)

Lo que conviene saber de esa tabla:

  • El plan gratis tiene 20 llamadas al mes, y para subir Figma indica pasar a un plan pagado con asiento Full o Dev.
  • Solo cuentan las herramientas que leen. Las que escriben en Figma, como generate_figma_design o create_new_file, no cuentan para el límite.
  • Los planes de educación tienen los mismos límites que un asiento Full o Dev en Professional: 200 al día.
  • Figma advierte que puede cambiar estos límites en cualquier momento. Revisa la tabla vigente antes de pagar un asiento.

Una sección mediana suele necesitar varias lecturas: el contexto, las variables, una captura y, a veces, una parte que hubo que pedir por separado. Con 20 llamadas al mes alcanza para aprender el flujo, no para trabajar a diario. Para eso necesitas un asiento Dev o Full en un plan pagado (en Professional, el asiento Dev parte en US$ 12 al mes según la página de precios de Figma).

Opción 1: el plugin oficial de Figma (recomendada)

Instala el servidor ya configurado y los skills oficiales de Figma, entre ellos figma-design-to-code, que le enseña a Claude a usar bien la herramienta principal. En la terminal:

claude plugin install figma@claude-plugins-official

Después:

  1. Si tenías Claude Code abierto, ciérralo y ábrelo de nuevo.
  2. Escribe /plugin y presiona Enter.
  3. Con la flecha derecha, ve a la pestaña Installed.
  4. Selecciona figma y presiona Enter: se abre el navegador.
  5. Haz clic en Allow access para autorizar a Claude Code en tu cuenta de Figma.
  6. Vuelve a Claude Code y escribe /plugin: figma debe aparecer conectado.

Si el comando falla, puede que tu organización bloquee la instalación de plugins. Usa la opción 2.

Opción 2: solo el servidor (manual)

Agrega el servidor remoto sin los skills de Figma:

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

Así queda disponible solo en el proyecto actual. Para tenerlo en todos tus proyectos, agrega --scope user:

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

Luego abre una sesión nueva de Claude Code, escribe /mcp, elige figma, después Authenticate, y en el navegador Allow access. Debe aparecer «Authentication successful. Connected to figma».

Atajo: si quieres los skills oficiales de Figma sin el plugin, están en el repositorio público figma/mcp-server-guide (carpeta skills/). Puedes copiarlos a .claude/skills/ de tu proyecto.

Para revisar qué servidores tienes conectados desde la terminal, usa claude mcp list; para quitar uno, claude mcp remove figma.

En Figma, haz clic derecho sobre el frame o la capa → Copy link to selection. El link se ve así:

https://www.figma.com/design/AbCdEf123/Mi-archivo?node-id=12-345

Lo importante es el node-id: identifica el frame exacto. Con el servidor remoto, Claude necesita ese link. No puede ver «lo que tienes seleccionado»; eso solo funciona con el servidor de escritorio. Si le pasas el link del archivo completo, sin node-id, no sabe qué implementar.

Un pedido que funciona:

Implementa esta sección: https://www.figma.com/design/AbCdEf123/Landing?node-id=12-345
Va en src/pages/index.astro, al final. Usa Astro y mis componentes de src/components/.
Antes de escribir código, arma una tabla de variables de Figma → tokens de
src/styles/tokens.css y muéstrame cuáles no calzan. No pegues hex: si falta un token,
pregúntame. Al terminar, compara tu captura con la de Figma.

Las herramientas que vas a ver en acción

El servidor tiene muchas herramientas. Para pasar de diseño a código, estas son las que importan:

Herramienta Qué entrega Cuándo
get_design_context Código de referencia del nodo, listo para adaptar Siempre: es la principal
get_variable_defs Las variables que usa el nodo: colores, espaciados, tipografías Para conectar con tus tokens
get_screenshot Una captura del nodo Como referencia para verificar
get_metadata Un esquema liviano del frame, solo con propiedades básicas En diseños grandes, antes del detalle
get_code_connect_map Qué componente de tu código corresponde a cada componente de Figma Si usas Code Connect
search_design_system Componentes, variables y estilos de tus librerías Para reutilizar en vez de recrear
download_assets Imágenes e íconos del diseño, hasta 20 nodos por llamada Para traer recursos al proyecto

Un dato clave: get_design_context devuelve React con Tailwind por defecto. Puedes pedir otro framework («en Astro», «en HTML y CSS»), pero sigue siendo código de referencia, no final. El paso de adaptarlo a tus tokens y componentes es donde se gana o se pierde la calidad.

Hay además un prompt oficial, create_design_system_rules, que crea un archivo de reglas con el contexto que el agente necesita para convertir tus diseños en código. Es un buen punto de partida para tu CLAUDE.md.

Prepara tu archivo de Figma

Lo que en Figma es ambiguo, en código sale ambiguo. Antes de copiar el primer link:

  1. Variables, no valores sueltos. color/acento se mapea a --color-acento; un hex suelto obliga a adivinar.
  2. Auto layout en todo lo que tiene estructura. Se traduce a flex o grid; lo posicionado a mano se traduce a posiciones absolutas.
  3. Nombres de capas con sentido. Claude usa esos nombres para entender qué es cada cosa.
  4. Componentes con propiedades. Un botón con tipo=primario/secundario le dice que en tu código también es un componente con esa prop.
  5. Estilos de texto en vez de tamaños sueltos, por la misma razón que los colores.
  6. Un frame móvil si el móvil importa. Si no existe, Claude lo infiere, y esa es una decisión que vas a tener que revisar.
  7. Frames de tamaño razonable. Figma recomienda no seleccionar frames grandes y pesados: pide secciones.

Errores comunes

  • Pasar el link sin node-id. Copia el link desde el frame con Copy link to selection, no desde la barra del navegador con el archivo abierto en general.
  • Pedir «la selección actual» con el servidor remoto. Solo funciona con el de escritorio.
  • Quedarte sin llamadas en una tarde. Con 20 al mes, pide primero get_metadata en frames grandes, implementa por partes y guarda la captura de Figma en el proyecto para comparar sin volver a pedirla.
  • Esperar código final. Lo que devuelve el MCP es una referencia en React y Tailwind; tu trabajo es que quede con tus tokens.
  • Olvidar autenticar. Si Claude dice que no puede acceder a Figma, abre /mcp, elige figma y autentica de nuevo.
  • Contar con Code Connect en el plan gratis. Requiere plan Professional, Organization o Enterprise. Sin él, funciona bien una regla en tu CLAUDE.md: «Reutiliza los componentes de src/components/ antes de escribir markup nuevo».
  • Asumir que el MCP ve archivos ajenos. Solo funciona con archivos de Figma a los que ya tienes acceso.

Qué sigue

Con Figma conectado, lo que define la calidad es lo que pasa después: el mapa de variables a tokens, la implementación con tus componentes y la verificación contra la captura. El flujo completo está en Claude Code para diseñadores, y cómo escribir las reglas que Claude va a seguir, en Qué es CLAUDE.md.

Fuentes oficiales

Si quieres el flujo completo

En mi kit «Del Figma a producción con Claude Code», el skill figma-a-codigo hace este proceso siempre igual: lee tu proyecto, arma el mapa de variables a tokens, implementa con tus componentes y compara su captura con la de Figma antes de darte el resultado. Complementa al skill oficial de Figma, no lo reemplaza. Es de pago; aquí está todo lo que incluye.

Si quieres probar antes, hay 3 skills del kit gratis en un repositorio público de GitHub. El kit no está afiliado a Anthropic ni a Figma.

← Todas las guías