Ocho consejos esenciales para usar Figma Make

En Config 2025, presentamos Figma Make, que permite pasar del concepto al prototipo con solo pocas indicaciones. Durante meses, probamos Figma Make de forma intensiva internamente. En base a eso, aquí encontrarás ocho consejos prácticos y prácticas recomendadas, además de ejemplos de indicaciones.

1. Empieza tu primera indicación con detalles

Cuantos más detalles incluyas sobre tu diseño en la indicación inicial, menos intercambios adicionales necesitarás para obtener el resultado que deseas. “Es mejor que la generación inicial se acerque lo más posible a tu visión y solo requiera pequeños ajustes; corregir el resultado con varias indicaciones adicionales lleva mucho más tiempo”, dice la impulsora de diseño Ana Boyer.

A continuación te indicamos algunos datos clave que debes incluir en tu indicación inicial:

• Tarea: qué debería hacer Figma Make
• Contexto: dónde encaja este flujo o pantalla
• Elementos clave de diseño: funciones importantes que Figma Make debe incorporar
• Comportamientos esperados: qué sucede con esos elementos al interactuar con ellos
• Restricciones: aspectos como el dispositivo, la disposición o el estilo visual

Esta estrategia de preparación previa no solo requiere tener una visión clara del flujo y las especificaciones de tu producto antes de ingresar las indicaciones en Figma Make, sino también compartir ese contexto con las indicaciones adecuadas. También puedes aprovechar los asistentes de IA para perfeccionar tus indicaciones; te proporcionarán orientación detallada y fragmentos de código listos para usar que podrás pegar directamente en Make para lograr efectos avanzados.

Consejo adicional: si tu indicación inicial no te da el resultado que deseas, considera formularla de otra manera. Por ejemplo, en lugar de indicar alinea verticalmente dos elementos, intenta reformular la indicación como mueve este elemento 20 píxeles hacia abajo o agrega 16 píxeles de espacio entre estos botones.

En la práctica

Greg Huntoon, gerente impulsor de diseñadores de Figma, probó diferentes enfoques hasta dar con una indicación que le permitió obtener una primera versión funcional de su kit de visualización de efectos del mouse. Su indicación más acertada incluía:

• Resumen del proyecto
• Especificaciones de la plataforma
• Propósito y caso de uso
• Lista de características principales
• Guía de estilo de Design
• Especificaciones técnicas

Greg también incluyó este primer paso explícito en su indicación: Primer paso: crea el componente de superposición de la cuadrícula base con dimensiones ajustables y estados de desplazamiento del cursor para los marcadores de posición.

2. Limpia tus archivos de diseño antes de importarlos a Figma Make

Aunque Figma Make puede crear diseños desde cero (0→1), también destaca por transformar tus diseños existentes de Figma en prototipos interactivos (1→1). Para ayudar a Figma Make a generar el mejor resultado posible, dedica tiempo a organizar y mantener tus archivos en buen estado, asegurándote de ordenar cualquier marco que planees copiar y pegar en el campo de indicaciones. Cuanto más limpio esté tu diseño, mejores serán los resultados. Usar las restricciones de marco y la configuración de disposición automática es el parámetro más importante para asegurarte de que tus archivos de diseño se conviertan bien en Figma Make, pero nombrar las capas según su contenido o propósito también puede ayudar.

Puedes utilizar algunas de las funciones de IA existentes de Figma Design como Suggest Auto Layout (Sugerir disposición automática) y Rename layers with AI (Renombrar capas con IA), o incluso plugins como Clean Document para ordenar rápidamente tus marcos y prepararlos para importarlos a Figma Make.

Consejo adicional: incluso con la mejor configuración de capas, Figma Make a veces puede interpretar los archivos de diseño de forma un poco literal dentro de sus propias limitaciones. Si tu diseño se sale de los bordes de la vista previa, agrega una indicación como: Ajústalo al tamaño de mi pantalla y hazlo adaptable. O, si tienes unas dimensiones concretas en mente, prueba con una indicación como: Que se adapte al tamaño de un dispositivo móvil.

En la práctica

Holly Li, gerente de producto de Figma, logró crear la microinteracción del reproductor de música que ves a continuación con una sola indicación, todo gracias a que primero la configuró con una estructura sólida de disposición automática en Figma Design.

