Claude Code a Figma: Cómo Funciona 'Code to Canvas' y Qué Significa para Equipos de Producto

¿Qué pasaría si pudieras convertir una interfaz funcional generada con código en un diseño editable de Figma con un solo comando? Sin capturas de pantalla planas, sin recrear componentes manualmente, sin perder la estructura de capas.

Eso es lo que propone Code to Canvas, la integración entre Claude Code y Figma lanzada el 17 de febrero de 2026. Desarrollada como una colaboración directa entre Anthropic y Figma, esta funcionalidad permite capturar el estado renderizado de cualquier UI en el navegador y transformarlo en frames editables dentro del canvas de Figma, con capas reales, texto editable y estructura de componentes preservada.

La propuesta ataca un problema real: en equipos donde el código avanza más rápido que el diseño (especialmente con herramientas de generación de código con IA), los diseñadores suelen quedarse fuera del ciclo de iteración hasta que el código ya está consolidado. Code to Canvas intenta cerrar esa brecha.

En este post analizamos cómo funciona, qué arquitectura técnica lo sustenta, para quién tiene más sentido, y qué limitaciones presenta.

¿Qué es Code to Canvas?

Code to Canvas es una funcionalidad que conecta Claude Code con Figma a través del Model Context Protocol (MCP). En términos simples, permite:

Construir o iterar una UI con Claude Code (en localhost, staging o producción)
Capturar el estado visual del navegador
Recibirlo en Figma como un frame editable, no como una imagen plana

El resultado en Figma no es un screenshot: es un artefacto de diseño con capas separadas, texto que puedes editar directamente, botones como elementos individuales y estructura que respeta auto-layout.

¿Por Qué Existe Esta Integración?

Dylan Field, CEO de Figma, ha descrito el problema que intenta resolver como "tunnel vision": la tendencia de equipos que trabajan code-first a iterar indefinidamente sobre el concepto inicial sin explorar alternativas visuales.

Cuando un desarrollador genera una UI con Claude Code, el resultado funciona, pero el equipo de diseño no tiene forma fácil de:

Comparar variantes lado a lado
Verificar alineación con el sistema de diseño
Proponer cambios estructurales sin tocar código
Dar feedback sobre flujos multi-pantalla

Code to Canvas lleva la interfaz funcional al canvas de Figma, donde el equipo puede explorar, anotar y proponer cambios en un entorno visual sin necesidad de acceder al código.

¿Cómo Funciona? Arquitectura Técnica

El Servidor MCP de Figma

La integración se basa en el Model Context Protocol (MCP), un estándar abierto que permite a herramientas de IA conectarse con aplicaciones externas. El servidor MCP de Figma actúa como un adaptador universal entre Claude Code y el entorno de diseño de Figma.

El flujo técnico funciona así:

Claude Code → MCP Server → Figma Desktop App
     ↑                           ↓
     └───── Contexto de diseño ──┘

Lo relevante es que el pipeline es bidireccional:

Code → Figma: Captura el estado renderizado del navegador y lo convierte en frames editables
Figma → Code: Permite que Claude Code lea componentes, variables, estilos y estructura de layout desde Figma para generar código informado por el diseño

Setup en Menos de 2 Minutos

La configuración es directa. Hay dos métodos disponibles:

Método 1: MCP Remoto (recomendado)

claude mcp add --transport http figma https://mcp.figma.com/mcp

Para disponibilidad global en todos los proyectos, añade --scope user.

Método 2: MCP Local (vía Figma Desktop)

