【Créalo y úsalo con Figma Make: Primera parte】¡3 horas con Figma Make y Gemini! El nuevo flujo de desarrollo web que acelera la creación de borradores de LP con las correcciones del presidente ocupado

¡Hola! Soy Hasshi, diseñador UI en Liberogic.

Mi preocupación reciente es que la producción de un nuevo LP (página de destino) para nuestro servicio de accesibilidad web no avanza como quisiera.

El presidente de mi empresa, quien es responsable de la estructura del sitio, está muy ocupado con otros asuntos. Pero así no podemos seguir adelante.

"¡Bien! Voy a crear al menos un borrador para que la revisión del presidente sea un poco más fácil."

A partir de esa idea surgió la creación ultrarrápida de LP utilizando AI (Gemini) y herramientas de automatización de diseño (Figma Make). En esta ocasión, les presento todos los pasos y mis verdaderos pensamientos desde la perspectiva de un diseñador, sin omitir nada.

Objetivo de esta ocasión: ¡Sacar las correcciones del presidente con el borrador!

¡Bueno, es imposible hacer algo perfecto desde el principio! ¡Claro! Lo importante es lanzar una propuesta con la que el presidente pueda comentar fácilmente, ¡eso debe ser!

Proceso completo para crear landing pages a velocidad de rayo (¡aún más rápido con práctica!)

La distribución real del tiempo en el flujo de producción que probé esta vez fue así. La parte que más tiempo consume es la "iteración" para mejorar la precisión del diseño.

1. 【Análisis】 Gemini, ¿qué te parece esta landing page? （15 minutos）
2. 【Generación de textos】 Pedirle a Gemini que genere el texto de la landing page con mejoras incluidas （15 minutos）
3. 【Creación de prompts】 Pedirle a Gemini que cree el "hechizo mágico" para pasar a FigmaMake （5 minutos）
4. 【Generación de diseño】 FigmaMake, ¡vamos con la primera tanda! （5 minutos）
5. 【Bucle de iteración】 Análisis y generación en ida y vuelta para mejorar la precisión （1 hora 30 minutos）
6. 【Conversión a Figma】 Importar a Figma usando el plugin Html to Design （5 minutos）
7. 【Ajuste en Figma】 Retoques finales para corregir desajustes de diseño （30 minutos）

¡Vamos a ver en detalle cada uno de estos pasos!

PASO 1: 【Análisis】 Profesor Gemini, ¿qué te parece de esta página de destino? (15 minutos)

Primero, haremos que Gemini lea nuestra página de accesibilidad web existente y nos brinde comentarios sin tapujos.

【Ejemplo de indicaciones para Gemini】

Analiza la página de destino relacionada con accesibilidad web en la siguiente URL e identifica los puntos fuertes y las áreas de mejora. (resto omitido)

Entonces, en cuestión de segundos obtenemos los resultados del análisis. "'No hay casos de uso ni testimonios de clientes, lo que dificulta imaginar los beneficios concretos después de implementar el servicio'... Ay, ¡qué precisión! ¡Duele hasta acá! Pero es algo que yo mismo no hubiera podido decir. ¡Gracias, Gemini!" Gemini supo articular con exactitud los problemas que yo mismo sentía vagamente.

Bueno, comencemos evaluando la situación actual. Yo creé esta página, pero... en fin, déjame pedirle a mi profesor Gemini que me diga de frente las cosas que no puedo ver por mí mismo.

PASO 2: 【Generación de contenido】 Solicitar a Gemini que cree textos de la página de destino que incluyan mejoras (15 minutos)

Copiaremos y pegaremos los resultados del análisis del PASO 1 y solicitaremos la creación de textos que incorporen propuestas de mejora.

【Ejemplo de indicaciones para Gemini】

Basándote en los resultados del análisis anterior, crea una propuesta de estructura de textos para la página de destino de accesibilidad web. (pasaje omitido) Marca explícitamente como 【Texto de ejemplo】 los nuevos elementos que se agregarán.

Aparecen textos concretos como "【Voz del cliente - Ejemplo】 Empresa 〇〇: ¡Las consultas a través del sitio web se multiplicaron por 1.5!" y de repente la página de destino se ve mucho más profesional. Con solo esto, uno siente que ha hecho el trabajo.

Bueno, voy a pasar la lista de comentarios que recibí directamente a Gemini para que me ayude a pulir el texto. ¡Así es cómo se aprovecha bien la IA! …Ah, pero después necesito que me añada una etiqueta como '【Texto de muestra】' para no confundirme más tarde. Tengo tendencia a precipitarme, ya sabes…

PASO 3: 【Creación de indicaciones】Hago que Gemini me prepare el "hechizo mágico" para FigmaMake (5 minutos)

Con la estructura de texto del PASO 2 y una descripción de la imagen de diseño que quiero crear, le pido a Gemini que genere una indicación en inglés para FigmaMake.

Una vez que el texto está listo, ¡finalmente es hora del diseño! La parte más emocionante… pero antes tengo que preparar la "solicitud" (indicación) para FigmaMake. Mi inglés improvisado no sería suficiente, así que confío completamente en Gemini para esto. ¡Cuento contigo!

PASO 4: 【Generación de diseño】¡FigmaMake, ahora te toca a ti! (5 minutos)

Ahora copio y pego el hechizo mágico, ¡y presiono Enter! …Así es. ¿Y si sale un diseño perfecto de la nada? …Probablemente no. Pero quién sabe, ¡tal vez sí! Esta emoción me recuerda un poco a abrir un regalo sorpresa, y es bastante divertido.

Copio y pego la indicación generada, luego hago clic en el botón de generar diseño. Esos pocos segundos de espera generan una tensión curiosa. Y entonces llega el primer diseño.