Esta fue su indicación: Haz que este reproductor de CD sea interactivo; el CD debe girar cuando reproduzca una pista. ¡Gracias!

3. Divide los proyectos complejos en pasos manejables

Incluso con una primera indicación bien definida, los proyectos complejos pueden requerir muchas indicaciones adicionales. Dividir estas indicaciones adicionales en pasos más pequeños y específicos da mejores resultados que intentar resolverlo todo de una sola vez. "Cuanto más reducido sea el alcance, más detallado podrá ser el LLM", dice la diseñadora de productos Tammy Taabassum. "El rendimiento de Figma Make depende del tamaño o la complejidad de tu solicitud, y de la especificidad de tu lenguaje".

Tu primera indicación, larga y detallada, te ayudará a establecer una base sólida sobre la que trabajar, y a partir de ahí te conviene ir realizando pequeños cambios poco a poco. Adoptar este enfoque incremental tras tu indicación inicial te permite crear interfaces complejas de forma gradual, crear flujos de varias páginas marco por marco y mantener el control de la dirección general del diseño.

Consejo adicional: lleva este enfoque por partes un paso más allá indicándole explícitamente a Figma Make que cree carpetas de código independientes para cada elemento. Al hacerlo, mejorarás la organización del código, garantizarás la facilidad de mantenimiento a lo largo de varias indicaciones y aislarás posibles errores en tus proyectos más ambiciosos.

En la práctica

Para crear un panel financiero totalmente funcional con un flujo de incorporación, la probadora alfa Antonella Rodríguez acabó utilizando más de 150 indicaciones. Comenzó con una descripción general de las funciones principales que necesitaba, la disposición deseada y una referencia visual; luego, limpió el resultado de la primera versión y se centró en el contenido de cada página individual para completarlas una por una.

Algunas de las indicaciones adicionales que utilizó Antonella:

• Agrega post-its a la página del diario para incluir notas.
• Agrega una tabla con la categoría, el tipo de gasto, el importe en USD, el importe en pesos, las notas y la fecha en la página Finanzas.
• Agrega una casilla de verificación para indicar qué moneda estás utilizando, USD o ARS.

Para crear un mundo interactivo 3D para la conferencia magistral de Config London de este año, la diseñadora de productos Tammy Taabassum trabajó con varios elementos diferentes. Después de una indicación inicial para crear un explorador de Londres 3D con monumentos famosos, Tammy le pidió a Figma Make que dividiera cada monumento 3D (el Big Ben, el London Eye, el Tower Bridge y otros) en archivos codificados independientes. Esto facilitó y agilizó el proceso de perfeccionar componentes individuales sin afectar el entorno del archivo completo.

La indicación de Tammy:¿Puedes pasar el código del Big Ben a un archivo nuevo?

4. Aprovecha tus propios componentes para garantizar la consistencia visual

Cuando se trabaja en Figma Make, copiar y pegar un componente, o un marco con varios componentes, puede resultar muy útil. Los componentes de tu biblioteca, que ya cuentan con disposición automática y una nomenclatura consistente de las capas, suelen integrarse bien en tu Make.

También puedes pegar componentes en la casilla de indicaciones de Figma Make como punto de referencia visual para el diseño que se va a crear. Al tener una idea de cómo se ve parte de la interfaz, Figma Make puede adaptar su estilo y espaciado, siguiendo eficazmente las reglas de tu sistema de diseño sin necesidad de explicaciones o aclaraciones adicionales.

Consejo adicional: la función Point and edit (Señalar y editar) de Figma Make es una excelente manera de reemplazar los componentes genéricos de tu versión inicial por elementos de UI específicos de tus bibliotecas. Selecciona un elemento en la vista previa, pega tu propio componente dentro de la casilla de indicaciones e ingresa la siguiente indicación: Reemplaza este componente por este diseño.

En la práctica

El equipo de impulsores de diseñadores creó la app de productividad que ves a continuación utilizando componentes del Material 3 Design Kit más reciente. Para crear esta app, pegaron dos componentes del archivo del sistema de diseño en Figma Make y siguieron esta indicación:

