8 consejos esenciales para utilizar Figma Make

En Config 2025, presentamos Figma Make, la nueva herramienta de creación de aplicaciones a partir de indicaciones. Los impulsores, diseñadores y gerentes de producto de Figma han experimentado con Figma Make. Con esta experiencia práctica, elaboramos ocho consejos prácticos y prácticas recomendadas.

1. Empieza tu primera indicación con detalles

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

Aquí hay algunos detalles 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 debería incorporar
• Comportamientos esperados: qué ocurre 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 introducir 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 conseguir efectos avanzados.

Consejo adicional: si tu indicación inicial no te da el resultado que buscas, prueba a expresarla de otra forma. Por ejemplo, en lugar de decir alinea verticalmente dos elementos, intenta reformular la indicación como mueve este elemento 20 píxeles hacia abajo o añade 16 píxeles de espacio entre estos botones.

En la práctica:

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

• Resumen del proyecto
• Especificación de la plataforma
• Propósito y caso práctico
• Lista de funciones principales
• Guía de estilo de diseño
• 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 subirlos a Figma Make

Aunque Figma Make puede crear diseños desde cero (0→1), también destaca por convertir 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 vayas a copiar y pegar en la indicación. Cuanto más limpio sea el diseño que introduzcas, mejor será el resultado. Usar las restricciones de marco adecuadas y la configuración de disposición automática es el parámetro más importante para garantizar que tus archivos de diseño se traduzcan 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 Sugerir disposición automática y 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 adaptar los archivos de diseño de forma un poco literal a sus propias limitaciones. Si tu diseño se sale de los bordes de la vista previa, añade una indicación como: Escala esto al tamaño de mi pantalla y haz que sea adaptativo. O, si tienes unas dimensiones concretas en mente, prueba con una indicación como: Mantén esto al tamaño de 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 es su indicación: Haz que este reproductor de CD sea interactivo; el CD debería girar cuando reproduzca una pista. ¡Gracias!

3. Desglosa los proyectos complejos en pasos manejables

Aunque la primera indicación sea buena, los proyectos complejos pueden necesitar muchas indicaciones posteriores. Desglosar estas indicaciones en pasos más pequeños y específicos da mejores resultados que intentar arreglarlo todo de golpe. “Cuanto más limitado 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 precisión de tu lenguaje“.

Tu primera indicación, extensa y detallada, te ayudará a sentar las bases sobre las que trabajar, y a partir de ahí te conviene ir introduciendo pequeños cambios poco a poco. Adoptar este enfoque gradual tras tu indicación inicial te permite crear interfaces complejas de forma progresiva, construir flujos de varias páginas paso a paso y mantener el control sobre 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. De esta forma, mejorarás la organización del código, garantizarás su facilidad de mantenimiento a lo largo de múltiples indicaciones y aislarás posibles errores en tus proyectos más ambiciosos.

En la práctica:

Para crear un panel financiero completamente funcional con un flujo de incorporación, la probadora alfa Antonella Rodriguez terminó usando más de 150 indicaciones. Ella comenzó con una descripción amplia de las características principales que necesitaba, la disposición deseada y un punto de referencia visual, luego limpió el resultado de la versión 1 e investigó a fondo el contenido de cada página individual para llenarlas una pieza a la vez.

Algunas de las indicaciones posteriores que utilizó Antonella:

• Añade notas adhesivas a la página del diario para incluir notas.
• Añade 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 de finanzas.
• Añade una casilla de verificación para indicar qué moneda estás utilizando, USD o ARS.

Para crear un mundo interactivo en 3D para la ponencia de Config London de este año, la diseñadora de productos Tammy Taabassum trabajó con varios elementos diferentes. Tras la indicación inicial de crear un explorador 3D de Londres 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 por separado. Esto hizo que fuera más fácil y rápido perfeccionar los componentes individuales sin afectar al 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 mantener la coherencia visual

Cuando trabajas 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 coherente de las capas, suelen integrarse bien en tu Make.

También puedes pegar componentes en el cuadro de indicaciones de Figma Make como referencia visual para el diseño que va a crear. Al tener una idea del aspecto de parte de la interfaz, Figma Make puede adaptar su estilo y espaciado, siguiendo así las reglas de tu sistema de diseño sin necesidad de explicaciones o aclaraciones adicionales.

Consejo adicional: la función de señalar y editar de Figma Make es una forma estupenda de sustituir los componentes genéricos de tu v1 por elementos de IU específicos de tus bibliotecas. Selecciona un elemento en la vista previa, pega tu propio componente dentro del cuadro de indicaciones y escribe la siguiente indicación: Sustituye este componente por este diseño..

