Este artículo fue escrito durante la construcción de LP del año pasado. Aunque es un artículo de esa época, con el rápido progreso de la IA, el contenido está quedando obsoleto ahora que se publica… Es sorprendente la velocidad del progreso de la IA. Considerando que la aceleración continuará en 2026, los diseñadores necesitan mantenerse al día con los cambios en su forma de trabajar y la captura de información, o serán dejados atrás… De verdad, es asombroso. Con el FigmaMake y Gemini 3 actuales, hay aún más cosas que se pueden hacer. Este artículo es el diario de un diseñador que, aunque aprovechaba la IA, se movía de un lado a otro con su evolución. Le agradecería que lo viera como una lectura rápida. Y en las partes que hemos añadido, insertaremos notas complementarias (o lo que podríamos llamar "observaciones críticas") de esta manera, así que disfrútelas como una "pista de audio adicional".
¡Hola!
Soy Hasshi, diseñador de UI en Liberogic.
En el artículo anterior, reporté con entusiasmo: "¡Creé un borrador de LP en 3 horas usando FigmaMake y Gemini!"
Este es el resultado del trabajo anterior.
Puedes ver el artículo anterior aquí.
【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
https://www.liberogic.jp/topics/20250723-figmamake/
Este artículo es la segunda parte.
Después de reportarle al director ejecutivo, me sentía de lo más animado.
¡Con esto podría responder rápidamente a cualquier cambio que el director ejecutivo quisiera!
¡Con esta calidad en 3 horas, no hay nada que objetar!
...Hubo una época en la que pensaba así 😄
Esta vez te traemos lo que vino después de presentarle esto al director ejecutivo con tanta confianza:
"El infierno de las correcciones" ⭐️･:*+.\(( °ω° ))/.:+✨
Para ir al punto,
El hermoso diseño que hicimos en Figma desapareció sin dejar rastro por los comentarios del director ejecutivo.
Creo que esto sigue sucediendo incluso con la IA en su forma actual.
Lección de esta vez: Figma es lo máximo para "crear dashboards y wireframes", pero quizás aún es demasiado pronto para "landing pages llenas de emoción".
La velocidad de evolución reciente de la IA es impresionante, y la IA moderna ofrece usos mucho más versátiles. ¡Es sorprendente!
Presentación del CEO: el dilema del "quedar bien"
Una landing page estilo SaaS bastante pulida que había creado anteriormente. La mostré al CEO con total confianza.
.png)
¡CEO! Acabo de crear la estructura de esa landing page aprovechando la IA. ¿Qué te parece esta composición?
Guau, eso fue rápido. (Mirando la pantalla) ...Hmm, pero me parece un poco rígido.
¿Rígido? (Bueno, un servicio B2B necesita confianza, así que este nivel de estructura formal debería ser...
Me gustaría algo más emocionante, con impacto visual, ¡BAM!, con estilo y fluidez. Y aquí, añade más movimiento, decóralo para que quede "bien".
Ahí está. La temida orden especial: "que quede bien".
El instrumento que más temen todos los diseñadores y que la IA menos entiende ocupa el primer lugar del ranking.
Me dicen "que quede bien" o "que no se vea raro" frecuentemente. Es importante captar el verdadero significado detrás de esas palabras. Los diseñadores ahora también necesitamos habilidades de comunicación. Para alguien como yo, introvertido y sin empatía social, es difícil. Cada día es un reto... (Si los diseñadores necesitaban habilidades sociales, debería haberlas desarrollado desde la infancia. Qué remedio.)
En el caso de trabajos con clientes, profundizaríamos más en la psicología subyacente y las necesidades del cliente, pero el director es demasiado ocupado y rara vez tiene tiempo para realizar entrevistas.
Debido a la relación entre director y empleados, esto a menudo se vuelve vago, lo que resulta en instrucciones y palabras clave inadecuadas.
Y luego entramos en la fase de reflexionar juntos sobre lo que dice el director ocupado y reelaborarlo.
Bueno, eso es una excusa. Solo eran mis excusas. De verdad.
Voz interior (¿Qué quiere decir con "se ve bien"? ¡Ni siquiera el profesor Gemini puede descifrar eso! ¿Podrían dejar de darnos instrucciones de revisión solo con onomatopeyas como "boom" y "whoosh"?)
Ese sentimiento no ha cambiado hasta hoy
FigmaMake versus los despiadados comentarios del director
Ahí es donde comenzó la verdadera batalla.
Para materializar el concepto de "se ve bien" que existe en la mente del director, hacemos revisiones a la base que creamos con FigmaMake, pero...
Aquí es donde la compatibilidad de la herramienta mostró sus garras.
Lo que genera FigmaMake es, en última instancia, «un diseño web lógicamente correcto». Un espaciado limpio y bien estructurado con Auto Layout.
Este es precisamente lo sorprendente de la evolución de la IA. Si generas con el mismo prompt ahora, la precisión es mucho mejor. Se nota el progreso de la IA (he adjuntado imágenes de referencia a continuación).
Es hermoso, educativo y fácil de usar como plantilla o tema.
Pero lo que quería el director era:
«¡Disemina texturas en el fondo!" «¡Saca elementos fuera del marco!" «¿Qué tal si añadimos deslizadores en diagonal?»
Solo decoraciones emocionales que ignoran la lógica.
Cada vez que forzamos la inserción de imágenes decorativas en los datos generados por FigmaMake, Auto Layout grita de angustia y el diseño general se desmorona.
Mi voz interior (¡Ay! Si pongo esa imagen de fondo, todo lo que viene debajo se desalinea. FigmaMake, no es tu culpa, estás siendo correcto. Solo que aún no puedes satisfacer completamente lo que el director está pidiendo…)
Al final, el vacío de tener que rehacerlo «a mano»
«¡Aumenta el espacio aquí!" «¡Haz que el botón tenga más movimiento!"
Para hacer frente a los comentarios brutales que llegaban sin cesar (marcas rojas de edición), tuve que desactivar el Auto Layout que FigmaMake había creado, descomponer los componentes generados y reorganizarlos manualmente.
Horas después. Lo que quedaba en pantalla era un diseño completamente diferente, sin ni un rastro de FigmaMake.
Y así quedó el primer borrador después de todos los ajustes. El diseño resultó completamente distinto del original.
Además, aunque todos los elementos existentes tenían Auto Layout, cuando los copiaba de FigmaMake a Figma, por alguna razón se desactivaba el Auto Layout en algunas partes, lo que me obligaba a configurarlo nuevamente.
Sin darme cuenta, invertí muchísimo tiempo en correcciones.
Mi voz interior (Espera... ¿No habría sido más rápido hacer esto manualmente desde el principio en Photoshop o Figma...? ¿De qué sirvieron mis tres horas de trabajo relámpago...?)
En la oficina a altas horas de la noche, cuando me percaté de esta realidad, sentí un vacío absoluto. Y fue mi colega quien me ofreció una bebida energética en ese momento.
Colega: "¡Ya terminé mi trabajo, me voy!"
Mi colega se fue rápidamente. Al final no me ayudaría...
Conclusión: Las fortalezas y debilidades de FigmaMake
Después de esta complicada corrección, comprendimos las características de la herramienta FigmaMake.
Si se usa incorrectamente, puede aumentar el número de correcciones necesarias.
✅ Lo que FigmaMake hace mejor (= se completa a gran velocidad)
- Paneles de administración, UI de paneles de control, pantallas de aplicaciones, etc.
- Los diseños de cuadrícula ordenados, formularios, tablas y similares son excepcionales.
- Crea una "estructura lógica" instantáneamente, por lo que produce resultados de calidad suficiente para usarlos directamente en paneles de administración de SaaS (aunque, por supuesto, requieren ajustes).
- Wireframes iniciales y propuestas de estructura
- En la etapa de "verificar si faltan o sobran elementos", es perfectamente útil incluso para LPs (siempre que no hayas comenzado a desarrollar el diseño).
- También es muy útil poder crear varios patrones mientras se definen los requisitos.
- Fue muy valioso para articular las solicitudes de los clientes, darles forma inmediatamente y alinear la visión de lo que querían.
❌ Lo que Figma Make no sabe hacer (= requiere trabajo manual)
- Creación visual detallada de LP (páginas de destino)
- Aún tiene dificultades con diseños que cautivan a través de "detalles" y "decoración"
- Lo que se genera es simplemente una UI organizada y fácil de usar. Aunque también puede crear gradientes y patrones decorativos, sin instrucciones precisas el resultado puede parecer de alrededor de 2010.
- Se requiere tiempo para mejorar la precisión del prompt durante la creación de diseño.
- Materializar matices vagos como "algo que se ve bien"
- Aquí aún se necesita la capacidad de traducción de un diseñador humano.
- Si practicas con el prompt durante un tiempo, debería ser posible crear de forma más fluida con instrucciones más precisas (aunque aún no puedo hacerlo)
Resumen: aun así, fue excelente como "primer borrador"
En conclusión, para "crear una LP basada en instrucciones vagas del CEO", usar directamente los datos generados por Figma Make fue demasiado difícil.
Sin embargo, como escribí en el artículo anterior, definitivamente fue útil en el punto de **«pasar de la nada a una forma provisional en 3 horas y extraer los requisitos del director»**. Y anteriormente pasábamos bastante tiempo en eso, lo que ralentizaba el progreso del proyecto.
El requisito de «boom y luego whoosh» es una opinión que salió precisamente porque teníamos un borrador, ¿verdad? (pensamiento positivo).
Lo aprendido esta vez
- Figma Make es un experto en crear la «estructura».
- La «decoración y los toques especiales» son donde brillan los diseñadores.
- Aún no existe una IA capaz de responder a los «vibes» del director.
La próxima vez, sin desanimarme, quiero retar a Figma Make de nuevo con un «rediseño de la interfaz de la herramienta de gestión interna». (Si es un panel de administración... seguro que brilla ahí...!)
En cuanto a la corrección del diseño de la página de destino…….
Sí, seguiré esforzándome con el trabajo manual de forma constante.
Y sobre la evolución de la IA… aquí está el diseño generado con el mismo prompt que usé cuando creé el artículo anterior.
La calidad de la primera generación ha mejorado dramáticamente en solo unos meses. ¡Es bastante sorprendente!
La precisión ha mejorado tanto que da miedo. Últimamente me encuentro estudiando diseño diariamente para no quedarme atrás de la evolución de la IA.
Y aquí está el sitio web que finalmente se completó
«El LP cumple con WCAG 2.2 AA y
Lighthouse obtiene puntuaciones altas (aunque el diagnóstico tarda un poco, ¡pruébalo! ¡A veces sale con puntuación perfecta!)
¡Además, misteriosamente viene con soporte multiidioma integrado!
Consulta también este artículo sobre soporte multiidioma
Aunque actualmente la traducción de navegadores es lo más común, la posibilidad de contar con un sitio traducido automáticamente sin cambios de configuración y a bajo costo es realmente muy conveniente.
»
¿Qué te parece?
¿No crees que ha quedado bastante pulido🎵
He escrito sobre varios temas, pero en definitiva siento que tener una maqueta base nos permitió reducir significativamente las horas de trabajo. Antes solía gastar mucho tiempo en la fase de wireframing, y luego dedicaba más tiempo a trasladarlo al diseño y hacer cambios en el contenido. Se redujeron bastante las horas de trabajo. La próxima vez que use IA, planeo crear un prompt sólido antes de empezar. Y como premio, ¡una cervecita!
¡El diseño UI se actualiza todos los días! También estoy pensando en cómo incorporar la accesibilidad en el diseño LP. Últimamente he estado alejado del marcado y me pregunto si debería mejorar mi JavaScript. ¡Me encanta Takumi Kitamura!
Hasshi
Diseñador Web / Ingresó en 2018 / Todavía se siente como un diseñador principiante en el corazón