Claude Design vs. Figma: ¿Reemplazará Claude Design a Figma?
En resumen: no para los equipos de diseño, y no en 2026. Claude Design sustituye una parte del trabajo de Figma: el primer borrador. Fundadores, product managers y marketers que antes esperaban a un diseñador, o movían cajas en Figma por su cuenta, ahora describen una página y obtienen un prototipo funcional en minutos. El trabajo de detalle, los sistemas de diseño compartidos y la revisión en equipo siguen en Figma, y Figma crece más rápido que antes del lanzamiento de Claude Design.
La pregunta interesante es otra: ¿quién necesita abrir Figma? Para cada vez más personas, la respuesta es: nadie, hasta que el diseño tiene que crecer.
¿Qué es Claude Design?
Claude Design es la herramienta de Anthropic para crear trabajo visual hablando con Claude: prototipos, landing pages, presentaciones y one-pagers. Anthropic Labs la lanzó el 17 de abril de 2026 como research preview, con Claude Opus 4.7.
Lo que puede hacer, a septiembre de 2026:
- Empezar casi desde cualquier cosa. Un prompt de texto, imágenes, documentos (DOCX, PPTX, XLSX), una captura de una web existente o tu código.
- Aplicar tu sistema de diseño. Claude Design crea un sistema de diseño a partir de un repositorio de GitHub, archivos de diseño o archivos subidos, y aplica tus colores, tipografías y componentes a cada proyecto nuevo. Los administradores pueden bloquear el sistema para que todo respete la marca.
- Editar sobre el lienzo. Comentar un elemento concreto, cambiar el texto directamente, ajustar espaciado, color y layout con controles deslizantes y, desde junio, arrastrar, redimensionar y alinear elementos.
- Exportar. PDF, PowerPoint, HTML independiente, Canva y conectores con herramientas como Adobe, Gamma, Lovable, Miro, Replit, Vercel y Wix.
- Pasar al código. Claude Design entrega el proyecto a Claude Code, que continúa desde el diseño en lugar de empezar de cero. En Claude Code,
/designcrea y edita proyectos de diseño y/design-synctrae tu sistema de diseño.
El 16 de septiembre de 2026, Anthropic integró Claude Design en Claude: ahora puedes pedir un diseño en cualquier conversación, en la pestaña Artifacts o desde Claude Code. Está en beta en los planes de pago (Pro, Max, Team y Enterprise) y activado por defecto, salvo en Enterprise.
Claude Design escribe código. Figma dibuja vectores.
Esta diferencia lo explica casi todo.
Figma es un lienzo. Colocas frames, formas y texto, y el archivo los guarda como vectores. Más tarde, los desarrolladores convierten esa imagen en código.
Claude Design se salta la imagen. Cuando pides una landing page, Claude escribe HTML, CSS y JavaScript y te muestra el resultado renderizado. Lo que ves es el código. Por eso un prototipo de Claude Design se puede clicar y desplazar como una web real desde el primer minuto, y por eso puede pasar directamente a Claude Code sin reunión de traspaso.
Por eso también algunas cosas cuestan más. Un ajuste manual en Claude Design obliga a Claude a reescribir código en segundo plano, así que los cambios pequeños tardan segundos en lugar de ser instantáneos, y cada uno consume parte de tu cuota de Claude.
Por qué todos hablaron de un Figma killer
El lanzamiento sonó a amenaza, y el mercado lo trató así:
- La acción cayó. Las acciones de Figma bajaron cerca de un 7 % el día del lanzamiento, de 20,32 a 18,84 dólares, según DesignRush.
- El puesto en el consejo. Mike Krieger, director de producto de Anthropic, dejó el consejo de Figma el 14 de abril, tres días antes del lanzamiento. Dylan Field, CEO de Figma, dijo después que Anthropic no había sido siempre transparente en sus comunicaciones.
- Figma se lo toma en serio. En mayo, el CFO Praveer Melwani dijo a Reuters que no se puede subestimar a Claude Design, por la capacidad de Anthropic de combinar sus propios modelos con sus propios productos.
Las opiniones de clientes que publicó Anthropic apuntaban en la misma dirección: una diseñadora de Brilliant contó que páginas complejas que necesitaban más de 20 prompts en otras herramientas salían con dos en Claude Design.
Qué le ha pasado a Figma desde entonces
Cinco meses después, las cifras no parecen las de una empresa a punto de ser reemplazada:
- 1.er trimestre de 2026: ingresos de 333,4 millones de dólares, un 46 % más que el año anterior, y una previsión anual al alza.
- 2.º trimestre de 2026: ingresos de 370 millones de dólares, un 48 % más, el tercer trimestre seguido de crecimiento acelerado. Figma volvió a subir su previsión para 2026, hasta 1.463–1.467 millones de dólares.
- La IA dentro de Figma despega. Los usuarios activos semanales de Figma Make crecieron más de un 70 % frente al trimestre anterior, y más de la mitad de los grandes clientes de Figma usa cada semana el agente de IA propio de Figma.
Figma también se movió rápido en producto. En febrero lanzó Claude Code to Figma, que convierte una app en funcionamiento en capas editables de Figma. En mayo presentó su propio agente de diseño. En Config, el 24 de junio, añadió Code Layers (código funcional como capa en el lienzo), Motion, shaders, plugins generativos y un agente con conectores y skills de equipo.
El argumento de Figma es sencillo: generar una pantalla es fácil, pero comparar diez direcciones una al lado de otra, revisarlas en equipo y mantener coherentes cien pantallas requiere un lienzo. De momento, los clientes le dan la razón.
Claude Design vs. Figma de un vistazo
| Claude Design | Figma | |
|---|---|---|
| Pensado para | Fundadores, PMs, marketers y diseñadores que quieren una primera versión rápida | Diseñadores y equipos de producto |
| Cómo se trabaja | Lo describes y lo refinas con chat, comentarios y ediciones en el lienzo | Dibujas en el lienzo, con ayuda de IA de Figma Make y el agente de Figma |
| Qué produce | HTML, CSS y JavaScript funcionales | Diseños vectoriales, además de prototipos, apps de Figma Make y Code Layers |
| Sistemas de diseño | Creados a partir de tu código o tus archivos y aplicados automáticamente | Bibliotecas, componentes y variables, el estándar del sector |
| Colaboración | Compartir y comentar; normalmente una sola persona al mando | Colaboración en tiempo real en el mismo archivo |
| Exportación | PDF, PPTX, HTML, Canva; traspaso a Claude Code | Dev Mode, exportación de código, servidor MCP para agentes de código |
| Archivos de Figma | Sin importación ni exportación nativa de Figma | Nativo |
| Acceso | Planes de pago de Claude (Pro, Max, Team, Enterprise) | Plan gratuito; los puestos de pago incluyen créditos de IA |
| Ideal para | Prototipos, landing pages, presentaciones, one-pagers | Diseño de producto, sistemas de diseño, revisión en equipo |
Situación a septiembre de 2026.
Dónde gana Claude Design
- Velocidad desde cero. Una landing page bastante detallada lleva minutos, no horas.
- Sin conocimientos de diseño. Describes el resultado, no los pasos.
- Ya es código. No hay distancia entre lo diseñado y lo que se construye, y hay un camino directo a Claude Code.
- Tu marca, aplicada automáticamente. Con el sistema de diseño cargado, cada trabajo nuevo lo respeta sin que nadie revise códigos de color.
- Presentaciones y one-pagers. Pocos usan Figma para eso, y Claude Design lo hace bien.
Dónde Figma sigue ganando
- Equipos. Varias personas editan, comentan y deciden en tiempo real sobre el mismo archivo.
- Explorar opciones. Poner muchas direcciones una al lado de otra es justo para lo que sirve un lienzo.
- Precisión. Control al píxel sin esperar a que se regenere el código.
- Sistemas de diseño a escala. Bibliotecas, variables y componentes de los que dependen cientos de pantallas.
- Costes previsibles. Sin sorpresas cuando una sesión intensa se come la cuota de IA de toda una semana.
Los límites que no salen en el vídeo de lanzamiento
Las reseñas desde abril repiten los mismos puntos:
- Límites de uso. Es la queja principal. Claude Design comparte ahora sus límites con el chat de Claude y Claude Code, y hay quien cuenta que gastó casi toda su cuota semanal de Pro en menos de una hora. Claire Vo llegó a un tope de gasto de 200 dólares mientras lo probaba.
- Sin exportación a Figma. Claude Design exporta a PDF, PPTX, HTML y Canva, no a Figma. Llevar un diseño a Figma requiere un rodeo (ver más abajo).
- Cada cambio cuesta tiempo y tokens. Cada ajuste manual se regenera como código, algo que XDA encontró lento para el trabajo de detalle.
- Prompts vagos, resultados genéricos. Sin un brief o un sistema de diseño, el resultado acaba en el mismo estilo de IA recargado. En la prueba comparativa de XDA con el mismo prompt de app, Figma Make dio el layout más limpio.
- Todavía en beta. La versión dentro del chat se está desplegando poco a poco y cambia a menudo.
Entonces, ¿reemplazará Claude Design a Figma?
Depende de quién seas:
- Fundadores, product managers, marketers: para buena parte de tu trabajo, sí. Una landing page, un pitch deck o un prototipo clicable ya no necesitan Figma ni un hueco en la agenda de un diseñador.
- Diseñadores: no. Claude Design es un primer borrador rápido y un buen sparring. El trabajo de detalle, el sistema y la revisión se quedan en Figma.
- Equipos de producto y web: usarás los dos. El patrón que se impone es Claude Design para explorar y para los primeros prototipos, Figma para refinar y decidir en equipo, y código para el resto.
Lo que Claude Design sí reemplaza es el lienzo en blanco, lo mismo que dijimos de Google Stitch. La diferencia es que Claude Design termina en código, y eso hace más urgente la siguiente pregunta: ¿cómo se convierte ese diseño en una web real que tu equipo pueda gestionar?
De Claude Design a una web en HubSpot o WordPress
Un proyecto de Claude Design es HTML. Una web que tu equipo de marketing edita cada semana necesita un tema de CMS: plantillas, módulos editables, un blog, formularios. Hay tres caminos para llegar.
1. El camino del código: Claude Design → Claude Code → GitHub → transjt
Pasa el proyecto a Claude Code, deja que construya el frontend y lo suba a un repositorio de GitHub. Después conecta el repositorio con transjt, que lo convierte en un tema nativo de HubSpot con módulos que tu equipo edita en el editor drag-and-drop, o en un tema nativo de WordPress para el editor de bloques. Explicamos todo el flujo en migración a HubSpot CMS con IA y Claude Code.
2. El camino del diseño: Claude Design → Figma → transjt
Si tu equipo revisa en Figma, lleva el diseño allí primero: ábrelo en Claude Code y envíalo a Figma con el servidor MCP de Figma, o importa el HTML con una herramienta como html.to.design o Anima. Refínalo en equipo y expórtalo con el plugin de Figma de transjt a HubSpot o WordPress.
3. Una sola landing page de HubSpot
El conector de HubSpot para Claude puede importar un archivo de Claude Design como una nueva landing page de HubSpot. Es práctico para una página de campaña. Para una web completa, con cabecera común, secciones reutilizables y blog, necesitas un tema.
Elijas el camino que elijas, el resultado está listo en pocas horas y la web funciona en tu propia cuenta de HubSpot o en tu hosting de WordPress.
Preguntas frecuentes
No. Claude Design forma parte de los planes de pago de Claude: Pro, Max, Team y Enterprise. En Pro, Max y Team está activado por defecto; en Enterprise tiene que activarlo un administrador. Su uso cuenta para los mismos límites que el chat de Claude y Claude Code.
No directamente. Exporta a PDF, PowerPoint, HTML y Canva. Para llevar un diseño a Figma, ábrelo en Claude Code y envíalo a Figma con el servidor MCP de Figma, o importa el HTML con una herramienta como html.to.design o Anima.
No abriendo un archivo de Figma. Claude Design crea su sistema de diseño a partir de un repositorio de GitHub, archivos de diseño o archivos subidos, así que los equipos con el sistema en código obtienen los mejores resultados. Claude Code también puede leer bibliotecas de Figma a través del servidor MCP de Figma.
Resuelven el mismo problema de forma distinta. Google Stitch genera UI a partir de prompts y copia los diseños a Figma. Claude Design va más lejos con los sistemas de diseño y pasa directamente a Claude Code, pero no exporta a Figma y requiere un plan de pago.
No. Reemplaza el primer borrador y mucho trabajo rutinario de layout. Decidir qué construir, mantener la coherencia de un producto y juzgar la calidad sigue siendo trabajo de diseño, y la mayoría de los equipos lo hace en Figma.
Sí. Pasa el diseño a Claude Code, sube el código a GitHub y conecta el repositorio con transjt, o lleva el diseño a Figma y expórtalo con el plugin de Figma de transjt. Los dos caminos te dan un tema nativo de HubSpot o WordPress que tu equipo puede editar.