¡Vaya, salió! Pero aún se ve bastante simple… Así que continúo ajustando el diseño y refinando el texto.

Pero, bueno, aquí es donde realmente comienza lo difícil.

PASO 5: 【Bucle repetitivo】Ida y vuelta entre análisis y generación para mejorar la precisión (1 hora y media)

A partir de aquí comienza la sesión de lluvia de ideas con IA. Mientras observo el diseño generado con FigmaMake, consulto con Gemini sobre "me gustaría que fuera así", mejorando gradualmente el prompt. Es un trabajo meticuloso.

"¡No, no es así!", mis soliloquios involuntarios se hacen más audibles. Probablemente resuena por toda la oficina. Pero lo curioso es que este intercambio se vuelve cada vez más divertido.

¡Sí, como era de esperar, no fue aceptado a la primera! ¡Lo sabía! Pero, aun así, albergaba algo de esperanza. Aquí comienza lo importante: colaboración entre yo e IA. ¿Yo como director y Gemini como entrenador?

Y este es el resultado final

Ha mejorado bastante desde el primer dibujo. Sin embargo... es tedioso borrar o agregar partes innecesarias (probablemente porque estoy convirtiendo las instrucciones del japonés al inglés, y a menudo no logro comunicar bien la intención).

Pensé que no sería posible hacer más en FigmaMake, así que recurrí a la estrategia de convertirlo primero a datos de Figma y luego hacer las correcciones.

PASO 6: [Conversión a Figma] Importar en Figma con el plugin Html to Design (5 minutos)

Una vez que la dirección del diseño se ha consolidado lo suficiente, es hora de transferir los datos a Figma. A continuación se detalla el procedimiento.

1. Publico el diseño generado con FigmaMake como una página web temporal.
2. Inicio el plugin de Figma "Html to Design".
3. Ingresa la URL de FigmaMake publicada y ejecuta la importación.

Usa el plugin "Html to Design" de Figma. Copia y pega la URL de la página publicada en FigmaMake y haz clic en el botón. Con solo esto, la página web se convierte en capas en Figma. Realmente, el mundo se ha vuelto muy conveniente.

Publicar FigmaMake

Primero publica FigmaMake. Cuando hagas clic en publicar, el estado cambiará a publicado.

Abre el plugin "Html to Design" de Figma, ingresa la URL de FigmaMake publicada y ejecuta la importación.

Abre el plugin y pega la URL que obtuviste hace poco. Luego, solo haz clic en el botón de importación para finalizar.

Después de unos minutos, aparecerá el diseño exportado en Figma.

Por último, cambia el estado publicado a no publicado

Una vez completado el trabajo, cancela la publicación para volver al estado no publicado.

Consideraciones

Actualmente no existe la funcionalidad de agregar contraseñas a la versión pública ni crear entornos de desarrollo, por lo que es necesario tener cuidado con la fuga de información cuando se utiliza para renovaciones de sitios web corporativos y similares.

Básicamente, si se crea solo con contenido propio limitado o se usa información ficticia para elaborar un prototipo inicial, no hay impacto, así que es buena idea adaptarse según el proyecto (nunca lo utilice en proyectos donde no se permite la subcontratación externa).

¡Perfecto, las cosas se ven bastante bien ahora! Aquí es donde brillo, ¡es el turno de Figma! He estado esperando esto, ¡compañero!

PASO 7: [Ajustes en Figma] Ajustes finales para desalineaciones de diseño, etc. (30 minutos)

Los datos importados aún están en bruto. Hay grupos misteriosos mal definidos, cuadros de texto que se salen, y muchos otros detalles por corregir.

A partir de aquí, es un trabajo de corrección meticuloso y constante. Reaplico los diseños automáticos, convierto los elementos dispersos en componentes, ajusto los espacios en blanco generales… Este pequeño esfuerzo adicional eleva significativamente la calidad del diseño y lo convierte en un "prototipo adecuadamente elaborado".

Este es el resultado final

Cuando se desciende en la LP, la granularidad del diseño disminuye. No estoy seguro si es una limitación inherente a la IA o si fueron mis instrucciones las que no fueron del todo precisas… Seguiré experimentando y mejorando.

Importar, entonces… Mmm, el diseño se está desmoronando más de lo esperado. Bueno, es el resultado del esfuerzo de la IA. Ahora me toca a mí limpiarlo y ordenarlo todo. Este es mi momento para brillar.

Conclusión: Lo que aprendí sobre el "diseño colaborativo con IA" a través de la experiencia

Lo que aprendí en este flujo de producción es que la IA no es una «varita mágica», sino una «compañera excelente».

• El efecto de ahorro de tiempo en la creación de borradores es enorme: Es infinitamente más rápido que enfrentarse a la creación de la estructura desde cero.
• El bucle de prueba y error es clave: Para crear un buen diseño, se requiere paciencia para repetir el diálogo con la IA.
• Al final, interviene la mano humana: La calidad depende de que el diseñador acepte el trabajo de la IA sin cuestionamientos y lo finalice con intención propia.

Por cierto, cuando le mostré tímidamente este borrador al presidente… «¡Vaya, qué interesante! ¡Con esto podemos avanzar más fácilmente! Tener un borrador marca toda la diferencia, ¡gracias!» dijo.

¡Excelente! Valió la pena el esfuerzo… ¡Esta noche la cerveza sabe mejor!

¡Por ahora es todo! La parte de convertirlo en una LP real se publicará como【segunda parte】después de que el presidente haga las correcciones y finalice el diseño.

¿Por qué no intentan ustedes también crear diseños mediante colaboración con IA?