Claude Code to Figma: lleva tu app al lienzo y de vuelta

Qué puedes capturar con Claude Code to Figma

Claude Code to Figma captura la interfaz que se ejecuta en el navegador, ya sea en producción, en un entorno de pruebas o en localhost, el servidor de desarrollo de tu computadora. Puedes capturar varias pantallas en una misma sesión y llevarlas al lienzo para compararlas. Cada pantalla se convierte en un marco editable que puedes reorganizar, duplicar, ajustar y anotar. El anuncio de Figma describe estos entornos y los flujos de varias pantallas.

Es como desplegar tu aplicación sobre una mesa de edición. El navegador muestra la experiencia paso a paso; Figma te da espacio para examinar todos esos pasos en conjunto.

MCP, siglas de Model Context Protocol, es la conexión que permite a Claude Code utilizar las herramientas de Figma. La herramienta de captura se llama generate_figma_design. Puede enviar las capas a un archivo nuevo de Figma Design, a un archivo de Design existente o al portapapeles. Los archivos nuevos creados mediante captura se guardan en los borradores de tu equipo u organización; el contenido enviado al portapapeles se puede pegar en un lienzo. La referencia de herramientas de Figma explica estos destinos.

Conecta Claude Code a Figma una sola vez

Para este flujo, utiliza el servidor remoto. Se conecta a https://mcp.figma.com/mcp y funciona sin la aplicación de escritorio de Figma. La documentación ofrece dos opciones: el plugin, que Figma recomienda, y la configuración manual. Elige una. Configuración del servidor remoto.

Opción recomendada: instala el plugin de Figma para Claude Code

Con Claude Code ya instalado, ejecuta lo siguiente en la terminal:

claude plugin install figma@claude-plugins-official

Después, sigue el proceso de autorización que documenta Figma:

1. Reinicia Claude Code si estaba en ejecución.
2. Escribe /plugin, abre Installed, selecciona figma e inicia la autorización.
3. Continúa en el navegador y elige Allow access para tu cuenta de Figma.
4. Vuelve a /plugin y comprueba que Figma aparezca conectado en Installed.

El plugin incluye la configuración MCP y las skills: instrucciones reutilizables para tareas habituales en Figma. Si tu organización bloquea la instalación, Figma indica que debes acudir a quienes administran Claude en ella. Guía de configuración de Claude Code de Figma.

Opción manual: usa la misma conexión en varios proyectos

Para configurar manualmente una conexión que puedas reutilizar en distintos proyectos, Figma documenta este comando exacto:

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

Inicia una nueva sesión de Claude Code, escribe /mcp, selecciona figma, elige Authenticate y luego Allow Access. Comprueba la conexión con /mcp.

La opción --scope user hace que la conexión esté disponible en todos tus proyectos. Figma también documenta claude mcp add --transport http figma https://mcp.figma.com/mcp, que de forma predeterminada se limita al proyecto actual. Configuración manual y alcance.

¿Qué plan o tipo de licencia de Figma necesitas?

Conectarse, crear marcos y leer los diseños para llevarlos de vuelta al código tienen requisitos distintos. Estas son las condiciones publicadas por Figma, verificadas el 12 de octubre de 2026:

Fuentes: disponibilidad de MCP, permisos de captura y límites de lectura.

Los usuarios de Starter y las licencias View o Collab disponen de hasta 20 llamadas a herramientas de lectura al mes. Cada llamada es una solicitud individual: ese cupo no equivale a 20 recorridos completos de ida y vuelta. La herramienta de captura generate_figma_design está exenta de los límites de frecuencia estándar de MCP. Cupo de lectura y exención de la captura.

Para conocer el producto en su conjunto y valorar la compra, consulta nuestro análisis de Figma.

Ejemplo práctico: un onboarding de tres pantallas, de ida y vuelta

Supongamos que tu aplicación ya funciona y tiene tres pantallas de onboarding: Bienvenida, Invitar al equipo y Primer proyecto. Este ejercicio ilustrativo recorre la captura, la revisión del diseño y la implementación de ese flujo.

Captura todo el flujo en un solo archivo

