AI to Figma: envía interfaces de Claude y Cursor a Figma vía MCP

Los asistentes de programación con IA ya pueden producir en pocos minutos una landing page, una pantalla de ajustes o un panel convincentes. El problema es dónde acaba esa interfaz: en un editor de código o en una vista previa local, lejos del archivo de Figma donde tu equipo revisa, anota y pule el diseño.

Esta guía muestra cómo cerrar esa brecha con una conexión AI to Figma (de la IA a Figma). HTML to Frames ofrece una conexión MCP que permite a Claude Code, Claude Desktop, Cursor o cualquier cliente MCP enviar páginas directamente a tu plugin de Figma abierto, donde se convierten en capas reales y editables con Auto Layout.

Qué significa aquí "AI to Figma"

Hay dos cosas muy distintas a las que la gente llama AI to Figma:

1. Una IA que genera un diseño dentro de Figma a partir de un prompt.
2. Una IA que escribe HTML y CSS, y un puente que convierte ese código en capas de Figma.

HTML to Frames hace lo segundo. Tu herramienta de IA sigue haciendo lo que hace bien, escribir código front-end, y el plugin hace la conversión que ya hace con cualquier página web: frames, textos, vectores, imágenes, variables y Auto Layout. El resultado tiene la misma calidad que importar un sitio en vivo, porque pasa por el mismo proceso de captura. Para una visión general del producto, consulta AI to Figma.

Cómo funciona la conexión MCP

Model Context Protocol (MCP) es una forma estándar de que las herramientas de IA llamen a herramientas externas. Cuando conectas HTML to Frames como servidor MCP, tu herramienta de IA obtiene tres herramientas:

La página llega a tu plugin abierto en Figma y se importa con tu propio plan, así que se aplican las reglas habituales del plan: pantallas por importación, estilos y variables, componentes, etc.

Qué recibe de vuelta la herramienta de IA

La IA no recibe tu archivo de Figma. Recibe una respuesta de la llamada a la herramienta que confirma que la página se ha entregado, y puede llamar a import_status para consultar cómo va esa importación. El trabajo de diseño en sí ocurre en Figma, dentro del plugin, donde ves la pantalla de resultados con frames, capas, proporción de Auto Layout y cualquier advertencia. Es deliberado: el plugin no lee el contenido de tu archivo de Figma, así que nada de tu archivo vuelve a la IA.

Configuración: conecta tu herramienta de IA desde la pestaña AI del plugin

La configuración se hace una vez por cliente de IA. Todo empieza en el plugin.

1. Abre HTML to Frames en Figma y ve a la pestaña AI.
2. Obtén tu token. La pestaña AI te da un token de conexión. Trátalo como una contraseña.
3. Elige tu cliente. La pestaña AI muestra una configuración lista para copiar y pegar para los clientes compatibles.
4. Pega la configuración en tu cliente exactamente como aparece (detalles por cliente más abajo).
5. Reinicia o recarga el cliente para que detecte el nuevo servidor MCP.
6. Mantén el plugin abierto en Figma mientras trabajas. Las páginas se entregan al plugin abierto.

Claude Code

Claude Code lee los servidores MCP de su configuración. Copia la configuración que te da la pestaña AI para Claude Code y ejecútala o pégala según las instrucciones. Luego inicia una nueva sesión y pide a Claude que enumere sus herramientas; deberías ver import_html, import_url e import_status.

Claude Desktop

Claude Desktop guarda los servidores MCP en su archivo de configuración, que puedes abrir desde los ajustes de desarrollador de la aplicación. Pega en ese archivo el fragmento de la pestaña AI, guarda y reinicia Claude Desktop por completo. Las herramientas aparecerán en el menú de herramientas de un chat nuevo.

Cursor

Cursor muestra los servidores MCP en sus ajustes. Añade un servidor nuevo con el fragmento de la pestaña AI, guarda y comprueba que el servidor aparece como conectado con tres herramientas.

Cualquier otro cliente MCP

Si tu herramienta habla MCP, se aplican el mismo token y la misma configuración. Usa la configuración genérica de la pestaña AI y adáptala a la forma en que tu cliente registra los servidores.

Aún no compatible: conectores web de claude.ai

Los conectores web de claude.ai (OAuth) aún no son compatibles. Si trabajas en la versión de Claude para navegador, genera allí el HTML, guárdalo e impórtalo con la fuente Local file o Paste code del plugin. O traslada la tarea a Claude Code o Claude Desktop, que ya se conectan por MCP.

Privacidad: qué pasa con tu token y tus páginas

Los flujos con IA plantean preguntas razonables sobre por dónde viajan el código y los diseños. Esto es lo que hace la conexión:

• Tu token de conexión se almacena solo como hash. El servicio puede comprobarlo, pero no guarda el token en sí.
• Las páginas esperan en memoria 30 minutos como máximo. Si tu plugin no recoge una página en ese plazo, desaparece.
• El renderizado se hace en un navegador aislado y en sandbox. El resultado se entrega una sola vez, luego se elimina de la memoria y nunca se escribe en disco.
• Sin cookies, analítica ni píxeles de seguimiento en el plugin, la extensión ni el sitio web.
• Nunca recibimos tu nombre ni tu correo electrónico de Figma; el identificador de cuenta se deriva de tu id de usuario de Figma.

