De Claude Code a Figma: el traspaso que empieza a sobrar

Durante años el traspaso entre diseño y desarrollo fue de ida nada más. El diseñador entregaba, el desarrollador interpretaba, algo se perdía en el medio. El 17 de febrero de 2026 Figma anunció una integración con Claude Code que invierte ese sentido: permite tomar una interfaz que ya funciona en el navegador y convertirla en frames editables sobre el canvas. No una captura de pantalla. Un archivo de diseño real, con capas y estructura.

Eso cambia dónde ocurre la conversación. Hasta ahora, cuando alguien construía algo con una herramienta de código asistido, el resultado vivía en un localhost que nadie podía comentar, mover ni comparar. Ahora entra al lugar donde el equipo ya trabaja.

¿Por qué importa si ya podías prototipar rápido?

Llegar de una idea a una interfaz que funciona dejó de ser el problema. Lo describís y en minutos tenés algo andando. La dificultad siempre estuvo en el paso siguiente: compartirlo, evaluarlo, ponerse de acuerdo y refinarlo entre varios.

Una aplicación corriendo en tu máquina es pésima como superficie de colaboración. No la podés anotar, no podés arrastrar cosas, no podés poner tres variantes una al lado de la otra para compararlas. El canvas de Figma sirve exactamente para eso, y hasta ahora el código no llegaba hasta ahí sin que alguien lo rehiciera a mano.

Cómo funciona

Figma describe el alcance así: la integración deja "capturar una UI real y funcionando desde un navegador —en producción, staging o localhost— y convertirla en frames editables en el canvas". El camino de vuelta usa el Model Context Protocol, un estándar abierto que permite que herramientas de AI lean datos de otras aplicaciones: con el MCP server de Figma, un prompt y el link a un frame alcanzan para devolver el diseño al entorno de código.

1. Construís con Claude Code, contra un servidor local o una URL de staging.
2. Pedís la captura, elegís pantallas o estados, y aterrizan en un archivo nuevo de Figma.
3. El equipo trabaja ahí: anota, duplica, compara, sin necesidad de acceso al repositorio.
4. Volvés al código con el link del diseño actualizado.

Qué cambia para un equipo de producto

La evaluación se vuelve visual. Poner dos pantallas al lado y hacer zoom revela inconsistencias que leyendo el código no se ven.

La conversación empieza antes. No hace falta un prototipo pulido para pedir opiniones: una interfaz generada con Claude Code, con los bordes ásperos incluidos, ya sirve como base de discusión.

Y las ideas descartadas quedan a la vista. Hoy las exploraciones tempranas se pierden en el historial de git, donde nadie las busca. En el canvas quedan como registro de por qué se decidió lo que se decidió.

Nuestra lectura es que la distancia entre diseño y desarrollo nunca fue un problema de herramientas sino de flujo de trabajo. Una herramienta ayuda cuando deja de obligar a la gente a cambiar de contexto, no cuando agrega una función más.

Las limitaciones, sin adornos

Claude Code vive en la terminal. Quien diseña y no se mueve cómodo ahí va a necesitar ayuda en el arranque, y eso es una barrera real, no un detalle.

Actualizar código existente sigue siendo manual. Generar componentes nuevos desde cero funciona bien; hacer cambios quirúrgicos sobre algo que ya existe, no tanto.

Los flujos con varios estados —carruseles, formularios de varios pasos— hay que capturarlos por partes y después componerlos. Y una vez que volviste al código, ajustar un padding o un estado hover se sigue haciendo escribiendo código: no hay un bucle de refinamiento visual dentro de la herramienta.

El movimiento de fondo

Nueve días después, el 26 de febrero de 2026, Figma anunció una integración equivalente con Codex de OpenAI, apoyada en el mismo MCP server. Dos acuerdos en diez días, con dos competidores directos, presentados como complementarios.

Eso dice más que cualquiera de los dos por separado: Figma no está apostando a un proveedor de modelos, está tratando de ser el lugar donde aterriza lo que generan todos. Si esa apuesta sale bien, el canvas deja de ser la herramienta donde empieza el trabajo y pasa a ser donde se decide.

El traspaso entre diseño y desarrollo todavía no murió. Pero por primera vez el bucle se cierra en las dos direcciones, y la pregunta interesante para los próximos meses es qué pasa con los equipos que armaron todo su proceso alrededor de que sólo iba en una.

Fuentes

• From Claude Code to Figma: Turning Production Code into Editable Figma Designs — Figma, 17 de febrero de 2026.
• OpenAI Codex and Figma launch seamless code-to-design experience — OpenAI, 26 de febrero de 2026.
• Model Context Protocol — especificación del estándar abierto.