Topics

Este artículo se escribió el año pasado cuando estábamos creando la página de inicio. Originalmente se escribió en ese momento, pero la IA ha avanzado tan rápido que publicarlo ahora hace que el contenido quede obsoleto... Es asombroso lo rápido que avanza la IA. Considerando que se acelerará aún más para 2026, los diseñadores deberán mantenerse al día con su forma de trabajar y con la información, o se quedarán atrás... Es realmente asombroso. FigmaMake y Gemini3 ahora pueden hacer mucho más. Espero que simplemente leas este artículo, considerándolo como el diario de un diseñador que aprovecha al máximo la IA, pero que también se siente abrumado por su evolución. También añadiré texto complementario (también conocidos como comentarios) en las partes que he añadido, así que disfrútalo como un comentario de audio secundario.

¡Hola!

Mi nombre es Hasshi y trabajo como diseñador de UI en Liberogic Inc.

En mi artículo anterior, informé con entusiasmo que había creado un borrador de una página de destino en solo tres horas utilizando FigmaMake y Gemini.

Éste es el resultado del trabajo anterior.

Por favor vea el artículo anterior aquí.

[Hagámoslo y usémoslo con FigmaMake: Parte 1] ¡FigmaMake y Gemini en 3 horas! Un flujo de producción web de nueva generación para crear una página de destino preliminar que agilizará el proceso de "trabajo en rojo" para CEOs ocupados.

https://www.liberogic.jp/topics/20250723-figmamake/

Este artículo es la segunda mitad de esto.

Después de informar al presidente, me sentí bien.

¡Con esto podremos responder incluso a las peticiones irrazonables del presidente en un tiempo récord!

¡Con esta calidad en 3 horas, no hay forma de quejarse!

...Hubo un tiempo en que yo también pensé así jajaja

Esta vez se lo presenté al presidente con gran entusiasmo.

"La revisión del infierno"Entregaremos ⭐️･:*+.\(( °ω° ))/.:+✨

En resumen,

Ese hermoso diseño que creé con FigmaMake desapareció sin dejar rastro después del comentario del presidente.

Creo que esto seguirá sucediendo incluso ahora que la IA ha evolucionado.

Lección aprendida: FigmaMake es excelente para crear paneles y diagramas, pero es posible que no esté listo para crear páginas de destino emotivas.

La IA ha evolucionado rápidamente últimamente y ahora se puede usar de diversas maneras. ¡Es increíble!

Presentación del Presidente: La barrera de "hacerlo lucir bien"

Estaba lleno de confianza cuando le mostré al CEO la propuesta de página de destino estilo SaaS que había creado la última vez, que estaba bastante bien hecha.

¡Presidente! ¡Usé IA para crear un borrador de ese LP rapidísimo! ¿Qué te parece la estructura?

Vaya, eso fue rápido. (Mirando la pantalla)... Mmm, pero es un poco difícil.

¿Es demasiado rígido? (No, es un servicio B2B que requiere confianza, así que es mejor estar así de organizado...)

¿No podrías hacerlo más emocionante, impactante y con una sensación más nítida? ¿Y añadirle movimiento y decoración para que se vea "bonito"?

Ahí está."Haz que se vea bien."

Esta es la instrucción número uno que todos los diseñadores más temen y que a la IA le resulta más difícil comprender.

A menudo me dicen cosas como "se ve bien" o "parece apresurado". Es importante comprender el significado profundo de esas palabras. Vivimos en una época en la que los diseñadores también se ponen a prueba en sus habilidades comunicativas. Como alguien con poca capacidad de comunicación y con cierta inseguridad, me resulta difícil, así que cada día es una sesión de entrenamiento... (Si las habilidades comunicativas fueran tan importantes para los diseñadores, les habría dado más formación desde pequeños... ¡Ay!).

Cuando trabajamos con clientes, profundizamos en la psicología de la otra persona y en lo que quiere, pero el presidente está muy ocupado y no tiene mucho tiempo para escucharlos.

