[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

¡Hola! Soy Hashi, diseñador de UI en Liberogic Inc.

Lo que me preocupa últimamente es que la producción de la nueva landing page (LP) de nuestros servicios de accesibilidad no avanza como me gustaría.

El presidente, que supervisa la estructura de nuestro sitio, está, afortunadamente, muy ocupado con otros proyectos. Pero si seguimos así, no avanzaremos...

"¡Bien, para que la revisión del presidente sea más fácil, voy a preparar al menos un borrador!"

Todo empezó con esta idea: crear una LP a toda velocidad usando IA (Gemini) y una herramienta de automatización de diseño (FigmaMake). En esta ocasión, compartimos todo el proceso paso a paso y mis impresiones reales como diseñador, sin reservas.

Objetivo de esta entrega: ¡obtener las "correcciones" del presidente a partir de un borrador!

¡Un diseño perfecto nunca sale a la primera! Lo importante es lanzar una primera propuesta que invite a comentarios, ¡eso es lo clave, seguro!

Proceso completo para crear una LP a toda velocidad (¡se vuelve aún más rápido con la práctica!)

Este es el reparto de tiempo real del flujo de trabajo que probamos esta vez. La parte que más tiempo llevó fue la de "iteración", en la que se afina la precisión del diseño.

1. [Análisis] Gemini, ¿qué te parece esta landing page? (15 min)
2. [Generación de texto] Pedir a Gemini que genere el texto de la landing page incluyendo las mejoras (15 min)
3. [Creación de prompt] Pedir a Gemini el "prompt mágico" que enviaremos a FigmaMake (5 min)
4. [Generación de diseño] FigmaMake, ¡primero una solicitud única! (5 min)
5. [Bucle de iteración] Mejorar la precisión mediante idas y vueltas entre análisis y generación (1 hora y media)
6. [Conversión a Figma] Importar a Figma con el plugin Html to Design (5 min)
7. [Corrección en Figma] Ajustes finales de detalles como roturas de maquetación (30 min)

Ahora veamos cada paso en detalle.

PASO 1: [Análisis] Gemini, ¿qué te parece esta landing page? (15 min)

Primero, le pediremos a Gemini que revise la página de accesibilidad actual de nuestra empresa y nos dé comentarios sin rodeos.

[Ejemplo de prompt para Gemini]

Analiza la landing page sobre accesibilidad web de la siguiente URL y enumera sus puntos fuertes y las áreas de mejora. (continúa)

Y en unos segundos, llegó el análisis: "No hay casos de éxito ni testimonios de clientes, por lo que resulta difícil imaginar los beneficios concretos del servicio una vez contratado"... ¡Uf, qué certero, duele! Pero es algo que yo mismo no me habría atrevido a decir. ¡Gracias, Gemini!" Expresó con claridad un problema que yo ya intuía a medias.

Bien, empecemos por la situación actual. Esta página la hice yo, pero... Quiero que el profesor Gemini me diga sin rodeos lo que yo no puedo ver por mi cuenta.

PASO 2: [Generación de texto] Pedir a Gemini que genere el texto de la landing page incorporando las mejoras (15 min)

Copio los resultados del PASO 1 y le pido que redacte un texto que incorpore las mejoras propuestas.

[Ejemplo de prompt para Gemini]

Con base en el análisis anterior, crea una propuesta de estructura de texto para la landing page de accesibilidad web. (omitido) Para los nuevos elementos que añadas, indica claramente [Texto de ejemplo].

Cuando aparece un texto concreto como "[Testimonio de cliente de ejemplo] Empresa ○○: ¡Las consultas desde el sitio aumentaron 1,5 veces!", la página empieza a parecer una landing de verdad. Solo con esto ya siento que he hecho buena parte del trabajo.

Muy bien, ahora le paso a Gemini la lista de críticas que acabo de recibir para que redacte un texto mejorado. ¡Así se aprovecha la IA! ...Ah, y para no confundirme después, mejor que marque los textos con "[Texto de ejemplo]". Soy muy precipitado, así que tengo que tener cuidado...

PASO 3: [Creación del prompt] Pedirle a Gemini que redacte el "hechizo mágico" para FigmaMake (5 min)

Comunicar a Gemini el esquema de texto creado en el PASO 2 y la imagen del diseño que quieres lograr, para que genere un prompt en inglés para FigmaMake.

Una vez listo el texto, ¡llega el diseño, la parte más divertida! Pero antes hay que preparar la "carta de encargo" para FigmaMake. Mi inglés básico no bastaría para transmitirla, así que aquí dejo el trabajo en manos de Gemini. ¡Cuento con usted!

PASO 4: [Generación del diseño] FigmaMake, ¡a por ello! (5 min)

Ahora sí, copia y pega el hechizo mágico y pulsa Enter... ¡y listo! ¿Saldrá un diseño perfecto a la primera? Quizás... No, probablemente no. Aunque, ¿quién sabe? Este cosquilleo es como una tirada de gacha, y la verdad es que resulta divertido.

Copia el prompt generado, haz clic en el botón de generar diseño y espera. Esos segundos de espera producen un nerviosismo bastante curioso. Y entonces aparece el primer diseño.

¡Vaya, ya está! Aunque aún es bastante sencillo... Así que seguiremos ajustando el diseño, los textos y todo lo demás.

Pero bueno, claro, aquí es donde empieza lo bueno de verdad.

PASO 5: [Bucle de iteración] Repetir análisis y generación para afinar la precisión (1 hora y media)

A partir de aquí toca una sesión de lluvia de ideas con la IA. Mientras revisamos el diseño generado en FigmaMake, consultamos a Gemini lo que "nos gustaría cambiar" y vamos mejorando el prompt poco a poco. Es un trabajo constante, pero muy útil.

"¡Ay, no, por ahí no!", se me escapa un monólogo en voz alta. Seguro que se oye por toda la oficina. Pero curiosamente, este intercambio con la IA se va haciendo cada vez más divertido.

Sí, como era de esperar, no salió bien a la primera. ¡Lo sabía! Aun así, me había ilusionado un poco. Aquí empieza lo bueno: un trabajo en equipo con la IA. Yo soy el director y Gemini hace de entrenador, más o menos.

Y este es el resultado final:

Ha mejorado bastante respecto al primer boceto. Sin embargo... cuesta bastante eliminar o añadir partes innecesarias (probablemente, al dar instrucciones traduciendo del japonés al inglés, muchas veces no se transmite bien la intención).

Como pensé que seguir trabajando en FigmaMake podría no ser viable, decidí recurrir a la fuerza bruta: convertirlo primero en datos de Figma y corregirlo desde ahí.

PASO 6: [Figma] Importar a Figma con el plugin Html to Design (5 min)

Una vez definida en líneas generales la dirección del diseño, llega el momento de pasar los datos a Figma. A continuación se indican los pasos.

1. Primero, publique el diseño generado en FigmaMake como una página web.
2. Inicie el plugin de Figma "Html to Design".
3. ¡Introduzca la URL de FigmaMake publicada y ejecute la importación!

Lo que usas es el plugin "Html to Design". Copias y pegas la URL de la página publicada en FigmaMake y haces clic en el botón. Solo con eso, la página web se convierte en capas de Figma. Realmente vivimos en un mundo muy práctico...

Publicar en FigmaMake

Primero, publica FigmaMake. Al hacer clic en "Publicar", el estado cambiará a publicado.

Abre el plugin "Html to Design" de Figma, introduce la URL de FigmaMake publicada e ¡ejecuta la importación!

Abre el plugin y pega la URL que copiaste antes. Después, solo tienes que hacer clic en el botón de importar y listo.

Tras unos minutos, aparecerá en Figma el diseño exportado.

Por último, cambia el estado a no publicado

Cuando termines todo el proceso, vuelve al estado no publicado con "Anular publicación".

Puntos a tener en cuenta

Actualmente, el estado publicado no permite proteger con contraseña ni crear entornos de desarrollo. Por ello, si lo utilizas para renovar el sitio web de una empresa, debes tener cuidado con posibles filtraciones de información.

Básicamente, si se crea con contenido propio de la empresa o se usa información ficticia para elaborar un primer borrador, no hay problema, así que creo que conviene elegir según el proyecto (nunca lo uses en proyectos que no puedan salir de la empresa).

¡Bien, ya va quedando bastante bien! Ahora llega mi terreno de juego, Figma. ¡Perdona la espera, compañero!

PASO 7: [Corrección en Figma] Ajustes finales para corregir roturas de maquetación (30 min)

Los datos recién importados todavía están muy en bruto. Hay agrupaciones misteriosas, cuadros de texto que se salen de sus límites y muchísimos detalles que criticar.

A partir de aquí toca un trabajo de corrección constante y meticuloso: volver a aplicar auto layout, convertir en componentes los elementos desordenados y ajustar los espacios de todo el conjunto... Este esfuerzo extra es lo que eleva la calidad del diseño y lo convierte en un "borrador en condiciones".

Este es el resultado final

En la parte inferior de la landing page el nivel de detalle del diseño baja. ¿Es una limitación inherente a la IA o mis instrucciones fueron deficientes? Seguiré probando y ajustando sobre la marcha.

Importar, listo... Vaya, el diseño se ha desmadrado bastante, ¡con mucha energía! Bueno, es fruto del esfuerzo de la IA. Aquí es donde mostraré mi cariño por el oficio, dejándolo todo bien pulido.

Resumen: los puntos clave del "diseño en colaboración con IA" que descubrí al hacerlo

Lo que más me quedó claro con este flujo de trabajo es que la IA no es una "varita mágica", sino un "compañero excelente".

• El ahorro de tiempo al crear el borrador es enorme: es muchísimo más rápido que quedarse dándole vueltas a la estructura desde cero.
• El ciclo de prueba y error es la clave: para crear un buen diseño hace falta paciencia para repetir el diálogo con la IA.
• Al final, el toque humano: no aceptes sin más lo que genera la IA; la calidad depende de que el diseñador lo termine con intención.

Por cierto, cuando me atreví a enseñarle este borrador al presidente... "¡Vaya, qué interesante! Con esto será más fácil avanzar. ¡Que haya un borrador marca toda la diferencia, gracias!" fue lo que dijo.

¡Qué bien! ¡Ha merecido la pena el esfuerzo...! ¡Esta noche la cerveza sabrá mejor!

¡Hasta aquí por hoy! La parte de convertirlo en LP real la publicaré como [Parte 2] después de que el presidente haga sus correcciones y termine el diseño.

¿Y tú? ¿Por qué no pruebas a crear diseños nuevos en colaboración con la IA?