Figma es una poderosa herramienta para diseñar y crear prototipos de interfaces, pero también se puede ampliar con complementos para agregar funciones personalizadas. La creación de estos complementos puede ser un proceso tedioso y lento, pero con la ayuda de ChatGPT, un gran modelo de lenguaje entrenado por OpenAI, es posible generar código para complementos usando solo una descripción del resultado que desea obtener.

En este artículo, demostraré el uso de ChatGPT para generar código para tres complementos diferentes. El código para estos complementos se usará tal cual, sin ninguna edición manual. Entonces, el primer complemento colapsará todas las capas expandidas en la lista de capas. El segundo generará un código QR con la posibilidad de descargar el resultado. El tercero buscará el nombre del producto anterior y lo reemplazará con el nuevo en cada bloque de texto de la página. ¿Interesante? ¡Vamonos!

Complemento para contraer nodos

El primer complemento que quiero demostrar es uno que puede colapsar todos los nodos como INSTANCIA, MARCO, GRUPO, etc. cuando el usuario ejecuta el complemento. Por supuesto, Figma tiene un acceso directo (ALT+L) que realiza la misma acción, pero exploraremos la capacidad de ChatGPT para crear complementos simples para Figma para ver cómo funcionaría y cuánto tardaría.

• Muestre un ejemplo del complemento Figma que encuentra marcos en la página actual y colapsa marcos secundarios, grupos, instancias en todos los niveles de anidamiento. Luego contraiga los marcos principales colocados en el lienzo. Luego cierre el complemento y muestre una notificación con el texto "La tarea está completa".
• 30 minutos para obtener el resultado de trabajo y probarlo en Figma.
• 40 minutos para obtener el código optimizado.

Como puedes ver, ChatGPT está generando una solución que no es la óptima, con mucho código innecesario. Sin embargo, el código anterior funciona de forma inmediata y puede resolver problemas específicos en Figma sin necesidad de edición adicional.

Como ejercicio adicional, también podemos intentar pedirle a la IA que optimice el código, y después de varios intentos, el código se verá así:

¡El resultado de la optimización es impresionante! AI eliminó todas las partes innecesarias del código y dejó solo las importantes que le brindan el mismo resultado que el código generado originalmente.

Pero es importante tener en cuenta que pedirle a la IA que optimice el código sin proporcionar su contexto y propósito puede dar como resultado un código que solo funciona parcialmente o no funciona en absoluto.

Complemento generador QR

El segundo complemento es uno que abre la ventana de la interfaz de usuario de Figma y genera un código QR con la posibilidad de descargar el resultado como un archivo .png después de que el usuario haga clic en el botón "Generar". Este complemento es un poco más complejo que el primero y requiere una comprensión clara de lo que desea lograr. Esencialmente, si le pide a ChatGPT que genere código, normalmente propondrá una solución compleja que puede requerir una comprensión más profunda del proceso de desarrollo. El código inicial generado por AI requería dividir el código en archivos JS y HTML, instalar paquetes npm con bibliotecas de JavaScript y usar paquetes como Webpack o Babel. Si no está familiarizado con estas herramientas, puede quedarse atascado y abandonar la idea de generar una solución funcional. Así que después de varios intentos,

• Muestre un ejemplo del código JavaScript para el complemento Figma que usa solo un archivo ui.html para generar un código QR después de que el usuario agrega la URL al campo de entrada y presiona el botón "Generar". El complemento debe usar la biblioteca "qrcodejs" como un enlace a CDN. El código QR generado debe mostrarse en la misma ventana de la interfaz de usuario de Figma con la posibilidad de descargar el resultado.
• 2 horas para obtener un resultado de trabajo. La mayor parte del tiempo la pasé tratando de averiguar qué biblioteca debería usar para generar el código QR.

¡Funciona! ¡Simplemente guau! ¿no es así? Lo único que se requiere es una comprensión clara del resultado deseado, la capacidad de construir solicitudes adecuadas y tener en cuenta todos los aspectos importantes que deben reflejarse en la solución final. A continuación se muestra un ejemplo del código generado por ChatGPT:

Un ejercicio adicional más. Pidámosle a AI que embellezca la interfaz de usuario existente y aplique algunos estilos CSS a nuestro complemento.

A continuación se muestra un ejemplo de los estilos CSS generados por ChatGPT:

Y este es el resultado final con los estilos aplicados.

Complemento Buscar y reemplazar

El tercer complemento busca instancias de un nombre de producto anterior y las reemplaza por una nueva. Si bien no es particularmente notable desde una perspectiva de desarrollo, sirve como un ejemplo de cómo se puede usar la IA para solucionar problemas y mejorar el código no funcional mediante el uso de la descripción de errores de la consola para identificar y resolver problemas.

• Muestre un ejemplo del código JavaScript sin "requerir" para el complemento Figma que hará lo siguiente: no use funciones asíncronas, busque todos los nodos (marco, grupo, instancia, símbolo, etc.) en la página actual con nodos de texto que contienen caracteres de "Acronis Backup", Reemplazar "Acronis Backup" por "Acronis Cyber ​​Protect", Cerrar complemento, Mostrar notificación.
• 20 minutos, incluida la resolución de problemas, para obtener un resultado funcional.

El segundo intento tampoco tuvo éxito. Recibí otro error en Figma y le pedí a AI que mejorara el código nuevamente.

Después de la segunda solicitud, AI recomendó alterar la lógica del complemento incorporando una llamada a la interfaz de usuario de Figma y una función de escucha de eventos. La función de detector de eventos implica que debe ocurrir un evento específico, por ejemplo, en el archivo ui.html antes de que se ejecute la función. Esto comenzó a parecer una solución innecesariamente compleja que probablemente implicaría una cantidad significativa de tiempo para solucionar problemas y lograr un código funcional.

Luego, para no complicar la solución, le pedí a AI que no usara la función de escucha de eventos. Y finalmente, ChatGPT generó un código que funciona como se esperaba.

A continuación se muestra un ejemplo del código generado por ChatGPT:

En conclusión

Desarrollar complementos para Figma usando ChatGPT puede ser una herramienta poderosa para automatizar tareas de bajo nivel y generar partes específicas de código. Sin embargo, es importante tener una comprensión clara de sus objetivos y los pasos necesarios para lograrlos a fin de utilizar ChatGPT de manera efectiva. También es importante tener en cuenta que el código generado por IA puede ser demasiado complejo y puede requerir optimización. Además, la falta de contexto proporcionado a la IA puede generar código que no funcione como se esperaba o que no funcione en absoluto.

Además, ChatGPT es excelente para la resolución de problemas porque puede generar rápidamente código basado en entradas y requisitos específicos. Además, esto puede ahorrar una cantidad significativa de tiempo y esfuerzo en comparación con escribir o reescribir manualmente el código, o buscar en Google las posibles soluciones en algún lugar de Stackoverflow.

Más historias sobre herramientas

• Generador de correos electrónicos para Figma
• ffmpeg + ImageMagick. Convierta videos a GIF usando Terminal.app en macOS
• Cómo crear un complemento de Sketch que conectará los símbolos de su biblioteca con cualquier documentación externa
• Cómo optimizar imágenes usando macOS Terminal + TinyPNG CLI

• Facebook
• Medio