Este artículo fue escrito el año pasado durante la construcción de la landing page. Aunque es un texto antiguo, el progreso de la IA es muy rápido, así que el contenido ya puede estar desactualizado... Es sorprendente la velocidad con la que avanza la IA. Si pensamos que en 2026 seguirá acelerándose, los diseñadores tendremos que mantenernos al día con la forma de trabajar y de captar la información, o nos quedaremos atrás... Realmente impresionante. Figma Make y Gemini 3 de hoy permiten hacer mucho más. Espero que lo leas como el diario de un diseñador que, aunque usaba la IA a fondo, se veía desbordado por su evolución. Y en las partes que he ampliado, añadiré notas aclaratorias (en otras palabras, comentarios irónicos) como esta, para que las disfrutes como una pista de audio adicional.
¡Hola!
Soy Osamu Hashimoto, diseñador de UI en Liberogic Inc.
En mi artículo anterior, presumí entusiasmado de haber creado la plantilla inicial de una landing page en 3 horas con Figma Make y Gemini.
Este es el resultado del trabajo anterior.
Puedes consultar el artículo anterior aquí.
[Crear y aprovechar Figma Make: primera parte] ¡Tres horas con Figma Make y Gemini! Un nuevo flujo de creación web para preparar con rapidez la base de una landing page que facilita las correcciones de un director ocupado
https://www.liberogic.jp/topics/20250723-figmamake/
Este artículo es la segunda parte.
Después de informar al director, yo estaba de muy buen humor.
¡Con esto podremos responder a las exigencias repentinas del director a toda velocidad!
¡Si la calidad es esta en solo 3 horas, no habrá ninguna queja, ¿verdad?!
...Hubo una época en la que yo también pensaba así. jaja
Esta vez, lo que pasó después de presentar con entusiasmo mi trabajo al director
Aquí tienen la "fase infernal de correcciones" ⭐️･:*+.\(( °ω° ))/.:+✨
Para ir directo al grano,
El hermoso diseño que creé con FigmaMake desapareció sin dejar rastro tras el comentario del director.
Creo que esto seguirá ocurriendo incluso ahora que la IA ha evolucionado.
Lección de esta vez: FigmaMake es lo más potente para crear «paneles de control y wireframes», pero para una LP llena de emoción… quizás todavía no esté listo.
La evolución de la IA es tan rápida que ahora se puede usar de muchas más maneras, ¿verdad? ¡Qué sorpresa!
Presentación al director: el muro de «que quede bien»
La propuesta de landing page estilo SaaS que preparé antes, bastante bien acabada. Se la presenté al director con toda la confianza del mundo.
.png)
¡Director! Le preparé el borrador de la landing page usando IA a toda velocidad. ¿Qué le parece la estructura?
Vaya, qué rápido. (Mirando la pantalla) ...Mmm, pero se ve un poco rígida, ¿no?
¿Rígida? (No, como es un servicio B2B que necesita transmitir confianza, mejor que se vea así de ordenada...)
¿No podría hacerlo más emocionante? Algo con más impacto, ¡bum!, y con un aire más elegante. Ah, y aquí, añade más movimiento y ponle muchos adornos para que quede "bonito".
Y ahí está. La instrucción infalible: "que quede bonito".
Es el primer puesto en el ranking de instrucciones que más temen todos los diseñadores y que la IA menos entiende.
Se suele oír "que quede bonito" o "que tenga más estilo". Hay que saber leer el significado detrás de esas palabras. Hoy en día, a los diseñadores también se les exige saber comunicarse bien. Para alguien como yo, que tiene dificultades para comunicarse y no entiende bien las indirectas, cada día es un entrenamiento... (Si hacía falta habilidad social para diseñar, debí entrenarla desde pequeño... Qué pena, qué pena).
En el caso de los trabajos para clientes, aquí profundizamos aún más en la psicología y las necesidades reales del cliente, pero como el presidente está muy ocupado, a menudo no logramos encontrar tiempo para una entrevista.
Debido a la relación entre presidente y empleado, a veces las cosas se quedan en un terreno demasiado informal y la solicitud termina siendo vaga.
Y entonces llega la fase en la que todos nos ponemos a masticar de nuevo las palabras del ocupado presidente para construir el resultado.
Esto es una excusa, ¿verdad? Solo era mi excusa. De verdad.
La voz interior (¡¿Qué significa "buen ambiente"?! ¡Ni siquiera el profesor Gemini puede leer eso! ¿Podrían dejar de dar instrucciones de corrección usando solo onomatopeyas, como "¡DOOON!" y "¡SHUU!"?!)
Este sentimiento sigue siendo el mismo hoy
FigmaMake vs. los comentarios despiadados del presidente
Ahí fue donde empezó la verdadera batalla.
Partiendo de la base creada con FigmaMake, íbamos introduciendo correcciones para dar forma al "buen ambiente" que el presidente tenía en mente, pero...
Aquí es donde la compatibilidad entre las herramientas empieza a mostrar sus colmillos.
Lo que genera FigmaMake es, en el fondo, un "diseño web lógicamente correcto". Una composición limpia y bien estructurada, armada a base de Auto Layout (diseño automático).
Esto es precisamente lo impresionante de la evolución de la IA. Si generamos hoy el mismo prompt, el resultado es bastante mejor. Se nota el avance de la IA (adjunto una imagen de referencia más abajo).
Es bonito y resulta instructivo, además de ser bastante práctico como tema de plantilla.
Sin embargo, lo que pide el presidente es
"¡Pon texturas dispersas por el fondo, anda!" "Haz que los elementos se salgan del marco" "¿Y si metemos unas ranuras diagonales?"
Ese tipo de decoraciones emocionales que ignoran la lógica, una y otra vez.
Cada vez que forzamos imágenes decorativas en los datos generados por FigmaMake, Auto Layout se queja a gritos y toda la composición se va desmoronando.
La voz interior (¡Ay, en cuanto metí esa imagen de fondo, hasta la sección de abajo se desplazó! FigmaMake, tú no tienes la culpa, lo estás haciendo bien. Solo que todavía no alcanza a cubrir lo que pide el presidente...)
Al final, la sensación de vacío de tener que rehacerlo todo "a mano"
"¡Ajusta menos espacio aquí!" "¡Haz que el botón tiemble más!"
Para atender las continuas anotaciones infernales (correcciones marcadas en rojo), con gran pesar desactivé el Auto Layout que había generado FigmaMake, desarmé los componentes generados y los reubiqué manualmente.
Varias horas después, lo que quedó en pantalla fue un diseño completamente distinto, sin ni un milímetro de la esencia de FigmaMake.
Y aquí está la primera versión tras haber aplicado muchos cambios. Terminó siendo un diseño totalmente distinto al borrador inicial.
Además, aunque todos los elementos existentes tenían Auto Layout, al copiar desde FigmaMake a Figma, en algunas partes el Auto Layout se desactivaba sin motivo aparente, así que había que volver a aplicarlo, lo que añadía más trabajo.
Sin darme cuenta, las correcciones me llevaron bastante más tiempo del que esperaba.
Voz interior (¿Eh? Esto... ¿no habría sido más rápido hacerlo a mano desde el principio en Photoshop o Figma...? ¿Y entonces de qué sirvieron mis tres horas ultrarrápidas...?)
Cuando en la oficina a medianoche me di cuenta de ese hecho, la sensación de vacío fue indescriptible. Y fue mi superiora quien me dio una bebida energética a mí, que me sentía así.
Superiora: ¡Yo ya terminé el trabajo, me voy!
Mi superiora se marchó con elegancia. Así que no iba a ayudarme...
Conclusión: Lo que FigmaMake hace «bien» y lo que hace «mal»
Tras esta corrección tan complicada, hemos entendido mejor las características de la herramienta FigmaMake.
Si se usa en el momento equivocado, al final aumenta el esfuerzo de corrección.
✅ Lo que FigmaMake hace bien (= se completa a toda velocidad)
- Paneles de administración, interfaces de dashboard, pantallas de aplicaciones, etc.
- Los diseños de cuadrícula ordenados, formularios y tablas son lo mejor de la herramienta.
- Como genera al instante una "estructura lógica", el resultado puede llegar a parecer tan logrado que cabría pensar: ¿no podría usarse tal cual en un panel de administración de un SaaS? (por supuesto, los retoques manuales siguen siendo imprescindibles).
- Wireframes iniciales y propuestas de estructura
- En la fase de "verificar si faltan o sobran elementos", también resulta muy útil para landing pages (siempre que sea antes de detallar el diseño).
- Además, resulta muy práctico al definir los requisitos, ya que permite crear rápidamente múltiples variantes.
- Ha sido especialmente útil para traducir las peticiones del cliente en algo tangible al instante y alinear expectativas sobre la marcha.
❌ Lo que FigmaMake no hace bien (requiere trabajo manual)
- El acabado visual de las landing pages (LP)
- Todavía no se da bien el diseño que se logra con detalles decorativos o "ornamentos".
- Lo que se genera es, ante todo, una interfaz de usuario ordenada y fácil de usar. También se pueden añadir degradados, patrones y otros elementos decorativos, pero si no se dan instrucciones precisas, el resultado puede parecer de alrededor de 2010.
- Mejorar la precisión de los prompts para el diseño requiere tiempo.
- Traducir un matiz vago como "que quede bien" en un resultado concreto
- Para esto todavía se necesita la capacidad de interpretación de un diseñador humano.
- Si se usa el prompt durante más tiempo, quizá se pueda redactar con instrucciones más precisas y de forma más fluida (a mí todavía no me sale)
Resumen: aun así, como "borrador" fue muy útil
Por eso, para una landing page basada en las indicaciones vagas del presidente de la empresa, no fue fácil utilizar directamente los datos generados por FigmaMake.
Sin embargo, como escribí en el artículo anterior, **"en tres horas logramos tener una primera versión a partir de una hoja en blanco, lo que permitió sacar a relucir los requisitos del presidente"**, sin duda fue de gran ayuda. Antes, sin embargo, dedicábamos bastante tiempo a esa etapa, lo que retrasaba el avance del trabajo.
La solicitud de "algo llamativo y dinámico" también surgió precisamente porque teníamos una primera versión sobre la que opinar (pensamiento positivo).
Lo que aprendí en esta ocasión
- FigmaMake es un experto en crear la "estructura".
- Los "adornos" (ashirai) son donde los diseñadores demuestran su habilidad.
- Todavía no existe una IA que pueda responder al "me gusta así, sin más" del presidente.
La próxima vez, sin desanimarme, quiero intentar la revancha con FigmaMake con el rediseño de una "herramienta interna de administración de UI". (Si es una pantalla de administración... seguro que puede brillar...!)
Las correcciones del diseño de la landing page...
Bueno, seguiré trabajando con constancia y a mano. ¡Ánimo!
En cuanto a la evolución de la IA... Aquí tienen el diseño generado con el mismo prompt que usamos para crear el artículo anterior.
En solo unas pocas semanas, la calidad de la primera generación ha mejorado muchísimo. Realmente sorprendente.
La precisión ha mejorado tanto que da un poco de miedo. Hoy en día me propongo estudiar diseño a diario para no quedarme atrás frente a la evolución de la IA.
Y aquí tienen el sitio web que acabamos de completar:
La propia landing page cumple con WCAG 2.2 AA, y
obtiene buenas puntuaciones en Lighthouse (el análisis tarda un poco, ¡pero recomendamos probarlo! A veces obtiene la puntuación máxima)
. Además, de forma inesperada, ofrece soporte multilingüe!
Consulta también este artículo sobre el soporte multilingüe
. Aunque hoy en día la traducción del navegador es lo más común, poder traducir el sitio automáticamente sin cambiar de idioma y a bajo coste es muy práctico.
¿Qué les parece?
Creo que ha quedado bastante bien pulido 🎵
Después de escribir todo esto, la sensación es que, en efecto, contar con una base de partida nos ha permitido reducir bastante el esfuerzo. ¡De verdad! Antes, la fase de wireframe nos llevaba bastante tiempo, y después, al pasar al diseño y modificar el contenido, también requería mucho trabajo. Con este flujo, ese esfuerzo se ha reducido considerablemente. La próxima vez que use IA, pienso generar un prompt bien estructurado antes de empezar. Y, como premio, una cervecita.
¡El diseño de UI evoluciona cada día! Estoy pensando cómo integrar la accesibilidad en el diseño de landing pages. Hace poco me alejé del maquetado y me pregunto si debería también evolucionar con JS. ¡Me encanta Takumi Kitamura!
Hasshi
Diseñador web / Se unió en 2018 / En el corazón, sigo siendo un diseñador novato