Crear y editar un prototipo funcional o una aplicación web

Antes de empezar

Quién puede utilizar esta función

Figma Make está disponible para puestos Full en planes de pago.

Puedes probar Figma Make en otros puestos y planes.

Con Figma Make, puedes usar la interfaz de chat para crear prototipos funcionales, aplicaciones web, interfaces de usuario interactivas y más. Figma Make se basa en la IA, lo que hace que crear tus propios prototipos interactivos sea tan sencillo como compartir algunos ejemplos o mantener una breve conversación. Puedes editar o mejorar tus prototipos funcionales y aplicaciones web continuando la conversación, así como editar la vista previa y el código directamente.

Consejo: para obtener más información sobre Figma Make y cómo puedes usarlo, consulta Explora Figma Make.

Crear un prototipo funcional o una aplicación web

mceclip0.png

Para crear un prototipo funcional, una aplicación web o una IU interactiva con Figma Make:

  1. Crea un archivo Figma Make. En el explorador de archivos, ve a tus borradores. A continuación, en la esquina superior derecha, haz clic en Make.

  2. En el chat de IA, dile al modelo lo que te gustaría construir. Puedes realizar una o varias de las siguientes acciones para guiar a la IA:
  3. Haz clic en Enviar.

Después de enviar tu indicación, Figma Make comienza a generar el código para tu prototipo funcional o aplicación web. Dependiendo de la complejidad del resultado final, Figma Make puede tardar unos minutos en terminar de generar el código.

Cuando el proceso se complete, Figma Make responderá con un resumen de los cambios y aparecerá una vista previa interactiva.

Si encuentras algún problema al intentar obtener el resultado inicial, consulta nuestras recomendaciones para resolución de problemas en Figma Make.

Editar un prototipo funcional o una aplicación web

Para editar un prototipo funcional o una aplicación web existente, sigue los mismos pasos en Crear un prototipo funcional o una aplicación web. Continúa con la conversación existente para iterar y mejorar el resultado original. También puedes señalar partes específicas del resultado original que quieras que la IA modifique.

Usa los siguientes métodos para editar tu prototipo funcional o aplicación web:

La vista previa se actualiza cada vez que envías otra indicación y la IA realiza cambios.

Si encuentras algún problema durante la actualización, consulta nuestras recomendaciones para resolución de problemas en Figma Make.

Herramienta Señalar y editar

La herramienta Señalar y editar te permite apuntar a elementos en tu prototipo funcional o aplicación web. Según el tipo de elemento y la forma en que se haya generado, puedes modificar diferentes propiedades, como los colores, el espaciado, los márgenes, el estilo del texto y mucho más. También puedes indicar al modelo que realice cambios directamente en ese elemento.

Para utilizar la herramienta Señalar y editar:

  1. En la parte inferior del cuadro de indicación, haz clic en Señalar y editar.
  2. En la vista previa, haz clic en el elemento que quieres modificar.
  3. Haz cambios con la barra de herramientas.
  4. Opcionalmente, haz clic en e indica al modelo que realice cambios en el elemento seleccionado.

El conjunto exacto de propiedades que puedes editar depende del tipo de elemento que hayas seleccionado. Algunos elementos pueden tener una combinación de las propiedades que se describen a continuación.

Editar imágenes

Cuando editas una imagen, puedes:

  • Subir una nueva imagen para reemplazar la existente
  • Cambiar el radio del borde
  • Cambiar el espaciado alrededor de la imagen (los márgenes y el relleno)
  • Ir al código fuente

Editar texto

Al editar un elemento que contiene texto, como un párrafo o un encabezado, puedes:

  • Cambia entre fuentes de Google de código abierto
  • Cambiar el color del texto
  • Ajustar el tamaño del texto
  • Poner el texto en negrita
  • Poner el texto en cursiva
  • Subrayar el texto
  • Ajustar la alineación del texto
  • Cambiar el espaciado alrededor del texto (los márgenes y el relleno)
  • Ir al código fuente

Nota: las fuentes personalizadas no son compatibles con Figma Make.

Editar contenedores

