Diseñar interfaces completas puede ser un proceso lento cuando partes de cero, buscas fotos adecuadas o necesitas llenar decenas de campos con datos realistas. Figma integra herramientas de inteligencia artificial que funcionan como aceleradores para cada una de estas tareas, permitiéndote avanzar más rápido sin sacrificar calidad. Tres de ellas destacan por su impacto inmediato en el flujo de trabajo diario: First Draft, Make Image y Replace Text.
¿Cómo generar pantallas desde un prompt con First Draft?
Cuando tienes una sección pendiente en tu diseño —como una pantalla de cuentas que nunca se priorizó— First Draft te permite crear un bosquejo funcional a partir de una descripción en texto [0:42]. Para acceder, abre el menú de acciones con el ícono correspondiente o el atajo Cmd + ,, busca First Draft y verás que las herramientas con soporte de IA aparecen marcadas con un ícono especial a la derecha.
Al seleccionarla, aparece un modal donde escribes tu prompt. Este puede incluir:
- El tipo de pantalla que necesitas, por ejemplo, mobile.
- Estructura del header con íconos específicos.
- Una lista vertical de elementos con datos de ejemplo.
- Resúmenes, botones secundarios y barras de navegación.
También puedes elegir el estilo de salida: una app básica o un modo wireframes [3:07]. Es importante entender que First Draft no utiliza tus propios componentes, así que el resultado es un punto de partida para explorar ideas, no un entregable final. A partir de ese bosquejo, construyes tu versión definitiva con tus estilos, componentes y variables.
¿Qué pasa si el resultado no es exacto?
Es normal que el modelo no reproduzca todo lo que indicaste o que aparezcan elementos inesperados, lo que se conoce como alucinación en modelos de IA [3:33]. Puedes ajustar bordes, espaciado y colores directamente en el resultado, o regenerar con un estilo diferente para acercarte más a lo que visualizas.
¿Cómo crear imágenes con Make Image?
Cuando necesitas una foto para tu diseño y no tienes tiempo de buscar en bancos de imágenes como Unsplash, o la imagen ideal tiene costo, Make Image genera recursos visuales directamente dentro de Figma [4:16].
Para usarla, añade un campo de imagen y selecciona la acción Make an Image, o búscala en el menú de acciones. Escribe una descripción detallada de lo que necesitas; por ejemplo: "foto de un recibo de papel de un restaurante mexicano sobre una mesa de madera, vista desde arriba, iluminación cálida" [5:00].
- Puedes elegir el modelo de generación: Gemini, GPT u otras opciones disponibles.
- La imagen generada se copia y se pega en el container de tu diseño.
- Es posible editar la imagen con un prompt posterior, como reemplazar un elemento específico dentro de la foto [6:24].
¿Qué ajustes adicionales permite?
Una vez generada la imagen, Figma ofrece opciones como quitar el fondo, seleccionar un área para mejorarla, expandirla para usarla como cover, aumentar la resolución o incluso vectorizarla si se trata de una ilustración [6:02]. Todo esto reduce significativamente el trabajo manual.
¿Cómo llenar contenido realista con Replace Text?
Cuando tienes múltiples instancias de un componente con los mismos datos repetidos, editarlas una por una resulta tedioso. Replace Text reemplaza el contenido de varios elementos de forma dinámica usando un prompt [7:28].
El proceso es sencillo:
- Selecciona todos los elementos que quieres modificar.
- Abre el menú de acciones y busca Replace Content.
- Escribe un prompt específico, por ejemplo: "transacciones de una app de finanzas de México con nombres de negocios reales, montos en pesos mexicanos entre 50 y 990".
Esta herramienta es más rápida que las anteriores porque solo genera texto, no imágenes [8:16]. Incluso modifica valores dentro de los detalles de cada tarjeta. Para mayor precisión, puedes incluir en el prompt ejemplos de bancos o categorías específicas.
Después de la generación automática, basta con ajustar manualmente un par de elementos —como agregar ingresos de salario o freelance— para lograr la variación necesaria [8:46].
Estas tres herramientas representan aceleradores prácticos: First Draft para romper el lienzo en blanco, Make Image para generar assets visuales y Replace Text para poblar datos realistas. Figma cuenta con más funciones de IA como Rename Layers o búsqueda inteligente que puedes explorar por tu cuenta. ¿Ya probaste alguna de ellas? Comparte tu experiencia y cuéntanos cuál te resulta más útil en tu flujo de trabajo.
