Crear y editar un prototipo funcional o una app web – Figma Learn - Centro de ayuda

Antes de empezar

Quién puede usar esta función

Figma Make está disponible para los puestos Full en los 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, apps web, UI interactivas y más. Figma Make, que funciona con IA, hace que crear tus propios prototipos interactivos sea tan sencillo como compartir unos ejemplos o mantener una conversación corta. Puedes editar o mejorar tus prototipos funcionales y apps web al continuar 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 Explorar Figma Make.

Crear un prototipo funcional o una app web

Para crear un prototipo funcional, una app web o una UI interactiva con Figma Make:

Crea un archivo de Figma Make. En el explorador de archivos, navega hasta tus borradores. Luego, en la esquina superior derecha, haz clic en Make.
En el chat de IA, indícale al modelo lo que te gustaría diseñar. Puedes realizar una o varias de las siguientes acciones para guiar a la IA:
- Adjuntar diseños de Figma.
- Incorporar el contexto de estilo de una de tus bibliotecas de Figma Design. (Solo para planes de pago)
- Agregar un backend para almacenar y gestionar datos y secretos de forma segura.
- Pegar marcos de diseños e imágenes de Figma directamente en el chat.
- Ingresar tus ideas e instrucciones en el recuadro de indicaciones.
Haz clic en Enviar.

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

Cuando se complete el proceso, 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 la solución de problemas en Figma Make.

Editar un prototipo funcional o una app web

Para editar un prototipo funcional o una app web existente, sigue los mismos pasos que aparecen en Crear un prototipo funcional o una app web. Debes continuar la conversación existente para iterar y mejorar el resultado original. También puedes señalar partes específicas del resultado original que quieres que la IA modifique.

Usa los siguientes métodos para editar tu prototipo funcional o app web:

Usar la herramienta Señalar y editar para señalar partes específicas de tu prototipo funcional o app web en las que quieres que Figma Make se concentre.
Usar el historial de versiones para editar versiones anteriores de tu prototipo funcional o app web.
Adjuntar diseños de Figma.
Incorporar el contexto de estilo de una de tus bibliotecas de Figma Design. (Solo para planes de pago)
Agregar un backend para almacenar y gestionar datos y secretos de forma segura.
Pegar marcos de diseños e imágenes de Figma directamente en el chat.
Ingresar tus ideas e instrucciones en el recuadro de indicaciones.

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 la solución de problemas en Figma Make.

Herramienta Señalar y editar

La herramienta Señalar y editar te permite señalar elementos en tu prototipo funcional o app web. En función del tipo de elemento y la forma en que se generó, puedes modificar diferentes propiedades, como colores, padding, márgenes, estilo de texto y más. También puedes indicarle al modelo que realice cambios directamente en ese elemento.

Para usar la herramienta Señalar y editar:

En la parte inferior del recuadro de indicaciones, haz clic en Señalar y editar.
En la vista previa, haz clic en el elemento que quieres modificar.
Haz cambios con la barra de herramientas.
De manera opcional, haz clic en e indícale 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 descritas a continuación.

Editar imágenes

Cuando editas una imagen, puedes hacer lo siguiente:

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 padding)
Ir al código fuente

Editar texto

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

Cambiar 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 padding)
Ir al código fuente

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

Editar contenedores

Cuando editas un elemento del contenedor, como un div o una sección, puedes hacer lo siguiente:

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

Realizar una indicación para editar

Al seleccionar un elemento con la herramienta de edición, puedes realizar una indicación para que el modelo realice cambios directamente en ese elemento. Si un elemento no tiene ninguna propiedad editable, el recuadro de indicación aparece en la barra de herramientas de forma predeterminada. De lo contrario, haz clic en para mostrar el recuadro 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 app web. Puedes desplazarte por el chat de IA y restaurar versiones anteriores de tu prototipo funcional o app web. Usa el historial de versiones si quieres trabajar con versiones anteriores de tu prototipo funcional o app web, o si tienes problemas durante un paso de la conversación.

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

Al restaurar una versión, no pierdes el historial de la conversación ni las versiones que se crearon después de 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, app web o UI interactiva, puedes hacer lo siguiente:

Mejores prácticas

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

Mejores prácticas generales

A continuación, te mostramos varias mejores prácticas que son útiles para seguir cuando trabajas con el compositor de chat en Figma Make:

Sé claro y directo. Cuando das indicaciones en el chat de IA, es mejor ser específico sobre el tipo de resultado final que buscas. Cuando eres específico sobre lo que quieres, le das al modelo menos oportunidades para hacer suposiciones y reduces la probabilidad de que el modelo intente agregar proactivamente características que no pretendes.
✅ Indicación:

Crea una app para tomar notas. Quiero poder hacer lo siguiente:
1. Asignarle un nombre a un archivo.
2. Agregar y editar texto.
3. Darle formato al texto, como negrita, cursiva y tachado.
4. Agregar enlaces al texto.
5. Guardar el archivo en formato markdown.
⛔ Indicación:

Crea una app en la que pueda tomar notas.
Usa ejemplos. Cuando escribas en el chat de IA, debes proporcionar ejemplos de cuál quieres que sea el resultado final. Los ejemplos se pueden escribir, y los diseños de Figma también se pueden usar para brindar más orientación. Las imágenes se pueden usar para ayudar al modelo a acercarse a lo que deseas, pero existen algunas limitaciones. El modelo no es capaz de procesar colores exactos de una imagen, por ejemplo.

✅ Estos métodos pueden usarse de manera individual o juntos en una sola indicación.

Escritura

Agrega una pantalla de inicio de sesión. Incluye elementos comunes para las pantallas de inicio de sesión. Por ejemplo, deberías incluir un campo de nombre de usuario con la etiqueta “Correo electrónico” y un enlace para crear cuentas con la etiqueta “¿Necesitas una cuenta?. Regístrate aquí”.

Diseños

Emplea el diseño adjunto como ejemplo del carrito de compras.
No proporciones información confidencial. Si bien Figma Make es excelente para crear apps y UI interactivas, no debes proporcionar elementos como claves de API, direcciones de correo electrónico y postales, datos personales, números de identificación y datos confidenciales similares en el compositor de chat en sí. En cambio, si quieres una app que pueda hacer algo como realizar solicitudes API por ti, instruye al modelo sobre el tipo de funciones seguras o confidenciales que quieres crear. Figma Make te ayudará a agregar un backend para manejar datos.

✅ Indicación:

Quiero enviar solicitudes a una API privada. Agrega un recuadro 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 mejores prácticas que puedes seguir.

En los diseños, usa la disposición automática siempre que sea posible. Cuando adjuntas un diseño o componente, el sistema es capaz de comprender el flujo de contenido con la disposición automática.
Concéntrate primero en la disposición y luego en la funcionalidad. Indícale al sistema la disposición que quieres y luego usa las indicaciones posteriores para agregar funcionalidad a esa disposición.
Trabaja por pasos. En lugar de tratar de darle al sistema una descripción completa del resultado que deseas, comienza con una descripción de alto nivel de lo que quieres. Luego, mientras trabajas, continúa agregando detalles y funcionalidades más 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. Para prototipos funcionales complejos o apps web, es probable que la conversación requiera de varias interacciones para obtener un resultado que cumpla con todos los requisitos que buscas. No dudes en decirle al sistema dónde se equivocó la funcionalidad. Cuando lo hagas, da ejemplos de cuáles son los resultados que prefieres.
Los elementos de diseño y las disposiciones comunes producen los mejores resultados de una sola vez. Por ejemplo, las galerías simples y las apps web que usan un solo marco principal funcionan bien, entre enfoques de diseño similares. Las disposiciones más complejas o novedosas pueden requerir indicaciones adicionales.
Concéntrate en resultados optimizados para escritorio y pantalla completa. Estamos trabajando para mejorar la salida para dispositivos móviles, pero ahora mismo el contenido que se adapta a pantallas completas funciona mejor.

Archivos adjuntos individuales

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

Especifica si es una versión 1:1 exacta o un estilo de referencia. En tu indicación, indícale al sistema si quieres una versión exacta 1:1 de lo adjunto, o si prefieres usar lo adjunto como inspiración/referencia de estilo.
Agrega detalles para cada sección de la versión. Para la versión 1:1 más precisa, 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 que sea más detallada.

Múltiples archivos adjuntos

Cuando trabajas con múltiples archivos adjuntos, estas son algunas de las mejores prácticas que puedes seguir.

Diseña pantalla por pantalla. Puedes adjuntar varios diseños o imágenes, pero para obtener los mejores resultados 1:1, intenta diseñar adjuntando solo uno o dos diseños a la vez. Recuerda que el sistema recordará lo que adjuntaste, así que si no lo reconoció a la primera, recuérdale qué era e inténtalo de nuevo.
Referencias de estilo en varias pantallas. Puedes anexar varios diseños o imágenes para ayudar a crear el estilo que deseas, solo recuerda especificarle al sistema que deseas que las imágenes se empleen como inspiración, no que se regeneren 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.

Intenta con diseños más pequeños. Si tu diseño no es fiel, intenta con un archivo adjunto más pequeño para obtener un resultado más preciso.
Prueba con menos imágenes y diseños menos cargados de contenido. Si adjuntas diseños que tienen muchas imágenes, SVG, o ilustraciones vectoriales, a veces el sistema puede tener dificultades. Intenta reducir la fidelidad o el tamaño de las imágenes, o usa un archivo adjunto menos cargado de contenido.