Cómo pasar de Claude Design a Figma sin perder las capas

Has diseñado una pantalla en Claude Design, abres el menú de exportación y buscas Figma. Claude Design no manda el diseño a Figma por sí solo. Te lo descarga en PDF, en PPTX o en un archivo HTML, y lo pasa directo a Canva, a Claude Code y a otras herramientas con las que está integrado.

El diseño lo llevas tú, con un plugin que instalas dentro de Figma. Se llama html.to.design y reconstruye tu pantalla en capas, con el texto editable, no como una captura pegada. Hay varias formas de hacerlo y aquí vas a seguir la más directa, cuatro pasos en los que no escribes ni una línea de código.

Lo que necesitas antes de empezar

Necesitas dos cuentas, y solo pagas la de Claude.

• Una cuenta de pago de Claude. Claude Design está en los planes Pro, Max, Team y Enterprise, y entras desde claude.ai/design o desde la barra lateral de Claude Desktop. Sigue siendo una beta, y en Enterprise viene apagada de fábrica, así que ahí tendrás que pedirle a quien administre la cuenta que te la active.
• Una cuenta de Figma. Con la gratuita te sobra, porque Figma ya te deja ahí crear un archivo de diseño e instalar plugins de la comunidad, que es lo único que vas a necesitar aquí.

Termina el diseño en Claude Design antes de exportarlo, porque lo que llega a Figma es una copia de cómo estaba en ese momento. Si después vuelves al chat y cambias un color, tendrás que exportar e importar otra vez para verlo allí.

Monta tu diseño de Claude Design en Figma con el plugin

De todas las rutas, esta es la que pide menos preparación. Descargas un archivo, instalas un plugin gratuito y ya estás dentro, sin comandos que escribir. Funciona mejor si vas a pasar una pantalla entera que si solo quieres retocar un detalle.

Si tu proyecto tiene varias pantallas, pásalas de una en una, y ten en cuenta que el plugin solo te deja unas cuantas importaciones al mes. Quien lo mantiene tampoco es Anthropic ni Figma, sino divRIOTS, el estudio que lo creó, así que puede cambiar sin avisar a nadie.

El resultado depende mucho de lo que marques en las opciones de importación. Decides tú si acabas con un archivo ordenado o con un montón de capas sueltas, así que míralas bien antes de importar.

Exporta el proyecto como HTML desde Claude Design

Con tu diseño abierto en el lienzo, busca el botón Export en la esquina superior derecha. Se despliega la lista completa de destinos, que además del PDF, el PPTX y Canva incluye Lovable, Replit o Vercel. Ninguno de ellos es Figma, y por eso el camino pasa por el HTML.

La opción que te interesa es Export as standalone HTML. Genera un único archivo .html con las fuentes, las imágenes y los elementos de tu marca metidos dentro, sin una carpeta de piezas sueltas al lado, y se guarda en tu carpeta de descargas.

Instala el plugin de importación en tu archivo de Figma

Abre la aplicación y crea un archivo de diseño nuevo, o entra en uno que ya tengas. Escribe html.to.design en el menú de Plugins, dale a ejecutar y se abre en una ventana flotante sobre el lienzo, sin sacarte de donde estabas.

El plan gratuito da hasta 10 importaciones cada 30 días. Es suficiente para probar una pantalla o dos. Si vas a iterar mucho, el plan PRO te sube ese tope hasta 1.000 y cuesta 12 $ por usuario al mes, pagando el año entero por adelantado, o 18 $ si prefieres ir mes a mes.

Suelta el archivo en el plugin y genera las capas

Arrastra el .html a la zona de carga del plugin, en su pestaña File. Si prefieres no descargar nada, el plugin también acepta una URL en su pestaña Web, o el código que le pegues en su editor.

Antes de pulsar importar, entra en las opciones desde Go to import options o desde el icono de ajustes de la esquina inferior izquierda. Ahí decides cómo quieres que llegue el diseño, y también si lo prefieres en tema claro u oscuro. De todo lo que puedes tocar, estas cinco opciones son las que más cambian el resultado.

• Viewport. Escritorio, tablet o móvil. Elige el mismo formato con el que diseñaste en Claude.
• Auto layout. Déjalo activado. Es la diferencia entre capas que se reorganizan solas al cambiar el ancho y capas clavadas en su sitio.
• Estilos y variables. Aquí eliges si el plugin crea estilos y variables nuevos de Figma o si aplica los que ya hay en tu archivo. Si todavía no tienes los tuyos, deja que los cree.
• Remapeo de fuentes. Cuando detecta tipografías que no tienes, las asignas a las tuyas o las descargas desde el propio plugin.
• Estados hover como componentes. El hover es el cambio que muestra un botón cuando le pasas el ratón por encima. Útil para documentar interacciones, molesto si solo buscas la pantalla limpia.

Comprueba qué ha llegado editable y qué se ha quedado por el camino