Crea una app de productividad que ayude a los usuarios a gestionar y priorizar tareas, mantenerse al día con su calendario y recopilar notas escritas y de voz. Usa el componente de navegación adjunto, adaptando su contenido según sea necesario. Para la pestaña del calendario, usa el componente de calendario adjunto. El resto de las páginas deben coincidir visualmente con el estilo de esos componentes.

El equipo luego mejoró la versión básica v1 seleccionando componentes con la herramienta Point and edit (Señalar y editar), y luego le pidió a Figma Make que los reemplazara por variantes del sistema de diseño Material 3.

5. Realiza ajustes visuales con la herramienta Point and edit (Señalar y editar)

Con la herramienta Point and edit (Señalar y editar), también puedes realizar ajustes básicos y rápidos, como cambiar el color o la fuente, señalando un elemento, haciendo clic en él y editándolo mediante la barra de herramientas o las indicaciones adicionales. Esta manipulación directa te permite realizar cambios inmediatos en propiedades visuales como el color, el radio de las esquinas, el espaciado y la tipografía sin problemas.

Consejo adicional: cuando seleccionas la herramienta Point and edit (Señalar y editar), las opciones de edición disponibles dependen del tipo de elemento seleccionado: los elementos de texto te permiten ajustar las fuentes, los colores y el formato, mientras que los contenedores se centran en los colores de fondo y el espaciado. Las imágenes tienen su propio conjunto de opciones, incluida la posibilidad de cargar reemplazos.

En la práctica

En el ejemplo del reproductor de música que aparece a continuación, se utiliza la herramienta Point and edit (Señalar y editar) para ajustar rápidamente detalles como el tamaño de la fuente y el formato.

6. Accede a la pestaña de código para realizar ediciones rápidas: no se necesitan conocimientos de desarrollo

Cuando creas en Figma Make, es mejor realizar algunos pequeños cambios no visuales directamente en el código. El botón Go to source (Ir a la fuente) es un atajo que te ayuda a encontrar el código que hay detrás de un elemento, para que puedas echar un vistazo entre bastidores y ajustar sus valores. Figma Make etiqueta todo su código de una manera fácil de entender, lo que permite a quienes no tienen experiencia en programación identificar qué parte del código controla qué comportamientos en la app.Los valores actualizados en el código se reflejarán de inmediato en la vista previa, sin necesidad de actualizar la página, lo que te permitirá probar rápidamente y con facilidad diferentes comportamientos del producto.

Consejo adicional: si no puedes acceder a la configuración de una página mediante el botón Go to source (Ir a la fuente), prueba a explorar las capas semánticas dentro de una carpeta de código utilizando el atajo de teclado Cmd+F (Mac) o Ctrl+F (PC).

En la práctica

Este método es ideal para iterar rápidamente sobre propiedades como la animación. Si quisiéramos probar cómo gira el vinilo en el archivo del reproductor de música de Holly, bastaría con ir al código fuente del elemento, escanear rápidamente la base de código para encontrar su parámetro de velocidad y ajustar la velocidad de forma manual desde el código hasta conseguir el efecto deseado en la vista previa.

7. Incorpora datos reales a tu Make

Para dar vida a un prototipo dinámico, Figma Make te permite crear interfaces con datos personalizados o en tiempo real, desde precios de acciones hasta pronósticos meteorológicos. Existen varias formas de incorporar datos a tus archivos de Figma Make sin necesidad de conectarte a las API:

• Indica a Figma Make el tipo de datos que esperas que se muestren.
• Indica de manera explícita a Figma Make que incluya un punto de entrada de importación de datos dentro de tu interfaz si deseas tener un control más detallado sobre tu conjunto de datos.

Consejo adicional: ten en cuenta que Figma Make puede conectarse a cualquier hardware al que tu navegador tenga acceso si es necesario. Esto abre la puerta al prototipado de interacciones que involucren diferentes tipos de entradas de teclado, de sonido o incluso de cámara, tal y como lo ilustra la mini app de fotomatón de la diseñadora de productos Daniela Muntyan.

En la práctica

Cuando el diseñador de productos Ryan Reid creó una app de seguimiento de horarios del metro de Nueva York utilizando la API de la MTA, Figma Make recopiló automáticamente datos de las líneas y estaciones de metro y generó de forma inteligente datos simulados que emulaban las llegadas de los trenes en tiempo real, sin necesidad de ninguna conexión a la API.