Abrir preferencias de Figma Desktop
Activar "Dev Mode MCP Server" (se ejecuta en http://127.0.0.1:3845/sse)
Conectar desde terminal:

claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse

Autenticación:

Ejecuta /mcp en Claude Code
Selecciona figma → Authenticate
Completa el flujo OAuth
Confirma que aparece: "Authentication successful. Connected to figma"

Requisitos:

Figma Desktop App (no funciona en la versión web)
Figma Dev o Full seat
Claude Code instalado

El Flujo Completo de Trabajo

Una vez configurado, el workflow sigue estos pasos:

1. Generar UI con Claude Code
   └─ Cualquier framework: React, Next.js, Vue, etc.

2. Previsualizar en el navegador
   └─ localhost, staging o producción

3. Escribir "Send this to Figma"
   └─ Claude Code captura el estado renderizado

4. Frame editable aparece en Figma
   └─ Capas separadas, texto editable, estructura preservada

5. Equipo colabora en el canvas
   └─ Anota, duplica, compara variantes, reorganiza

6. (Opcional) Devolver cambios a Claude Code
   └─ Pegar link del frame de Figma en Claude Code
   └─ Claude Code genera código actualizado basado en el diseño

Capacidades Clave

Captura Multi-Pantalla

Una característica relevante es la posibilidad de capturar flujos completos en una sola sesión. Un onboarding de 5 pasos, un checkout de 3 pantallas, o una configuración con múltiples estados pueden capturarse secuencialmente y organizarse en el canvas preservando secuencia y contexto.

Las ideas descartadas permanecen visibles como referencia, algo que en un entorno puramente de código se pierde con cada git commit.

Comparación Lado a Lado

Al tener interfaces como frames editables en el canvas, los equipos pueden:

Comparar la UI generada contra componentes del design system existente
Detectar inconsistencias de spacing, tipografía o color
Evaluar patrones visuales en flujos multi-pantalla
Identificar gaps o trade-offs que no son evidentes mirando una sola pantalla

Pipeline Bidireccional

El flujo no es solo de código a diseño. Con el MCP de Figma, Claude Code puede:

Leer componentes y variables del archivo de Figma
Entender estilos, tokens de diseño y estructura de layout
Generar código que respeta el sistema de diseño existente
Actualizar implementaciones basándose en cambios de diseño

Esto significa que un diseñador puede modificar un frame en Figma, compartir el link, y Claude Code puede generar el código actualizado basándose en esos cambios visuales.

Casos de Uso Prácticos

1. Prototipado Rápido con Exploración Visual

Escenario: Un equipo de producto necesita explorar 3 variantes de un dashboard de analytics antes de comprometerse con una implementación.

Flujo con Code to Canvas:

1. Desarrollador genera Variante A con Claude Code
2. Captura → Figma ("Send this to Figma")
3. Modifica prompt → genera Variante B
4. Captura → Figma
5. Tercer prompt → Variante C
6. Captura → Figma
7. PM y diseñador comparan las 3 variantes lado a lado
8. Equipo anota preferencias directamente en el canvas
9. Desarrollador implementa la versión final

Ventaja: El equipo explora alternativas sin que el desarrollador tenga que mantener 3 ramas de código simultáneamente.

2. Verificación de Design System

Escenario: Un equipo usa Claude Code para generar componentes de UI, pero necesita verificar que el código generado respeta los tokens y componentes del design system corporativo.

Flujo:

Generar componente con Claude Code
Capturar en Figma
Comparar contra la librería de componentes del design system
Identificar desviaciones en spacing, colores o tipografía
Corregir antes de que llegue a producción

3. Feedback de Stakeholders No Técnicos

Escenario: Un PM necesita feedback del equipo ejecutivo sobre un flujo de onboarding, pero los ejecutivos no tienen acceso al entorno de desarrollo.

Flujo:

Desarrollador genera el flujo completo con Claude Code
Captura todas las pantallas en Figma
Comparte el archivo de Figma con stakeholders
Stakeholders comentan y anotan directamente
Desarrollador implementa los cambios basándose en el feedback visual

4. Documentación Visual de Implementaciones

Escenario: El equipo necesita documentar el estado actual de una aplicación en desarrollo para una revisión de diseño.

Flujo:

Capturar todas las pantallas principales desde el entorno de staging
Organizar en Figma por flujos de usuario
Anotar estados, interacciones y edge cases
Usar como referencia para futuras iteraciones

Ecosistema MCP: Más Allá de Claude Code

Un aspecto relevante es que el servidor MCP de Figma no está limitado a Claude Code. Según Figma, funciona con más de una docena de clientes compatibles con MCP, incluyendo:

Claude Code (Anthropic)
Codex (OpenAI)
Cursor
VS Code (con extensiones MCP)
Y otros editores e IDEs compatibles

Esto es importante porque significa que la inversión en configurar el MCP de Figma no te ata a un solo proveedor de IA. Si mañana prefieres usar otro cliente compatible con MCP, el servidor de Figma sigue funcionando.

Si leíste mi post sobre Claude Code, ya conoces el concepto de MCP como protocolo de extensión. Code to Canvas es un ejemplo concreto de cómo MCP habilita integraciones entre herramientas que antes requerían plugins dedicados.

Limitaciones y Consideración Crítica

Code to Canvas es una herramienta útil para ciertos flujos de trabajo, pero no es una solución universal. Tiene limitaciones concretas que debes considerar.

1. Pérdida de Lógica en la Traducción

El problema fundamental: Figma exporta estructura visual, pero no expone la lógica de negocio. Event handlers, gestión de estado, renderizado condicional, validaciones—todo esto se pierde al pasar a Figma.

Esto significa que el viaje de vuelta (Figma → código) requiere re-implementar la lógica desde cero. No es un roundtrip completo; es más bien un "ida con retorno parcial".

Código original:
├── Componente visual     ✅ Se preserva en Figma
├── Estado (useState)     ❌ Se pierde
├── Event handlers        ❌ Se pierde
├── Validaciones          ❌ Se pierde
└── Lógica condicional    ❌ Se pierde

2. Fricción en los Handoffs

El roundtrip completo involucra al menos cinco cambios de contexto: Claude Code → navegador → captura → Figma → feedback → vuelta a Claude Code. En cada transición hay pérdida potencial de información.

Para equipos pequeños o iteraciones rápidas, esta fricción puede superar los beneficios de exploración visual.

3. Inestabilidad del MCP

En la implementación actual, se han reportado problemas de estabilidad:

La herramienta get_code falla de forma inconsistente cuando los elementos contienen anotaciones
Las conexiones pueden ser lentas, acumulando delays en el flujo de trabajo
El servidor MCP local de escritorio no soporta configuraciones WSL
get_code requiere Code Connect, limitado a planes Organization y Enterprise de Figma

4. Requisitos de Plataforma

Requiere Figma Desktop App: No funciona en la versión web de Figma
Consume tokens: La complejidad del archivo afecta proporcionalmente al consumo de tokens de Claude Code
Capturas individuales: Para flujos multi-pantalla, cada pantalla debe capturarse individualmente

5. No Reemplaza el Diseño

Es importante ser claro: Code to Canvas no convierte a los desarrolladores en diseñadores. La interfaz capturada refleja lo que el código genera, que puede tener problemas de:

Consistencia tipográfica
Spacing no alineado con el design system
Jerarquía visual inadecuada
Accesibilidad insuficiente

Un diseñador sigue siendo crítico para evaluar y refinar la calidad visual y la experiencia de usuario.

¿Para Quién Tiene Más Sentido?

Basándome en las capacidades y limitaciones, estos son los perfiles donde Code to Canvas aporta más valor:

Alto Valor

Equipos medianos-grandes con procesos formales de handoff entre diseño y desarrollo
Product managers que necesitan compartir prototipos con stakeholders no técnicos
Equipos code-first que generan UI con IA pero quieren validación de diseño
Organizaciones con design systems establecidos que necesitan verificar adherencia

Valor Limitado

Desarrolladores solo que no necesitan feedback visual externo
Equipos muy ágiles donde la velocidad de iteración supera el beneficio de exploración
Proyectos sin diseñador dedicado (no hay quién evalúe los frames en Figma)
Prototipos descartables que no justifican el setup del MCP

Conexión con el Ecosistema Claude

Code to Canvas se integra en la estrategia más amplia de Anthropic para hacer de Claude Code una herramienta central en flujos de trabajo de desarrollo:

Claude Code + Setup: La base sobre la que se construye esta integración
Agent Teams: Coordinación multi-agente que ahora puede incluir contexto de diseño
Memoria jerárquica: El contexto de diseño de Figma se suma al contexto que Claude Code mantiene del proyecto

Claude Code se integra progresivamente con herramientas externas como Figma, ampliando su alcance más allá de la generación de código hacia flujos de trabajo que conectan desarrollo, diseño y coordinación de equipo.

Conclusión

Code to Canvas representa un paso concreto hacia la convergencia entre código y diseño que Figma ha denominado "el futuro del diseño es código y canvas". No es una herramienta que reemplaza el proceso de diseño, sino que crea un puente entre equipos que antes operaban en silos separados.

Lo más valioso:

Convierte código funcional en artefactos de diseño editables, eliminando la recreación manual
Habilita exploración visual de alternativas sin mantener múltiples ramas de código
El pipeline bidireccional vía MCP permite que el diseño informe al código y viceversa
Compatible con múltiples clientes MCP, no solo Claude Code

Las limitaciones reales:

La lógica de negocio se pierde en la traducción (no es un roundtrip completo)
Fricción en handoffs con cinco cambios de contexto mínimos
Requiere Figma Desktop y planes específicos para algunas funcionalidades
Estabilidad del MCP todavía en proceso de maduración

Mi valoración:

Para equipos con procesos de diseño establecidos y handoffs formales, Code to Canvas puede reducir significativamente la fricción entre desarrollo code-first con IA y validación de diseño. Para desarrolladores individuales o equipos muy ágiles, el overhead del setup y los cambios de contexto pueden no justificarse todavía.

Lo más interesante no es la herramienta en sí, sino lo que representa: la adopción de MCP como estándar de integración entre herramientas de IA y aplicaciones de productividad está acelerando, y Code to Canvas es uno de los primeros ejemplos concretos de cómo este protocolo habilita flujos de trabajo que antes requerían integraciones propietarias.

Recursos:

Temas relacionados:

¿Estás usando Code to Canvas en tus proyectos? ¿Cómo ha cambiado la dinámica entre diseño y desarrollo en tu equipo? Contáctame o conectemos en LinkedIn para compartir experiencias.