Las herramientas de IA están de moda ahora. Es difícil abrir cualquier plataforma de redes sociales sin encontrar noticias sobre una nueva herramienta de IA que se ha lanzado o cómo la IA eliminará millones de puestos de trabajo.

Dado que ChatGPT ha demostrado ser valioso en muchas profesiones y solo se espera que mejore en el futuro, decidí probar sus capacidades y limitaciones. Como alguien que hizo la transición de la ingeniería al diseño , tengo un conocimiento moderado de la codificación, pero nunca fue mi punto fuerte. Tenía curiosidad por ver si ChatGPT podría ayudar a alguien como yo, que tiene un conocimiento mínimo de codificación, a crear una aplicación o un sitio web funcional .

Lluvia de ideas

Entiendo que ChatGPT actualmente no puede generar un código extenso con múltiples funciones. Por lo tanto, estaba buscando ideas simples que se puedan convertir en realidad usando ChatGPT. Como diseñador, naturalmente gravité hacia la construcción de un Figma Plugin .

Recientemente trabajé en un proyecto de diseño web y necesitaba una cuadrícula de 12 columnas en mi marco en Figma. Usar una cuadrícula de 12 columnas para diseñar páginas web es una práctica común para muchos diseñadores. Ayuda a alinear componentes y estructurar el sitio web. Sin embargo, crear una cuadrícula de 12 columnas en Figma requiere varios clics e ingresar valores específicos. Quería simplificar el proceso que produce la cuadrícula con un solo clic.

Me pareció la idea perfecta para experimentar con ChatGPT.

Como diseñador, no tenía idea de cómo comenzar a desarrollar un complemento de Figma. Busqué en línea y encontré las siguientes fuentes que me ayudaron con el proceso:

Fuentes que me ayudaron a empezar

https://medium.com/ux-planet/i-built-a-figma-plugin-with-just-chatgpt-no-coding-needed-7d94958e0ec

Hora de codificar

Comencé con chatGPT e ingresé el mensaje a continuación.

“Eres un desarrollador experto que tiene experiencia en el desarrollo de complementos de Figma.

Por favor, ayúdenme con el código para un complemento de Figma que activa la cuadrícula para un marco. La cuadrícula debe tener 12 columnas con una medianil de 20 y un Margen de 200. El color de la cuadrícula debe ser rojo con un 10 % de opacidad. El complemento no requiere ninguna interfaz de usuario. Debe ejecutarse una vez que un usuario selecciona un marco y hace clic en ejecutar ".

¡GUAU! Me sorprendió la precisión del código en el primer intento, a pesar de que el mensaje no fue del todo claro con muchos errores gramaticales.

Es hora de probar el complemento en Figma.

Desafortunadamente, el complemento generó un error cuando se ejecutó en Figma.

Mencioné este error en ChatGPT y pedí que se regenerara el código correcto. Sin embargo, el código recién generado resultó en un error diferente esta vez. Noté que ChatGPT produce diferentes versiones de código para el mismo aviso cuando se ejecuta varias veces.

Después de ir y venir y volver a generar el código varias veces, el complemento finalmente se ejecutó.

Pero,

El resultado no fue el esperado.

Acertó algunas cosas, como el color y el canalón, pero las columnas en sí eran muy delgadas.

Volví a pedir a chatGPT que modificara el código para que la cuadrícula ocupe dinámicamente el área restante del marco, con un margen de 200px en ambos lados.

Comenzó a generar el código incorrecto nuevamente. Incluso después de modificar el aviso y regenerarlo varias veces, recibía los mismos errores que recibí antes. Estaba agotado en este punto .

¡Mis limitadas habilidades de codificación al rescate!

Como había llegado tan lejos, no quería rendirme. Teniendo algo de experiencia en codificación, decidí tomar el asunto en mis propias manos.

Busqué en línea y encontré la documentación de la API de Figma . Examiné las propiedades de las cuadrículas y encontré exactamente lo que necesitaba.

La propiedad de "alineación" debe tener el valor 'ESTIRAR' para llenar dinámicamente el espacio disponible.

Como se mencionó, "sectionSize" no es necesario cuando "alignment" se establece en 'STRETCH'.

Hice los cambios en consecuencia y lo probé de nuevo.

¡Funcionó esta vez!

Estaba muy satisfecho con el resultado, pero sentí que todavía había margen de mejora.

Como le había dado un desplazamiento de 200 px a cada lado de la cuadrícula, no funciona bien con marcos de todos los tamaños. Quiero que la cuadrícula tenga un tamaño dinámico y ocupe el 75% del ancho de cualquier marco .

No quería preguntarle a ChatGPT y volver a pasar por el proceso de prueba y error. Este fue un cambio simple: solo agregué una fórmula para la compensación en lugar de dar un valor constante.

Establecí la fórmula para el desplazamiento como (frame.width)*0.125.

Así es como funciona:

Digamos que el ancho del marco es 1920px. En este caso, el desplazamiento será 1920*0,125 = 240 px a cada lado de la cuadrícula ⇒ 240*2 = 480 px

Por lo tanto, el desplazamiento es de 480 px (25 % de 1920) y la cuadrícula es de 1440 px (75 % de 1920).

También cambié el canalón a 24 px, ya que se usa más y el color a verde azulado. Aquí está el resultado final:

Publicación del complemento en Figma

Ingresé los detalles requeridos (nombre del complemento, descripción, icono, etc.) y publiqué el complemento en Figma Community.

Estaba escéptico sobre si Figma lo aprobaría o no, pero para mi sorpresa, lo aprobaron en 2 horas.

Enlace al complemento

Simplemente seleccione un marco y haga clic en "ejecutar".

Aprendizajes clave y desafíos enfrentados.

• Si bien ChatGPT es extremadamente poderoso con muchas aplicaciones potenciales, aún requiere intervención manual para lograr mejores resultados.
• Tener un conocimiento básico en diferentes áreas y contar con la asistencia de ChatGPT puede ayudarnos a lograr resultados que serían imposibles de lograr solos.
• ChatGPT genera múltiples versiones de salida para el mismo mensaje, que a veces puede incluir respuestas incorrectas. Es importante revisar cuidadosamente y considerar la precisión de cada salida antes de usarla.
• La ingeniería rápida es una habilidad vital para el futuro. Cuanto más precisas sean sus descripciones, mejores resultados producirá ChatGPT.

No dude en ponerse en contacto conmigo en caso de cualquier consulta/sugerencia/comentario. Estoy feliz de conectarme en LinkedIn.

https://www.linkedin.com/in/naren-abbaraju/