Abre el proyecto en Claude Code e indica la URL de la aplicación y el destino. Por ejemplo:

Si prefieres un archivo nuevo, pide a Claude que lo cree. Si la aplicación no está en ejecución, pídele que inicie el servidor local. Durante la captura, el cliente prepara el script necesario y abre el navegador. La primera captura se realiza al abrirse esa ventana. Instrucciones de captura de Figma.

Comprueba que aparezca Bienvenida y luego avanza por la aplicación. En Invitar al equipo y Primer proyecto, usa Entire screen en la barra de captura. Para capturar una parte más pequeña, tienes Select element. Termina con Open file. Barra de herramientas y pasos para finalizar.

Mi recomendación: mantén el mismo tamaño del área visible del navegador durante esta primera pasada y deja constancia del estado que capturaste. Una pantalla con un error de validación y esa misma pantalla con datos válidos merecen nombres distintos.

Ajusta el recorrido en Figma

Conserva una fila con las capturas originales y duplícala para trabajar en los cambios propuestos. Pon nombres claros a los marcos y toma una decisión concreta en cada pantalla:

Estos cambios son hipótesis de diseño. En particular, dibujar una opción para omitir un paso no implementa los permisos ni la lógica de navegación que necesita. Anota esa decisión junto al marco aprobado e inclúyela en las instrucciones de implementación.

Revisa las capas capturadas antes de tratarlas como recursos del sistema de diseño. Según Figma, las capturas llegan como capas simples, sin vincularse automáticamente a los componentes o estilos de tu biblioteca. Sí pueden vincularse a variables compatibles del archivo o de una biblioteca que hayas añadido: valores reutilizables como colores y espaciados. Añadir bibliotecas publicadas requiere un plan de pago. Comportamiento de las capturas y las variables.

Devuelve los marcos aprobados a Claude Code

En cada marco aprobado, haz clic derecho y elige Copy link to selection. Pega esos enlaces en Claude Code junto con la solicitud de implementación. Este es el flujo remoto que documenta Figma. Cómo usar los enlaces a los marcos.

Para este ejemplo, unas instrucciones útiles serían:

La herramienta get_design_context de Figma proporciona información de diseño al agente. En el prompt puedes indicar el framework y el directorio que contiene tus componentes existentes. Con el servidor remoto debes proporcionar enlaces a marcos o capas; seleccionar un elemento en el lienzo no basta para aportar ese contexto. Herramientas para pasar de Figma a código.

Por último, ejecuta la aplicación actualizada y recorre el mismo flujo. Compara la disposición de los elementos y los textos; después, comprueba qué ocurre al omitir pasos, la validación y la navegación con teclado. Captura las pantallas revisadas cuando otra revisión de diseño pueda resultar útil. Esta verificación le corresponde a tu equipo: Figma aporta contexto y el agente de programación produce la implementación. Qué hace MCP y qué hace el agente.

Cinco casos en los que este flujo puede compensar

Empieza por situaciones en las que varias personas deban tomar una decisión sobre una interfaz que ya existe. Estas propuestas están ordenadas según lo directamente que podrían reducir el trabajo repetido.

Si tu equipo quiere formalizar instrucciones de diseño reutilizables, nuestro pack de sistema de diseño con skills personalizadas para Figma Make es una lectura relacionada sobre ese flujo independiente de Figma Make.

Cómo calcular el valor: mide el trabajo de redibujar

Las partidas que conviene examinar son la preparación del diseño y el trabajo de implementación que se repite. Si tu equipo recrea pantallas ya construidas antes de revisarlas, compara ese esfuerzo con el de capturarlas y ajustarlas:

Valor neto por revisión = (horas anteriores de preparación y retrabajo − nuevas horas de captura, ajustes y retrabajo) × costo interno por hora − costos adicionales de herramientas.

Usa los tiempos que haya registrado tu equipo. Incluye cualquier revisión adicional de la implementación que genere este flujo. Si el equipo ya utiliza Claude Code y dispone de las licencias necesarias de Figma, las suscripciones existentes deben figurar en ambos lados de la comparación; solo el gasto adicional cambia el resultado. Figma distingue entre el acceso que otorga la licencia y los permisos del archivo, y el costo de la suscripción Professional depende de la cantidad de licencias y del periodo de facturación. Explicación de la facturación de Figma.

