Una diseñadora creó un plugin para Figma que importa proyectos de Claude Design

Una diseñadora que buscaba comprender mejor las herramientas de inteligencia artificial para su trabajo ha desarrollado un plugin para Figma que permite transferir proyectos completos desde Claude Design a la plataforma de diseño. El plugin, publicado en la comunidad de Figma, extrae los archivos standalone generados por Claude Design y los importa como capas editables dentro de Figma, manteniendo el auto-layout, los textos, las fuentes cargadas, los vectores, los rellenos, los degradados y las sombras del proyecto original.

La creadora del plugin relata que durante los últimos seis meses ha intentado entender cómo integrar las nuevas herramientas de IA en su flujo de trabajo como diseñadora de productos. Observó que mientras algunos colegas generaban aplicaciones por voz, otros construían productos en Cursor y algunos mostraban cómo crear un startup en una noche usando Claude Code, ella se sentía rezagada con conocimientos limitados como "bueno, usé Figma AI". Esta percepción la impulsó a explorar Claude Code, y tras un mes de trabajo, publicó su plugin en Figma Community.

El proceso de desarrollo no fue lineal. Inicialmente, la diseñadora intentó utilizar Claude Design directamente, pero encontró que la herramienta funcionaba de manera diferente a Figma AI, con la que estaba más acostumbrada. Claude Design generaba resultados que requerían múltiples correcciones, y el flujo de trabajo le resultaba frustrante. Posteriormente, exploró la posibilidad de conectar Figma mediante MCP, pero consideró que este enfoque implicaba trabajar "a ciegas" y resultaba poco práctico para proyectos grandes debido al consumo de tokens y la necesidad de repetir el proceso de generación.

La solución surgió cuando descubrió que Claude Design permitía exportar proyectos como archivos standalone en formato HTML. Estos archivos contienen toda la información del proyecto, incluyendo múltiples estados de pantalla, navegación y datos reales, a diferencia de los generadores de plantillas que solo producen contenido de ejemplo. La diseñadora modificó su enfoque inicial, eliminando las llamadas múltiples al MCP y desarrollando en su lugar un plugin de Figma que carga directamente el archivo standalone. Este plugin analiza el contenido del archivo para identificar pantallas individuales, comprender dónde termina una y comienza otra, reconstruir la estructura de la interfaz y crear los objetos nativos correspondientes en Figma.

El desarrollo requirió aproximadamente un mes de iteraciones. La primera versión funcionaba como un compilador que operaba a través del navegador, intentando transferir el HTML visible del proyecto mediante conexiones MCP. Este enfoque resultó técnicamente funcional pero prácticamente ineficiente, ya que consumía demasiados recursos y tokens. La versión final eliminó por completo la dependencia de MCP, permitiendo que el plugin leyera el archivo exportado directamente.

Durante el proceso, la diseñadora enfrentó numerosos errores al probar el plugin con diferentes proyectos. Los bugs encontrados en un proyecto llevaron a correcciones que se aplicaron como reglas generales para todos los proyectos, mejorando progresivamente la robustez de la herramienta. Este ciclo de prueba y error le permitió distinguir entre hacer funcionar la herramienta en un ejemplo específico y crear un instrumento capaz de handling proyectos ajenos con estructuras desconocidas.

El plugin actualmente preserva datos reales del proyecto, como textos reales y configuraciones de fuentes, en lugar de sustituirlos por placeholders como "John Doe" o "Lorem ipsum". La diseñadora señala que la herramienta resulta especialmente valiosa para proyectos complejos y sistémicos, como administradores, CRM, portales de clientes o interfaces con múltiples estados, tablas y patrones repetitivos, donde la edición manual en Figma sería particularmente laboriosa.