Conexión MCP
AI to Figma: pasa la interfaz generada por IA en Claude o Cursor a Figma
Conecta tu herramienta de IA a HTML to Frames por MCP. Las páginas que construye llegan a tu plugin abierto como capas editables con Auto Layout.
- Funciona con Claude Code, Claude Desktop, Cursor y otros clientes MCP
- Tres herramientas: import_html, import_url, import_status
- Token almacenado solo como hash
Muy pronto en Figma Community
Pasar de la IA a Figma es más un problema de flujo de trabajo que de generación. Herramientas como Claude y Cursor pueden producir en minutos una landing page o un panel convincentes en HTML, pero ese resultado vive en un archivo de código o en una vista previa del navegador. Para revisarlo con un equipo, combinarlo con un sistema de diseño existente o seguir iterando de forma visual, tiene que estar en Figma, como capas, no como una captura de pantalla.
HTML to Frames, el plugin de Figma de EUREKA!, ofrece una conexión MCP justo para eso. Abre la pestaña AI del plugin, copia el token y el fragmento de configuración que muestra y añádelo a Claude Code, Claude Desktop, Cursor o cualquier cliente MCP. Tu herramienta de IA obtiene entonces tres herramientas: import_html para enviar el HTML que ha escrito (hasta 2 MB), import_url para importar una página por su dirección e import_status para consultar el estado de un trabajo.
Cuando la IA llama a una de ellas, la página llega a tu plugin HTML to Frames abierto y se importa con tu propio plan y tu configuración. Obtienes el mismo resultado que con cualquier otra importación: texto editable, vectores, imágenes, Auto Layout verificado y, en Pro, variables, estilos y componentes.
Esto es útil para los diseñadores que prototipan con IA y quieren pulir el resultado a mano, para los desarrolladores que generan interfaces y necesitan entregarlas a diseño, y para los equipos que quieren que los borradores de la IA se ajusten a sus estilos existentes.
La guía De interfaz generada por IA a Figma con MCP recorre una sesión completa. Para ver lo que conserva la conversión, lee HTML to Figma, y para saber cómo se tratan el token y los datos, consulta seguridad.
Cómo conectar una herramienta de IA a Figma
- 01
Abre la pestaña AI del plugin
Inicia HTML to Frames en Figma y cambia a la pestaña AI para obtener tu token de conexión.
- 02
Copia la configuración en tu herramienta
Pega la configuración lista para copiar en Claude Code, Claude Desktop, Cursor u otro cliente MCP.
- 03
Pide a la IA que envíe una página
La IA llama a import_html con el HTML que escribió, o a import_url con una dirección.
- 04
Revísala en Figma
Mantén el plugin abierto; la página llega allí y se importa como capas editables.
Lo que la conexión MCP le da a tu IA
Funciona con tu herramienta de IA
Claude Code, Claude Desktop, Cursor o cualquier cliente que hable MCP.
import_html
Envía el HTML que generó la IA, hasta 2 MB, sin tener que guardarlo ni alojarlo antes.
import_url
Deja que la IA importe una página pública por su dirección, por ejemplo una referencia que encontró.
import_status
La IA puede consultar el estado de una importación que inició.
Resultado dentro de tu sistema
Con Snap en Pro, los borradores de la IA se vinculan a los estilos de color y texto más cercanos de tu archivo.
Token con hash
El token de conexión se almacena solo como hash, y las páginas esperan en memoria 30 minutos como máximo.
Configuración MCP para Claude Code, Claude Desktop y Cursor
Model Context Protocol (MCP) es un estándar abierto que permite a las herramientas de IA llamar a herramientas externas. HTML to Frames expone su importación como servidor MCP, así que cualquier cliente compatible con MCP puede enviar páginas a Figma.
Cómo obtener los datos de conexión
Abre HTML to Frames en Figma y ve a la pestaña AI. Muestra un token personal y una configuración lista para copiar y pegar en tu cliente. No necesitas escribir la configuración a mano.
Claude Code
Añade el servidor con la configuración de la pestaña AI y luego pide a Claude que envíe a Figma la página que está construyendo. Claude llamará a import_html con el contenido del archivo.
Claude Desktop
Añade el servidor a la configuración MCP de Claude Desktop con el fragmento proporcionado y reinicia la aplicación si no detecta el cambio. Las herramientas de HTML to Frames aparecerán entonces en la conversación.
Cursor
Añade el servidor en la configuración MCP de Cursor con los mismos datos. El agente podrá entonces importar una página generada o una URL mientras trabajas en el editor.
Otros clientes MCP
Cualquier cliente que admita servidores MCP puede conectarse con el mismo token. Ten en cuenta que los conectores web de claude.ai, que usan OAuth, aún no son compatibles.
Los pasos exactos para cada cliente se mantienen actualizados en la documentación.
Cómo convertir los borradores de IA en un diseño mantenible
El HTML generado por IA suele ser incoherente en pequeños detalles: un azul ligeramente distinto en cada botón, tres tamaños de fuente casi idénticos, espaciados que varían unos píxeles. Importado literalmente, se convierte en un archivo de diseño desordenado. HTML to Frames te da herramientas para limpiarlo al importarlo.
- Auto Layout verificado. Los layouts flexbox y grid del CSS generado se convierten en frames con Auto Layout cuando todos los hijos se mantienen dentro de 2 px, así que el borrador es fácil de reorganizar.
- Styles & variables (Pro). Los colores repetidos y cualquier propiedad personalizada CSS se convierten en variables, y se crean estilos de texto y de sombra.
- Snap to my file's styles (Pro). Los valores que no coinciden exactamente con tu sistema se ajustan a tus estilos de color y texto existentes más cercanos, así que los borradores de la IA llegan dentro del sistema.
- Componentes (Pro). Las tarjetas, botones y elementos de lista repetidos se convierten en componentes con instancias.
Un ciclo práctico es así: pide a la IA un layout, envíalo a Figma, ajústalo visualmente y describe los cambios a la IA para la siguiente iteración. Cada ronda llega como frames nuevos, así que conservas un historial de versiones en el lienzo.
Como la importación usa tu propio plan, se aplican los mismos límites que en cualquier importación. Consulta los precios para más detalles.
Privacidad y límites de la conexión con IA
Conectar una herramienta de IA a un archivo de diseño plantea preguntas razonables sobre qué se comparte. Así se gestiona la conexión MCP.
Token
Tu token de conexión se almacena en nuestro lado solo como hash. Trátalo como una contraseña y mantenlo fuera de los repositorios compartidos: es lo que permite a un cliente enviar páginas a tu plugin.
Páginas en tránsito
Las páginas que envía la IA esperan en memoria 30 minutos como máximo hasta que tu plugin abierto las recoge. Las importaciones por URL se renderizan en el mismo navegador aislado y en sandbox que se usa para cualquier otra importación, y los resultados nunca se escriben en disco.
Tu archivo de Figma
La IA no puede leer tu archivo de Figma a través de esta conexión. El propio plugin no lee el contenido de tu archivo; escribe capas nuevas y solo lee los metadatos de sus propios frames.
Límites
import_htmlacepta HTML de hasta 2 MB.- El plugin debe estar abierto en Figma para que lleguen las páginas.
- Cada página cuenta como una importación en tu plan.
- Los conectores web de claude.ai (OAuth) aún no son compatibles.
La página de seguridad recoge todos los detalles sobre la conservación de datos.
Preguntas frecuentes
Claude Code, Claude Desktop, Cursor y cualquier otro cliente que admita servidores MCP. Se conectan desde la pestaña AI del plugin, que te da un token y una configuración lista para copiar y pegar. Los conectores web de claude.ai, que usan OAuth, aún no son compatibles.
Tres: import_html envía el HTML que ha escrito la IA, hasta 2 MB; import_url importa una página pública por su dirección; e import_status permite a la IA consultar el progreso de una importación. Las páginas llegan a tu plugin abierto y se importan con tu configuración.
Sí. Las páginas que envía tu herramienta de IA se entregan a tu plugin HTML to Frames abierto en Figma. Esperan en memoria 30 minutos como máximo, así que si el plugin se cierra un momento, al volver a abrirlo dentro de ese plazo podrá recogerlas.
No. La conexión MCP solo permite a la IA enviar páginas para importarlas y consultar su estado. El propio plugin no lee el contenido de tu archivo; escribe capas nuevas y solo lee los metadatos de los frames que creó, como la URL de origen y el ancho.
No hay precios aparte. Una página enviada por la IA se importa con tu propio plan y cuenta como una importación, como cualquier otra fuente. El plan Free incluye 10 importaciones al mes, y Pro y Team son ilimitados dentro de un margen de uso razonable.
En Pro, activa Styles & variables y Snap to my file's styles. Las coincidencias exactas reutilizan tus variables y estilos existentes, y los valores cercanos pero no exactos se ajustan a tu color y estilo de texto más próximos, así que las páginas generadas llegan vinculadas a tu sistema.
Relacionado
Deja de redibujar la web.
Pega un enlace y obtén capas de Figma reales, editables y responsive en segundos. Gratis para empezar: 10 importaciones cada mes.
Sin tarjeta de crédito. Pro se compra dentro de Figma.
Muy pronto en Figma Community