Mi criterio: conserva el flujo si permite al equipo llegar a un cambio aprobado con menos esfuerzo total de diseño e ingeniería. Importar más rápido sirve de poco si después hay que dedicar mucho tiempo a corregir el resultado.

Dos productos concretos que podrías crear

La oportunidad está en ofrecer un proceso de revisión alrededor de la conexión nativa. Son hipótesis de producto. Las estimaciones de DataForSEO para búsquedas en inglés en Estados Unidos, verificadas el 12 de octubre de 2026, miden búsquedas mensuales, no clientes dispuestos a pagar.

La opción más sólida: un kit de revisión de onboarding

Un equipo de producto o una agencia pequeña podría pagar por un método repetible que convierta su onboarding en funcionamiento en una revisión organizada y unas instrucciones de implementación. Las señales de demanda relacionadas son 590 búsquedas mensuales de «claude code to figma» y 260 de «website to figma». Esas audiencias pueden solaparse.

La versión mínima podría incluir una lista de comprobación de captura adaptada al proyecto, una plantilla de revisión en Figma, una convención para nombrar los marcos y prompts reutilizables que combinen los enlaces aprobados con las decisiones de comportamiento. Empieza con un servicio guiado para observar en qué puntos necesitan ayuda los equipos.

Es la oportunidad más sólida porque lo que entregas incluye decisiones sobre el flujo del propio cliente. La dificultad: Figma ya ofrece la captura, así que una capa superficial de importación aporta poco. Aún hay que validar si alguien pagaría por el kit de revisión.

Un verificador de instrucciones de implementación

Un equipo que entrega cambios de Figma a Claude Code de forma recurrente podría utilizar un verificador pequeño que detecte enlaces a marcos ausentes, destinos poco claros y falta de indicaciones sobre componentes antes de implementar. «Figma to code» tiene unas 720 búsquedas mensuales estimadas: es una señal amplia de interés por la tarea, no una prueba de demanda para este verificador.

La versión mínima podría revisar un documento estructurado con enlaces aprobados, rutas de componentes y criterios de aceptación, y generar una lista de preguntas pendientes. La dificultad es semántica: puede señalar que falta describir la regla para omitir un paso, pero no puede decidir si los usuarios deberían poder omitirlo. Esa decisión sigue correspondiendo a un responsable de producto.

Lo que este recorrido de ida y vuelta no resuelve

Trátalo como un ciclo deliberado de captura, edición e implementación. Figma presenta MCP como una fuente de contexto de diseño estructurado y un punto de partida para el código; el agente sigue necesitando las convenciones de tu proyecto e instrucciones claras. No garantiza código terminado ni corrige automáticamente los problemas de implementación. La explicación de Figma sobre este límite.

La calidad de la captura también varía. Figma señala como posibles puntos problemáticos las animaciones intensivas en JavaScript, el renderizado en canvas y las listas virtualizadas, que solo muestran una parte de una lista larga a la vez. Si la captura de la página completa no se reproduce bien, prueba con un elemento específico. Los nombres de variables CSS ofuscados también pueden impedir que se encuentren coincidencias entre variables; una captura desde el servidor de desarrollo puede conservar nombres legibles. Limitaciones conocidas de la captura.

Yo evitaría este recorrido para corregir un texto trivial cuando no hay ninguna decisión de diseño pendiente. Lo usaría cuando comparar el flujo completo pueda cambiar lo que construye el equipo. Si el propio lienzo compartido de Figma no encaja con tus necesidades, nuestra comparativa de alternativas a Figma aborda esa elección más amplia.

Para empezar el lunes: elige un onboarding de tres pantallas, captúralo, acuerda una mejora y lleva esa decisión de vuelta a la aplicación. Completa ese ciclo antes de ampliar el proceso al resto del producto.

Si quieres adaptar este flujo de revisión al producto de tu equipo, podemos ayudarte a automatizarlo.