Debido a la relación entre el presidente y los empleados, las cosas pueden volverse un poco laxas y las solicitudes pueden terminar haciéndose utilizando palabras al azar.

Luego entramos en la fase en la que todos trabajamos juntos para digerir y recrear las palabras del ocupado presidente.

Esto fue solo una excusa. Fue solo una excusa de mi parte.

voz interior¿Qué quieres decir con "se ve bien"? ¡Ni siquiera Gemini-sensei puede leer tan lejos! ¿Podrías dejar de dar instrucciones de corrección usando solo palabras onomatopéyicas como "bum" y "whoosh"?

Este sentimiento no ha cambiado ni siquiera ahora.

FigmaMake vs los brutales comentarios del CEO

A partir de ahí comenzó la verdadera batalla.

Para plasmar el "buen presentimiento" que tiene el presidente en su mente, hacemos correcciones a la base creada en FigmaMake...

Aquí es donde entra en juego la compatibilidad de herramientas.

FigmaMake solo genera"Diseño web lógicamente correcto"Un hermoso diseño de caja creado con Auto Layout.

Este es otro aspecto sorprendente de la evolución de la IA. Si generas un texto usando la misma instrucción ahora, la precisión es bastante buena. Realmente se puede apreciar el progreso de la IA (ver la imagen adjunta a continuación).

Es hermoso, educativo y fácil de usar como tema de plantilla.

Sin embargo, la petición del presidente

¡Añadimos textura al fondo! Hagamos que los elementos se extiendan más allá de los bordes. ¿Qué tal si añadimos ranuras diagonales?

como,Decoración emocional que desafía la lógica.Solo.

Cada vez que intento forzar una imagen decorativa en los datos generados por FigmaMake, Auto Layout comienza a gritar y todo el diseño se desmorona.

Voz Interior (¡Ay, no! ¡Cuando añadí esa imagen de fondo, la parte inferior también se movió! FigmaMake, no tienes la culpa, tienes razón. ¡Pero sigo sin poder cumplir del todo con los requisitos del director ejecutivo...!)

El vacío de tener que recrearlo a mano

¡Ajusta los márgenes! ¡Ajusta los botones para que se muevan más!

Entra uno tras otroComentario del demonio (en rojo)Para solucionar esto, desactivé a regañadientes el diseño automático que FigmaMake había creado, desarmé los componentes generados y los reorganicé manualmente.

Unas horas más tarde, lo único que quedaba en la pantalla eraLos datos de diseño son completamente diferentes y ni siquiera se parecen a FigmaMake.

Y aquí está el primer borrador después de varios cambios. El diseño es completamente diferente.

Además, aunque todos los elementos existentes se diseñan automáticamente, cuando copias de FigmaMake a Figma, por alguna razón el diseño automático se cancela para algunas partes, lo que significa que debes realizar el diseño automático nuevamente.

Me di cuenta de que tomaría mucho tiempo arreglarlo.

Pensamientos internos (¿Eh? ¿No habría sido más rápido hacerlo a mano en Photoshop o Figma desde el principio...? ¿Qué pasó con mis tres horas rapidísimas...?)

Sentí un vacío al darme cuenta de esto en la oficina, tarde por la noche. Y entonces fue mi compañero de mayor edad quien me dio una bebida energética.

Senior: "¡Me voy a casa porque terminé de trabajar!"

El mayor sale corriendo. No me va a ayudar...

Conclusión: Fortalezas y debilidades de FigmaMake

Luego de pasar por todo este lío de arreglos, aprendí las características de la herramienta llamada FigmaMake.

Si se utiliza en el lugar equivocado, en realidad aumentará la cantidad de trabajo necesario para realizar correcciones.

✅ En qué es bueno FigmaMake (=termina súper rápido)

• Pantalla de administración, interfaz de usuario del panel, pantalla de la aplicación, etc.
  • Los diseños de cuadrícula limpios, formularios, tablas, etc. se muestran en su mejor momento.
  • Crea instantáneamente una estructura lógica, por lo que puedes crear algo de tan alta calidad que pensarás que se puede usar tal cual para las pantallas de gestión de SaaS (aunque se requieren algunos ajustes, por supuesto).