El detalle completo está en la página de seguridad.

Límites que conviene conocer

• Tamaño del HTML: import_html acepta hasta 2 MB. Usa con moderación las imágenes grandes en base64 en línea; enlaza a imágenes alojadas cuando puedas.
• Solo URLs públicas para import_url. Si la vista previa de la IA se ejecuta en localhost, haz que la IA envíe el HTML directamente con import_html, o captura la página en ejecución con la extensión de Chrome, que se ocupa de localhost y de las páginas con sesión iniciada.
• Se aplica el uso del plan. Cada página cuenta como una importación en tu plan. Free da 10 importaciones al mes y 1 pantalla por importación; Pro y Team son ilimitados con uso razonable y hasta 4 pantallas por importación. Consulta los precios.
• Las mismas reglas de conversión que cualquier página. Los iframes, los canvas WebGL y los vídeos sin póster se convierten en una imagen de su caja. Las transformaciones skew y 3D aún no se convierten.

Prompts para probar

Una vez conectada, hablas con la IA como lo harías normalmente y le pides que envíe el resultado a Figma. Algunos prompts que funcionan bien:

1. "Crea una página de precios con tres niveles usando HTML y CSS simples con flexbox y luego envíala a Figma con import_html."
2. "Toma la pantalla de ajustes que acabas de crear, pon el CSS en línea e impórtala en Figma. Después comprueba import_status."
3. "Nuestro sitio de staging está en esta URL pública. Importa en Figma las páginas de precios y de registro con import_url."
4. "Crea dos variaciones de esta sección hero, una con el titular alineado a la izquierda y otra centrado. Envía cada una a Figma como una importación separada."
5. "Reescribe esta cuadrícula de tarjetas usando propiedades personalizadas CSS para los colores y luego impórtala para que lleguen las variables."

Prompts para un resultado limpio en Figma

La IA produce mejores importaciones cuando orientas su CSS:

• Pide flexbox y grid con gap en lugar de márgenes entre hermanos. Se traducen limpiamente a Auto Layout; consulta De CSS flexbox y grid a Auto Layout.
• Pide propiedades personalizadas CSS para los colores. Con Styles & variables activado (Pro), --brand-primary se convierte en una variable brand/primary.
• Pide texto real, no texto incrustado en imágenes, para que cada título siga siendo editable.
• Pide una página por importación; los documentos largos con varias pantallas son más difíciles de revisar.

El ciclo entre diseño y código

El verdadero valor no está en una sola importación. Está en un ciclo en el que diseño y código dejan de distanciarse.

1. Prompt: la IA construye una primera versión en código.
2. Importación: la IA la envía a Figma con import_html o import_url.
3. Revisión en Figma: los diseñadores ajustan el espaciado, la tipografía, el color y el layout con frames de Auto Layout, añaden comentarios y exploran alternativas.
4. Describir los cambios: cuéntale a la IA qué cambió, o pega los valores relevantes, y deja que actualice el código.
5. Volver a importar para confirmar que el código ya coincide, y compararlo con el frame anterior.

Quién sale ganando

• Los diseñadores dejan de redibujar a mano los prototipos de IA y parten de frames editables.
• Los desarrolladores front-end obtienen revisión de diseño sobre el resultado real sin exportar capturas.
• Los product managers pueden convertir un prompt en una página de Figma revisable para una reunión con las partes interesadas.
• Quienes construyen en solitario conservan un registro visual de cada iteración en un solo archivo.

AI to Figma frente a otras vías

Las tres vías del plugin usan el mismo motor. MCP simplemente elimina el paso de copiar y pegar y deja que la IA lleve el control. El Auto Layout está verificado: la posición de cada hijo se comprueba con una tolerancia de 2 px y, si un layout no se sostiene, se prueba un plan más sencillo o el frame mantiene posiciones absolutas. El diseño nunca se rompe. Más sobre ello en Auto Layout explicado.

Solución de problemas

• La IA dice que la herramienta no está disponible. Reinicia el cliente después de añadir el servidor y comprueba que pegaste el fragmento sin cambios.
• La importación no aparece nunca. Asegúrate de que el plugin está abierto en Figma. Las páginas esperan hasta 30 minutos, así que abre el plugin y las recogerá dentro de ese plazo.
• El token fue rechazado. Genera un token nuevo en la pestaña AI y actualiza la configuración del cliente.
• El layout se ve raro. Revisa el diagnóstico de la pantalla de resultados, que explica por qué un frame se quedó en posición absoluta, y pide a la IA que use flexbox o grid en esa sección.

Cómo empezar

Abre el plugin, ve a la pestaña AI y conecta un cliente. Pide a tu herramienta de IA que construya un componente pequeño y lo envíe a Figma; verás cómo se comporta antes de confiarle una pantalla completa. La documentación cubre la pestaña AI y las funciones enumeran todo lo que admite la importación.