La indicación de Ryan: Crea un sitio web para consultar los horarios del metro de Nueva York, utilizando las API de la MTA de Nueva York. El sitio debe permitirte elegir una línea y una estación de metro para ver todos los horarios de los trenes, ordenados cronológicamente. El sitio debe ser de una sola página, donde al seleccionar una línea y una estación se muestre más información a la derecha, para que la navegación sea clara y sencilla.

Del mismo modo, el equipo de impulsores de Figma también generó un conjunto de datos ficticio de sesiones de carrera utilizando el GPT interno, lo descargó como un archivo .CSV y le pidió a Figma Make que agregara una función de carga dentro del entrenador de maratón. El resultado es un diseño de panel que se adapta de forma dinámica a cualquier base de datos .CSV cargada con el formato adecuado

Un ejemplo de la indicación:

Quiero crear un panel de analítica que muestre la evolución de mi entrenamiento para la maratón a lo largo del tiempo.

El panel debe incluir un resumen de mi último entrenamiento, con cifras clave y un gráfico lineal de mi evolución a lo largo del tiempo. Eje X: fecha de entrenamiento, eje Y: distancia recorrida en cada fecha de entrenamiento.

Antes de que aparezca cualquier analítica, la página debe estar vacía y mostrar un marcador de posición que te invite a cargar un archivo CSV. A continuación, tomarás ese archivo CSV, que estará formateado con la siguiente información, para convertirlo en el panel detallado anteriormente: fecha, distancia_km, tiempo_minutos, ritmo_promedio, frecuencia_cardíaca, calorías_quemadas, desnivel_positivo.

8. Convierte Figma Make en un asistente para la entrega de proyectos

Al indicarle a Make que cree interfaces que generen fragmentos de código listos para producción, puedes crear tu propia herramienta de entrega que genere opciones de diseño y cree código para compartir con los desarrolladores. Este enfoque te da más margen para jugar, experimentar e iterar antes de pasar a la siguiente fase.

Consejo adicional: si el código generado por Figma Make no se ajusta a tus necesidades de desarrollo, puedes indicarle que te proporcione elementos y comportamientos específicos como pseudocódigo genérico en el chat. Un ejemplo de indicación podría ser: Mantén el código exactamente como está, pero descríbeme cómo se implementa esta parte en pseudocódigo. Si es posible, detalla consideraciones específicas de la plataforma para (insertar el nombre de la plataforma).

En la práctica

El impulsor diseñadores, Luis Ouriach, utilizó Figma Make como su asistente de entrega cuando creó su propio generador de paletas OKLCH. Su app te permite generar un sistema completo de colores a partir de un color principal de la marca e incluye las variables CSS resultantes y el código generado de Tailwind CSS listo para entregar.

La indicación de Luis:Crea un generador de paletas de colores OKLCH en el que, al agregar el color principal de tu marca, se genere una gama completa de colores comunes: verde, azul, rojo, amarillo, naranja y grises. Puedes decidir cuántos colores quieres dentro de cada gama; por ejemplo, tres de cada uno en diferentes tonos.

Del mismo modo, el impulsor de desarrolladores, Jake Albaugh, creó su propia mini app para perfeccionar las animaciones aplicadas a un elemento concreto de la UI en este caso, una tarjeta bancaria de lujo. Jake le pidió a Figma Make que incluyera controles de efectos visuales y una salida en formato JSON de los parámetros de animación, con el fin de crear código reutilizable para otro producto que estaba desarrollando.

Una de las indicaciones de Jake: Haz que haya una salida de código JSON que describa todos los parámetros (incluida la inclinación mínima y máxima en cada eje) y que cambie cuando cambie la entrada.

Ten paciencia contigo mismo mientras exploras

Como ocurre con cualquier herramienta de IA, redactar indicaciones es una cuestión de prueba y error hasta que encuentres un enfoque que te funcione. Ahora que la versión beta de Figma Make está disponible para todos los usuarios de Figma con un puesto Full, nos entusiasma ver las formas creativas en las que usarás esta herramienta para dar vida a nuevas ideas.

Apenas estamos empezando a explorar todo lo que esta herramienta puede hacer, y nos entusiasma hacerlo contigo.

Ready to dive deeper? We followed up with seven tips for using Figma Make credits more efficiently.