Figma llama frame a cada pantalla del lienzo, y al importar verás uno nuevo con la jerarquía completa del diseño, su auto layout y el texto editable. Las imágenes llegan como capas separadas, los iconos en SVG, un formato que no pierde calidad al ampliarlo, y los colores como estilos locales.

Las animaciones se quedan fuera, porque el HTML las guarda de una forma que Figma no sabe leer. Si tu diseño traía alguna, toca rehacerla con el prototipo de Figma. Las fuentes personalizadas que no tengas instaladas tampoco llegan solas, pero esas sí las salva el remapeo que marcaste antes de importar.

Para saber si ha salido bien, haz doble clic sobre un titular e intenta escribir encima. Si el cursor entra y cambias la palabra, la importación es buena. Si el texto no se deja editar y en el panel de capas solo ves una imagen, vuelve a importar comprobando que el auto layout y los estilos están marcados.

Otras vías para llevar tu diseño de Claude Design a Figma

Además del plugin hay tres caminos más, la extensión de navegador, Buddy y Claude Code. Los tres acaban en tu archivo de Figma, pero no todos te dejan las mismas capas ni te piden lo mismo antes de empezar.

La extensión de html.to.design te ahorra exportar. Se instala desde la Chrome Web Store, y con tu proyecto abierto en claude.ai/design pulsas su icono, Copy to Clipboard, y lo pegas en Figma con Ctrl+V.

Buddy da un paso más y monta los componentes que el plugin no crea. Vive dentro del editor, le pides las cosas por chat y lo mantiene Anima, un estudio de herramientas para Figma. Convierte los patrones que se repiten, botones o tarjetas, en componentes con sus variantes, y si ya tienes los tuyos los reutiliza en vez de crear otros.

La tercera alternativa, Claude Code con el servidor MCP de Figma, es la única que pide comandos, así que compensa si ya lo usas a diario. Un servidor MCP es lo que enchufa Claude a otra herramienta. Este le da permiso para escribir capas directamente en tu archivo, y se instala con claude plugin install figma@claude-plugins-official.

Deja el archivo listo para trabajar con tu equipo

Lo que sale del plugin funciona, pero se nota que viene de una página web. Nada más importar, dedica un rato a limpiarlo. Renombra el frame principal y las capas que heredaron los div y span del código, revisa el remapeo de tipografías, borra las capas vacías y devuelve el auto layout a las secciones que lo perdieron.

Ahora conecta lo importado con lo que ya tienes. Cambia los colores y las tipografías que creó el plugin por los de tu marca, y convierte en componentes los elementos que se repiten. Ese es el punto de partida de tu sistema de diseño con Claude Code.

Antes de compartir el enlace con el resto del equipo, pasa estas tres comprobaciones.

• Cambia un color desde el panel de estilos y comprueba si se propaga a todas las capas que deberían usarlo.
• Estira el ancho del frame principal y observa si el contenido se reordena. Si no se mueve, falta auto layout.
• Ábrelo desde otro ordenador, o pídele a alguien del equipo que lo abra. Si alguna tipografía se ve distinta, es que la tienes instalada tú y en su máquina falta.

Trabaja sobre tu archivo de Figma desde el chat de Claude

Ya no hace falta que abras el editor para tocar el diseño. El conector de Figma le da a Claude acceso a tu archivo y lo deja trabajar dentro, lo mismo desde la web que desde la app de escritorio o Claude Code. Lo único que necesita es el enlace, así que un diseño que siga en Claude Design se queda fuera.

En Claude entra en Ajustes, luego en Conectores, pulsa Browse connectors, elige el de Figma y dale a Connect. Autorizas el acceso y decides qué hace solo y qué te pide confirmar. Pásale siempre el enlace de tu archivo, o el de una capa suelta si quieres que trabaje solo ahí, y a partir de ahí esto es lo que puedes pedirle.

• Que capture una web o una pantalla de producto y la meta en tu archivo como capas, con los componentes que ya tienes.
• Que repase el archivo y te señale dónde se ha salido de tu sistema de diseño, un color que no toca o una tipografía que se ha colado.
• Que monte un diagrama en FigJam, la pizarra colaborativa de Figma, o una presentación en Figma Slides a partir de lo que le cuentes.
• Y si además tocas código, que te escriba el de los componentes que le señales, o que convierta partes de tu proyecto en componentes y variables dentro de tu archivo.

Ya tienes tu diseño de Claude Design dentro de Figma, con capas y texto editables, auto layout que responde al ancho y colores como estilos reutilizables. A partir de aquí lo trabajas como cualquier otro archivo. Se lo pasas al equipo, lo conectas con tu librería y lo sigues iterando desde el chat.

Si quieres aprender a construir con Claude Code desde cero, empieza por nuestro curso gratuito de Vibe Coding con Claude Code y monta tu primer proyecto sin necesidad de programar.