El problema

Copiar un diseño de Figma al código suele terminar en un hilo de capturas, medidas a ojo y “casi igual”. El agente no ve el archivo: solo lo que le pegas. Con el conector de Figma (MCP) el agente lee el nodo real: estructura, tipografía, colores y una captura de referencia.

  1. Un archivo de Figma (Design) al que tengas acceso.
  2. El conector de Figma autenticado en el entorno del agente (Cursor / Claude con MCP)
  3. La URL del frame o componente. Debe verse como https://www.figma.com/design/FILE_KEY/... y, si apunta a un nodo, node-id=12-34 (en la herramienta se usa como 12:34)..

Wireframes y prototipos en una mesa de diseño

Qué necesitas

Paso 1 Abre el frame correcto

En Figma, selecciona el frame (no toda la página si puedes evitarlo). Copia el enlace con “Copy link”. Ese fileKey y nodeId son lo que el agente necesita; sin ellos termina adivinando.

Paso 2 — Pide contexto de diseño, no un screenshot suelto

La herramienta principal es get_design_context: devuelve metadatos, una captura de referencia y código de partida pensado para adaptar a tu stack. sala cuando el objetivo sea implementar o revisar un frame concreto.

Pide algo concreto, por ejemplo: “Con este link de Figma, saca tipografías, espaciados y colores del frame Hero y proponme el markup en Astro. No inventes tokens que no estén en el archivo.”

Paso 3 — Complementa solo si hace falta

  • get_screenshot si solo quieres una imagen del nodo.
  • get_variable_defs si el archivo usa variables (colores/espaciados nombrados).
  • get_metadata solo para un mapa estructural; no sustituye a get_design_context.
  • download_assets cuando necesites exportar SVG o bitmaps del nodo.

No empieces por editar el archivo (use_figma) si lo que quieres es leer e implementar.

Paleta y layout de interfaz en pantalla

Paso 4 — Cierra el loop en el repo

El resultado de Figma es referencia, no código listo para merge. Pide al agente que: (1) adapte el markup a tu framework (Astro, React, etc.); (2) use tus tokens o CSS existentes en lugar de valores sueltos; (3) señale lo que el archivo no define (breakpoints, estados hover, copy final).

Resultado esperado

En una sola conversación deberías tener: el frame leído, una captura de referencia, una lista de tokens/estilos reales y un primer corte de UI en tu repo — sin exportar PNGs a mano ni medir con la regla.

Errores frecuentes

  • Pegar solo el nombre del archivo sin URL/node-id
  • Pedir “haz toda la web” en un solo golpe; trabaja frame a frame
  • Confundir FigJam (/board/) con Design (/design/); las herramientas no son intercambiables
  • Tratar el código de referencia como producción sin pasarlo por tu design system.