Cómo Figma construyó sus plugins y shaders generativos: la historia detrás de la función

Figma ha publicado en su blog oficial un relato en primera persona de Rogie King, diseñador de producto en la compañía, sobre cómo se gestó y construyó la función de "plugins y shaders generativos", presentada en la conferencia Config y ampliada hoy con varias novedades. El artículo combina anuncio de producto con una crónica del proceso interno de diseño e ingeniería, y ofrece una ventana poco habitual a cómo una empresa de herramientas de diseño está reorganizando su forma de trabajar en torno a la IA generativa.

En cuanto a las novedades concretas que se lanzan a partir de hoy, Figma anuncia cuatro bloques de funcionalidad. Primero, la publicación en comunidad: ahora es posible publicar en Figma Community los plugins y shaders creados con el agente de diseño de Figma, o compartirlos de forma privada dentro de la organización si se dispone de un plan Organization o Enterprise. Segundo, shaders animados e interactivos: el agente puede incorporar movimiento e interactividad a cualquier efecto que el usuario describa por prompt. Tercero, acceso al código: se puede ver y descargar el código subyacente de cualquier shader o plugin creado, para poder editarlo directamente en un agente de terceros. Y cuarto, actualizaciones del servidor MCP de Figma, que permite a un agente externo ver y modificar plugins y shaders generativos, o exportar shaders a un agente que los implemente con precisión en código React.

La parte más interesante del artículo, sin embargo, es la genealogía del proyecto. King explica que los shaders permiten manipular visualmente las capas en Figma Design, ya sea como relleno o como efecto, y que son programas de GPU capaces de transformar píxeles en tiempo real. Su interés personal por llevar esta tecnología al lienzo de Figma viene de lejos: en 2022 ya había construido el plugin Noise & Texture, pero en aquel momento no existía un camino claro hacia una integración más profunda dentro del producto. El punto de inflexión llegó, según su relato, cuando los modelos de lenguaje (LLMs) le permitieron "mostrar" su visión en lugar de solo "contarla": empezó a programar mediante "vibe coding" un entorno WebGPU que imitaba el comportamiento de Figma, donde se podían añadir efectos de shader a cualquier capa del lienzo, incluyendo vectores, capas 3D e incluso sistemas de partículas. En ese prototipo personal se centró en tres pilares: composabilidad (que la salida de un shader alimente al siguiente), ergonomía del editor (controles generados dinámicamente que permiten "tocar" el diseño, algo que el simple prompting no ofrece) y creación agéntica (que los LLMs puedan sugerir controles con los que el usuario después pueda experimentar).

El artículo detalla también cómo se formó el equipo. King recurrió a Yassir Solomah, ingeniero de renderizado y animación, para validar si la idea era técnicamente viable y si podía perjudicar el rendimiento de Figma. Solomah sustituyó el sistema de shaders en WebGL 2 del prototipo inicial por una arquitectura de pipeline en WebGPU, de modo que los shaders pudieran funcionar como pequeños programas capaces de renderizar objetos 3D y aplicar lógica basada en la posición del ratón y el tiempo. Esta arquitectura permitió aislar los scripts de generación gráfica en sandboxes propios, aprovechando toda la potencia de WebGPU y logrando así scripts de usuario más seguros, junto con lógica, sistemas de partículas, compute shaders y soporte 3D. Poco después, la directora de producto Georgia Rust, con una visión de conjunto de lo que ocurría en distintos equipos de Figma, detectó que el diseñador de producto Jason Calleiro estaba trabajando en paralelo en prototipos de plugins adaptativos y generativos, y propuso unir ambos esfuerzos bajo el paraguas de "herramientas generativas": una forma de usar agentes en el lienzo para crear plugins y shaders personalizados sobre la marcha.

El relato dedica bastante espacio al proceso de venta interna del proyecto: varias sesiones de planificación entre King, Solomah y Rust convirtieron un puñado de demos en una propuesta capaz de convencer a los directivos, combinando una demostración en vivo, una explicación del modelo de seguridad e implementación, y un plan de qué construir primero y hacia dónde escalar después. La propuesta fue aprobada, con la fecha de lanzamiento fijada para la conferencia Config, lo que dejaba solo dos meses de desarrollo. King incluso diseñó un logotipo de equipo de inspiración ochentera, con una llave inglesa y un rayo como símbolos, y un arcoíris que representa la sensación de "magia" del prompting.