• Plan inicial de estructura y wireframe
  • Si estás en la etapa de "verificar si hay elementos que faltan o son innecesarios", LP se puede utilizar perfectamente (antes de que el diseño esté completamente desarrollado).
  • También es muy útil ya que te permite crear varios patrones mientras estás calculando los requisitos.
  • Fue extremadamente útil para verbalizar las peticiones del cliente, darles forma en el momento y afinar la imagen.

❌ En qué no es bueno FigmaMake (= trabajo manual requerido)

• Creación de elementos visuales para LP (página de destino)
  • Todavía no soy bueno creando diseños que sean atractivos con "decoraciones" y "elementos decorativos".
  • La interfaz de usuario generada es organizada y fácil de usar. Puedes añadir decoraciones como degradados y patrones, pero si no das instrucciones claras, el producto final podría parecer de la década de 2010.
  • Se necesita tiempo para mejorar la precisión de las indicaciones al crear un diseño.
• La encarnación del vago matiz de "se siente bien"
  • Esto todavía requiere las habilidades de traducción de los diseñadores humanos.
  • Si uso las indicaciones con más frecuencia, creo que podré crearlas con más fluidez y con instrucciones más precisas (todavía no puedo hacerlo).

Resumen: Aún así, fue un excelente punto de partida.

Entonces,Fue difícil utilizar los datos generados de FigmaMake tal como están para la "producción de LP basada en instrucciones vagas del presidente".es.

Sin embargo, como escribí en mi artículo anterior, fue definitivamente útil para "pasar de cero a un borrador en tres horas y lograr que el presidente aceptara lo que quería". Antes, esto habría llevado mucho tiempo, y habría llevado mucho tiempo avanzar con el trabajo.

También se pidió algo "brillante y refrescante".Las opiniones surgieron sólo porque había un punto de partidaAsí que eso es todo (pensamiento positivo).

Lo que aprendí esta vez

• FigmaMake es un profesional en la creación de "estructuras".
• La decoración es donde se ponen a prueba las habilidades del diseñador.
• Todavía no existe ninguna inteligencia artificial que pueda responder al "buen presentimiento" del presidente.

La próxima vez, probaré de nuevo FigmaMake renovando la interfaz de usuario de nuestra herramienta de gestión interna. (Si es una pantalla de administración... ¡seguro que brillará!)

Respecto a los cambios en el diseño de LP...

¡Sí, seguiré trabajando duro en este trabajo manual!

Y hablando de la evolución de la IA... Aquí está el diseño generado utilizando los mismos indicadores que al crear el primer artículo.

La calidad de la generación inicial se ha disparado en tan solo unos meses, lo cual es bastante sorprendente.

El aumento explosivo de la precisión es bastante aterrador. Hoy en día, quiero estudiar diseño a diario para poder seguir el ritmo de la evolución de la IA.

yAquí está el sitio web completo

El LP en sí cumple con WCAG2.2AAY lo hago,
Lighthouse también obtiene una alta puntuación (requiere un poco de tiempo, ¡pero pruébalo! ¡A veces obtendrás la máxima puntuación!)
Y misteriosamente,Soporte multilingüe！
Para obtener soporte multilingüe, consulte este artículo¡Échale un vistazo también!
Hoy en día, la traducción del navegador es la norma, pero es muy conveniente poder usar un sitio de traducción a bajo costo sin tener que cambiar.

¿Qué opinas?
¿No crees que quedó bastante bien?🎵

Escribí muchas cosas diferentes, pero creo que tener un borrador en mente me ayudó a reducir la cantidad de trabajo. Antes, habría dedicado mucho tiempo a la fase de diseño, y luego habría tenido que pasarlo a diseño y cambiar el contenido, lo que me ahorró mucho trabajo. La próxima vez que use IA, me aseguraré de generar indicaciones sólidas antes de intentarlo. También me regalé una cerveza como recompensa.