Cuando editas un elemento contenedor, como un div o una sección, puedes:

  • Cambiar el color de fondo
  • Cambiar el radio del borde
  • Cambiar el espaciado del contenedor (los márgenes y el relleno)
  • Ir al código fuente

Indicación para editar

Al seleccionar un elemento con la herramienta de editar, puedes indicar al modelo que realice cambios directamente en ese elemento. Si un elemento no tiene ninguna propiedad editable, el cuadro de indicación aparece en la barra de herramientas de forma predeterminada. De lo contrario, haz clic para mostrar el cuadro de indicación.

Historial de versiones

Mientras conversas en el chat de IA, se crea un punto de control para cada versión de tu prototipo funcional o aplicación web. Puedes hojear el chat de IA y restaurar las versiones anteriores de tu prototipo funcional o aplicación web. Usa el historial de versiones si quieres trabajar con versiones anteriores de tu prototipo funcional o aplicación web, o si tienes problemas durante una etapa de la conversación.

Para restaurar una versión anterior, haz clic en Restaurar esta versión.

Cuando restauras una versión, no pierdes ningún paso de la conversación ni las versiones posteriores a la que restauraste. Puedes volver a esas versiones en cualquier momento.

¿Y ahora qué?

Cuando Figma Make termine de generar el código de tu prototipo funcional, aplicación web o interfaz de usuario interactiva, puedes:

Prácticas recomendadas

Estas son las mejores prácticas para trabajar con Figma Make, incluidas las prácticas generales y las mejores prácticas para trabajar con los archivos adjuntos y resolver problemas.

Mejores prácticas generales

Estas son algunas de las mejores prácticas que son útiles seguir al trabajar con el compositor de chats en Figma Make:

  • Ofrece claridad y ve al grano. Cuando haces indicaciones en el chat de IA, es mejor decir el tipo de resultado final que buscas de forma concreta. Cuando especificas lo que quieres, el modelo tiene menos oportunidades de hacer suposiciones y hace menos probable que el modelo intente añadir de forma proactiva funciones que no pretendes.

    ✅ Indicación:

    Crea una aplicación para tomar notas. Quiero poder:

    1. Asignar un nombre a un archivo.
    2. Añadir y editar texto.
    3. Dar formato al texto, como negrita, cursiva y tachado.
    4. Agregar enlaces al texto.
    5. Guardar el archivo en formato markdown.

    ⛔ Indicación:

    Crea una aplicación en la que pueda tomar notas.

  • Usa ejemplos. Cuando hagas indicaciones en el chat de IA, debes proporcionar ejemplos de cuál quieres que sea el resultado final. Se pueden escribir los ejemplos y también se pueden usar los diseños de Figma para ofrecer más orientación. Se pueden utilizar imágenes para ayudar al modelo a acercarse a lo que quieres, pero existen algunas limitaciones. El modelo no es capaz de procesar colores exactos de una imagen, por ejemplo.

    ✅ Estos métodos se pueden usar de forma individual o juntos en una sola indicación.

    Escrito

    Agrega una pantalla de inicio de sesión. Incluye elementos comunes para las pantallas de inicio de sesión. Por ejemplo, debes incluir un campo de nombre de usuario denominado «Correo electrónico» y un enlace para crear cuentas denominado «¿Necesitas una cuenta? Regístrate aquí.

    Diseños

    Usa el diseño adjunto como ejemplo del carrito de compras.

  • No facilites información confidencial. Si bien Figma Make es ideal para crear aplicaciones e interfaces de usuario interactivas (IU), no debes proporcionar elementos como claves de API, correos electrónicos, direcciones postales, datos personales, números de identificación y datos igualmente confidenciales en el propio compositor de chats. En cambio, si quieres una aplicación que pueda hacer algo como realizar solicitudes de API por ti, indica al modelo el tipo de funciones seguras o sensibles que quieres crear. Figma Make te ayudará a añadir un backend para gestionar datos.

    ✅ Indicación:

    Quiero enviar solicitudes a una API privada. Añade un cuadro de entrada donde pueda pegar la clave.

    ⛔ Indicación:

    Usa esta clave para las solicitudes de API: 11qYAYKxCrfVS_7TyWQHOg

