Hace apenas dos años hablábamos de la IA en diseño como una promesa. Hoy, según el informe de IA 2026 de Figma, el impacto de la IA en el trabajo de diseño ha alcanzado 62 puntos sobre 100 en su índice de impacto, casi el doble que en 2024. Y el 93% de los profesionales de producto afirman que aprender a trabajar con IA es esencial para su futuro.
Pero los números cuentan solo una parte de la historia. La pregunta ya no es si usar IA, sino cómo usarla sin perder el criterio, la calidad y la identidad de lo que construimos.
Este artículo recoge lo más relevante del momento, con ejemplos de como integrar la IA en tu trabajo como UX.
Figma se convierte en una plataforma de IA
En Config 2026, Figma presentó una batería de productos que convierten la herramienta en mucho más que un editor vectorial:
- Figma Make: permite generar interfaces funcionales desde prompts, con conexión directa a bases de código reales. Ya incorpora GPT-5.6 como motor, con iteraciones más rápidas y resultados más precisos.
- Figma Agent: un agente de diseño que trabaja directamente sobre el canvas. Puede generar variaciones, crear plugins, construir skills personalizadas, detectar gaps en flujos y criticar tus diseños desde perspectivas específicas (accesibilidad, usabilidad, ventas enterprise).
- Figma MCP + Code Connect: conecta tus componentes de Figma con los componentes reales en código. Coinbase ya lo probó: redujo costes de tokens un 22.5% y mejoró la adherencia al design system cuando los agentes generaban código.
- Figma Motion, Draw, Weave, Sites: animación, ilustración vectorial, workflows creativos con múltiples modelos, y publicación web, todo con capacidades de IA integradas.
- Además puedes conectarte a Jira directamente de varias formas. Con el plugin de Jira para Figma que te permite crear issues y enlazarlos a frames desde el canvas, con el widget de Jira que convierte stickies de FigJam en issues, o con la IA desde Config 2026, con el Figma Agent + Atlassian MCP Connector donde se pueden crear, leer y transicionar issues de Jira automáticamente desde un prompt. Por ejemplo:
«Analiza este flujo de onboarding, detecta los gaps de usabilidad y crea una issue en Jira por cada uno, asígnaselas a persona en el proyecto PROJ«. También puede leer issues de Jira para usar como contexto al diseñar, y mover issues de estado (ej: «Ready for Dev») cuando el diseño está listo.
Anthropic y Claude Design
Anthropic ha lanzado en las últimas semanas Claude Sonnet 5.5 (un 30% más rápido y hasta un 30% más barato), Opus 5.5, Fable 5.1 y Mythos 5.1 — sus modelos más avanzados para codificación y trabajo de conocimiento. Yo lo uso a través del API con Visual Studio Code y verás que probándolos verás que hacen cosas bastante interesantes, al menos para investigar y coger ideas.
Claude Design
Aparte, tenemos Claude Design el vertical independiente que sacó Anthropic dentro de su ecosistema, apuntando directamente al diseño asistido por IA.
Claude Design convierte descripciones en interfaces visuales, mockups, assets de marca, páginas web, slides y flujos interactivos, todo desde su chat. Tú describes la idea y Claude construye una primera versión, que puedes refinar, compartir o exportar, permitiendo controlar el proceso de principio a fin.
Algunos ejemplos reales de uso:
- Campañas de marketing end-to-end: una prompt como «encuentra mi mes de ingresos más débil del año pasado y planifica una promo» conecta con QuickBooks para los datos financieros, genera los assets de campaña en Canva, segmenta la lista en HubSpot y lo deja todo listo para revisar antes de enviar.
- One-pagers para ventas: convierte una propuesta larga en un documento visual que un cliente quiera abrir, extrayendo sus datos de Salesforce y exportándolo como PDF.
- Mockups y flujos de producto: un Product Manager describe una idea aproximada («quiero que el onboarding muestre solo lo esencial») y Claude genera un flujo cliqueable que el equipo puede revisar, comentar y refinar antes de abrir un ticket en Linear.
- Presentaciones ejecutivas: genera un deck completo con lo que necesites, exportable a PowerPoint o enviado directamente a Gamma para seguir editando.
- Colaboración visual en Miro: un concepto nacido en Claude Design aterriza en un canvas compartido de Miro, listo para que todo el equipo lo refine y construya sobre él.
Claude Design y tu design system
Pero centrándonos en equipos donde existe un sistema de diseño, y no vale cualquier cosa, una de las capacidades más potentes de Claude Design es que trabaja con tu design system real, no con componentes genéricos:
- Importa desde GitHub, archivos de diseño o tu codebase local. Claude construye usando tus componentes, colores, tipografías y tokens.
- Verifica el output contra tu sistema. Antes de mostrarte el resultado, Claude comprueba que lo generado cumple con tus guías y corrige desviaciones.
- Los admins pueden bloquear el sistema. Para equipos grandes, un rol admin puede aprobar un sistema estándar y bloquear ediciones, garantizando que todo output esté on-brand sin importar quién lo genere.
- Sincronización bidireccional con Claude Code: usando
/design-synctraes tu design system desde Claude Code, y con/designcreas, editas y sincronizas proyectos de diseño directamente desde la terminal.
Y a diferencia de otras herramientas donde ajustar un detalle implica regenerar todo con otro prompt, Claude Design ofrece:
- Comentar sobre cualquier elemento para pedir cambios puntuales
- Editar texto directamente sobre el canvas
- Sliders para ajustar espaciado y color
- Arrastrar, redimensionar y alinear elementos manualmente
- Controles de layout para cambios visuales y estéticos rápidos
Aparte, Claude Design se conecta con Adobe Express (para terminar posts, presentaciones y flyers), Canva, Gamma, Lovable, Miro, Replit, Vercel y Wix. También exporta directamente a PDF, PowerPoint y HTML.
Govind Balakrishnan, SVP de Adobe Express: «Cualquiera puede empezar sus conceptos en Claude y usar el conector de Adobe para llevar posts, presentaciones y flyers de borrador a terminado en Adobe Express.»
Claude Design está incluido en todos los planes de pago de Claude.
Conectando el ecosistema: Figma, Claude Design y Jira
Uno de los saltos más relevantes de 2026 es que estas herramientas ya no son islas. Figma, Claude Design y Jira se conectan entre sí, y los conectores MCP son el pegamento que lo hace posible.
Claude se conecta a Figma mediante el Figma MCP Connector, verificado por Anthropic y creado por el propio equipo de Figma, disponible desde noviembre de 2025. El conector tiene 9 herramientas.
- Generar código desde diseños de Figma: Seleccionas un frame en Figma (o pegas su URL en Claude) y convierte el diseño directamente en código de producción. Ejemplo: «Toma este frame de la pantalla de checkout en Figma y genera el componente React con TypeScript, usando los mismos tokens de diseño del archivo.» Y si tienes Code Connect configurado, Claude usa tus componentes reales en vez de inventarlos — igual que haría el MCP de Figma para coding agents.
- Extraer contexto de diseño (tokens, variables, componentes): Claude lee las variables, componentes y layouts de tu archivo Figma para entender las reglas de diseño antes de generar nada. Ejemplo: «Lee las variables de color y tipografía de este archivo Figma y genera un archivo tokens.css con custom properties listo para producción.» o «Extrae todos los componentes del design system que están en este archivo y dime cuáles tienen variantes de responsive que falten para mobile.»
- Generar diagramas en FigJam desde prompts: Describe un flujo o estructura en lenguaje natural y Claude lo convierte en un diagrama directamente en FigJam. Caso de uso: «Genera un diagrama de flujo de usuario del proceso de reserva: búsqueda → selección → pago → confirmación → email. Mándalo a FigJam.» o «Crea un Gantt del sprint actual con estas tareas y dependencias, y ponlo en FigJam para la daily.»
- Crear reglas de design system para agentes: Claude puede leer tu sistema de diseño en Figma y generar un archivo de reglas que cualquier AI agent usará para producir outputs on-brand. Ejemplo: «Lee el design system de este archivo Figma y genera un ruleset para que cualquier agente de IA respete nuestros espaciados, colores y tipografías al generar código.»
- Mapear componentes Figma ↔ código (Code Connect): Si usas Code Connect, Claude mapea automáticamente qué componente de Figma corresponde a qué componente en tu codebase. Ejemplo: «Usa el Code Connect map de este archivo y dime cuántos componentes de Figma no tienen su equivalente en código todavía.»
El triángulo completo: diseño → tracking → código
El flujo completo funciona en ambas direcciones:
| Dirección | Qué hace |
|---|---|
| Figma → Claude | Extraes contexto de diseño (tokens, variables, componentes y layouts de un archivo Figma), conviertes frames seleccionados en código de producción (React, CSS, etc.), creas reglas para agentes, mapear componentes Figma ↔ código real con Code Connect |
| Claude → Figma | Generas diagramas de flujo, Gantt u organigramas en FigJam desde prompts, generas componentes que puedes copiar al canvas, creas reglas de design system para que los agentes generen output on-brand, lees metadata y screenshots de frames |
| Claude Design → Figma | Diseñas en Claude Design y exportas a HTML/CSS que pegas en Figma Make para seguir refinando. |
Juntando los tres conectores, el flujo ideal de un equipo en 2026 se ve así:
- Claude Design genera una primera versión del diseño usando tu design system real
- Lo exportas a Figma para refinarlo con el equipo
- Usas el Figma Agent para detectar edge cases y generar código desde los frames aprobados
- Con el Atlassian connector, creas las issues en Jira desde Figma y las transicionas a «Ready for Dev»
- El equipo de desarrollo recibe las issues con el diseño embebido, el código generado y los tokens extraídos directamente del archivo Figma
En unos días seguiremos con algo más importante que esto, los pilares para saber diseñar con IA (sin que ella diseñe por ti).