En la práctica:

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

Crea una aplicación de productividad que ayude a los usuarios a gestionar y priorizar tareas, estar 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 de señalar y editar, y después le pidió a Figma Make que los sustituyera por variantes del sistema de diseño Material 3.

5. Realiza ajustes visuales con la herramienta de señalar y editar

Con la herramienta de señalar y editar, también puedes hacer ajustes rápidos y básicos —como cambiar un color o una fuente— señalando un elemento, haciendo clic en él y editándolo mediante la barra de herramientas o 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 de 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 subir reemplazos.

En la práctica:

En el ejemplo del reproductor de música que aparece a continuación, se utiliza la herramienta de 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

Al crear en Figma Make, es mejor editar algunos pequeños cambios no visuales directamente en el código. El botón 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 forma fácil de entender, por lo que incluso las personas sin experiencia en programación pueden identificar qué parte del código controla qué comportamientos dentro de la creación.Los valores actualizados en el código se reflejarán al instante en tu vista previa, sin necesidad de actualizar la página, con lo que podrás probar rápidamente múltiples comportamientos del producto.

Consejo adicional: no puedes acceder a la configuración de una página usando el botón Ir a la fuente, prueba a explorar las capas semánticas dentro de una carpeta de código usando el atajo 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 fichero del reproductor de música de Holly, podríamos simplemente ir al código fuente del elemento, escanear rápidamente la base del código en busca de su parámetro de velocidad y ajustar la velocidad manualmente desde el código hasta que se consiga el efecto adecuado en la vista previa.

7. Incorpora datos realistas 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 previsiones meteorológicas. Hay varias formas de incorporar datos a tus archivos de Figma Make sin necesidad de conectarte a las API:

• Pregunta a Figma Make por el tipo de datos que esperas que se muestren.
• Indica explícitamente a Figma Make que incluya un punto de entrada para la importación de datos dentro de tu interfaz si quieres un control más detallado sobre tu conjunto de datos.

Consejo adicional: ten en cuenta que Figma Make puede conectarse a cualquier hardware informático al que tu navegador tenga acceso si es necesario. Esto abre la puerta a la creación de prototipos de interacciones que impliquen diferentes tipos de entradas de teclado, entradas de sonido o incluso entradas de cámara, como ilustra la mini aplicación 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 herramienta para seguir los horarios del metro de Nueva York usando la API de la MTA, Figma Make recopiló automáticamente datos de las líneas y estaciones del 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: Créame un sitio web para consultar los horarios del metro de Nueva York, utilizando las API de la MTA de Nueva York. El sitio debería permitir seleccionar una línea y una estación de metro para ver todos los horarios de los trenes, ordenados cronológicamente. El sitio debería ser de una sola página, en la que 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 dio una indicación a Figma Make para que añadiera una función de carga dentro del entrenador de maratón. El resultado es un diseño de panel que se adapta dinámicamente a cualquier base de datos .CSV cargada con el formato adecuado

Una muestra de la indicación:

Quiero crear un panel de análisis que muestre la progresión de mi entrenamiento para la maratón según pasa el tiempo.

El panel debería incluir un resumen de mi último entrenamiento, con las cifras clave y un gráfico de líneas que muestre mi evolución con el tiempo. Eje X: fecha del entrenamiento, Eje Y: distancia recorrida en cada sesión de entrenamiento.

Antes de que aparezca cualquier análisis, la página debería estar vacía y mostrar un marcador de posición que te invite a subir un archivo CSV. A continuación, tomarás ese archivo CSV, que estará formateado con la siguiente información, para convertirlo en el panel descrito 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

Con una indicación a Make para 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 pedirle 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 pieza en pseudocódigo. Si es posible, detalla consideraciones específicas de la plataforma para (insertar nombre de la plataforma).

En la práctica:

El impulsor de diseño, Luis Ouriach, utilizó Figma Make como su asistente de entrega cuando creó su propio creador de paletas OKLCH. Su aplicación te permite generar un sistema completo de colores a partir de un color principal de la marca e incluye las variables CSS resultantes y los resultados de Tailwind CSS listos para entregar.

La indicación de Luis:Crea uncreador de paletas de colores OKLCH en el que, al añadir 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 tonalidades.

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

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 con cualquier herramienta de IA, escribir las indicaciones es cuestión de ir probando 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, estamos deseando ver las formas creativas en las que usarás esta herramienta para dar vida a nuevas ideas.

Apenas estamos empezando a descubrir todo lo que esta herramienta puede ofrecer, y estamos encantados de hacerlo contigo.