Sobre la metodología de trabajo, el artículo es explícito: dado el plazo tan ajustado, el equipo prescindió de documentos de requisitos de producto (PRDs) y de las críticas de diseño formales, apostando en su lugar por prototipado y demos constantes. Ingenieros y diseñadores compartían un único canal de Slack masivo, con presentaciones semanales ante los patrocinadores del proyecto, y el equipo inicial de 15 personas fue creciendo a medida que las demos ganaban visibilidad en reuniones de la compañía. Como infraestructura compartida, King construyó PropsKit, un kit de interfaz de Figma basado en web components que los agentes podían utilizar. También cuenta cómo, tras sus buenas experiencias con vibe coding, quiso que cada diseño arrancara como un prototipo funcional, pensando que aceleraría el trabajo; pero descubrió que, si bien esos prototipos vibe-codeados eran muy útiles para que los propios diseñadores validaran y cuestionaran sus supuestos, no servían como referencia para desarrolladores, product managers ni stakeholders. Por ello, el equipo cambió de enfoque: primero maquetas estáticas en Figma para alinear expectativas sobre los estados posibles, y después prototipos de código funcional para converger en las mejores soluciones sin el habitual vaivén de diseño-implementación-revisión. King llegó incluso a escribir código de producción directamente en el repositorio de Figma y enviar varios pull requests.

Las dos semanas previas a Config se describen como las más duras: con el 90% del trabajo hecho, el último 10% resultó el tramo más difícil, hasta el punto de que responsables y patrocinadores revisaban versiones ya desactualizadas por la velocidad de los cambios, y hubo momentos en que el proyecto pareció en riesgo de quedar fuera. La respuesta fue comunicación rápida y frecuente, decisiones instintivas y soluciones improvisadas: cuando los layouts de los plugins no terminaban de funcionar, construyeron tres componentes de interfaz nuevos para ayudar al agente a decidir; cuando los controles de propiedades personalizados para paletas de color necesitaban tres días más de ingeniería, optaron por una lista de selección simple como solución temporal. King reconoce que, como impulsor original del proyecto, recortar funcionalidades fue lo más difícil de aceptar, pero fue necesario para llegar a tiempo. Finalmente, él y Rust presentaron generative plugins and shaders sobre el escenario del keynote de Config.

El texto cierra con una reflexión sobre cómo este proyecto cambió la forma en que el propio equipo usa Figma: el microsite de Config para los shaders se apoyó ampliamente en el servidor MCP de Figma, hasta el punto de que, según King, hoy un ingeniero que ejecuta un agente en local espera poder "leer" el diseño mediante la función get_design_context del MCP. Los shaders, además, pueden exportarse en HTML y React, algo que forma parte de las novedades publicadas hoy. En cuanto a disponibilidad, el agente de diseño de Figma que permite crear estos plugins y shaders generativos está en beta abierta para usuarios con licencia ("seat") completa en todos los planes, mientras que las licencias Collab, Dev y View pueden usarlo en sus borradores; el uso es gratuito durante la beta, pero Figma indica que en unas semanas empezará a consumir créditos de IA.

En conjunto, el artículo funciona menos como nota de prensa y más como estudio de caso sobre cómo una compañía de software de diseño está reinventando sus propios procesos internos —de la crítica formal al prototipo vibe-codeado, del PRD al canal de Slack compartido— para adaptarse a un ritmo de desarrollo marcado por la IA generativa. Conviene señalar que se trata de contenido publicado por la propia Figma en su blog corporativo, por lo que el relato refleja necesariamente su versión y su interés en mostrar el producto y su cultura de trabajo bajo una luz favorable; no hay en el texto cifras de adopción, plazos de expansión de las funciones ni detalles técnicos más allá de los mencionados (WebGPU, sandboxes, PropsKit) que permitan verificar de forma independiente el alcance real de la función.