Trabajar con archivos adjuntos

Cuando trabajes con imágenes y diseños para adjuntarlos a tu indicación, aquí tienes algunas prácticas recomendadas que puedes seguir.

  • En los diseños, usa la disposición automática siempre que sea posible. Cuando adjuntas un diseño o un componente, el sistema entiende bien el flujo del contenido mediante la disposición automática.
  • Concéntrate primero en la disposición y luego en la funcionalidad. Indica al sistema la disposición que quieres y, a continuación, usa las siguientes indicaciones para añadir funciones a esa disposición.
  • Trabaja por pasos. En lugar de intentar dar al sistema una descripción completa e integral del resultado que deseas, comienza con una descripción de alto nivel de lo que quieres. Luego, a medida que trabajes, continúa añadiendo más detalles y funciones granulares. Cuando adjuntes componentes e imágenes de diseños más complejos, adjunta marco por marco, en lugar de todos a la vez.
  • Itera sobre el resultado. En el caso de aplicaciones web o prototipos funcionales complejos, es probable que se necesiten algunos pasos en la conversación para obtener un resultado que cumpla con todos los requisitos que buscas. No dudes en indicarle al sistema dónde ha fallado la funcionalidad. Cuando lo hagas, da ejemplos de cuáles son los resultados preferidos.
  • Los elementos de diseño y disposiciones comunes producen los mejores resultados de una sola vez. Por ejemplo, las galerías simples y las aplicaciones web que utilizan un único marco principal funcionan bien entre enfoques de diseño similares. Es posible que disposiciones más complejas o novedosas requieran indicaciones adicionales.
  • Concéntrate en obtener resultados compatibles con ordenadores de escritorio y pantalla completa. Estamos trabajando para mejorar la producción móvil, pero ahora mismo el contenido que se adapta a pantallas completas es el que mejor funciona.

Archivos adjuntos individuales

Cuando trabajas con archivos adjuntos individuales, estas son algunas de las mejores prácticas que debes seguir.

  • Especifica la construcción o referencia exacta 1:1 como estilo. En tu indicación, dile al sistema si quieres una construcción exacta 1:1 del adjunto o si quieres utilizar el adjunto como inspiración/referencia de estilo
  • Añade detalles para cada sección de la construcción. Para la construcción más cercana 1:1, puedes especificar con más exactitud lo que deseas. Intenta hacer esto sección por sección en tu diseño. También puedes pedirle al modelo que te ayude a escribir una indicación más detallada.

Múltiples archivos adjuntos

Cuando trabajes con varios archivos adjuntos, aquí tienes algunas prácticas recomendadas que debes seguir.

  • Construye pantalla por pantalla. Puedes adjuntar varios diseños o imágenes, pero para obtener los mejores resultados 1:1, intenta construir adjuntando solo uno o dos diseños a la vez. Recuerda: el sistema recordará lo que has adjuntado, así que si no lo ha recibido la primera vez, recuérdale lo que has adjuntado e inténtalo de nuevo
  • Referencias de estilo en varias pantallas. Puedes adjuntar varios diseños o imágenes para ayudar a crear el estilo que deseas, solo recuerda especificar al sistema que deseas que las imágenes se utilicen como inspiración, no que se reconstruyan 1:1

Resolución de problemas

Cuando intentes solucionar o sortear los problemas que encuentres, estas son algunas de las mejores prácticas que puedes seguir.

  • Prueba diseños más pequeños. Si tu diseño no se recrea fielmente, prueba con un accesorio más pequeño para una construcción más precisa
  • Prueba con menos imágenes y diseños con menos contenido. Si adjuntas diseños que tienen muchas imágenes, svg o ilustraciones vectoriales, a veces el sistema puede tener problemas. Intenta reducir la fidelidad o el tamaño de las imágenes o usa un archivo adjunto con menos contenido.
¿Fue útil este artículo?

Your feedback helps us improve Figma’s Help Center. To get help from support, submit a request through our contact form.

Your feedback helps us improve Figma’s Help Center. To get help from support, submit a request through our contact form.

Thank you for helping us improve Figma’s Help Center!