Adjuntar diseños e imágenes a una indicación

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.

Cuando creas prototipos funcionales, apps web y UI interactivas con Figma Make, puedes adjuntar diseños e imágenes a tus indicaciones para ayudar a guiar a la IA a un resultado satisfactorio.

Puedes tener hasta tres archivos adjuntos por indicación, y esos archivos adjuntos pueden ser cualquier combinación de diseños e imágenes.

Adjuntar un diseño

Cuando adjuntas un diseño a una indicación en una conversación, el modelo de IA empleado en Figma Make puede interpretar el diseño y traducir las capas y el contenido en código funcional. El resultado intentará coincidir lo más posible con la forma del diseño, incluidos el texto y las imágenes, y respetar al mismo tiempo tus instrucciones y otros archivos adjuntos.

Hay dos maneras de adjuntar diseños de Figma a una indicación:

• En el recuadro de indicaciones, haz clic en +, luego en Importar desde Figma y busca el diseño, componente o archivo de la comunidad que quieras adjuntar.

• Copia y pega diseños de tus archivos de Figma Design en el recuadro de indicaciones.

Buscar un diseño

Cuando creas o editas una versión y haces clic en Importar desde Figma, aparece el modal Adjuntar diseño. En el modal Adjuntar diseño, puedes buscar componentes y marcos en proyectos de tus equipos y de tu organización.

Para encontrar diseños y contenido de la comunidad, escribe en el recuadro de búsqueda.

El recuadro de búsqueda en el modal Adjuntar diseño también admite la búsqueda visual. Para usar la búsqueda visual, haz clic en Búsqueda visual en el recuadro de búsqueda y selecciona una imagen para usar como guía.

Haz clic en Ver más para explorar componentes u otros diseños que se ajusten a tus términos de búsqueda.

Cuando seleccionas un componente, puedes hacer clic en:

• Insertar para agregarlo directamente al recuadro de indicaciones.
• Ir al componente principal para abrir el archivo de diseño original en una nueva pestaña.

Cuando seleccionas un diseño en Otros diseños, puedes hacer clic en:

• Adjuntar diseño para agregarlo al recuadro de indicaciones.
• Abrir archivo para abrir el archivo de diseño original en una nueva pestaña.
• Vista previa para ver una vista previa ampliada del diseño.

Si estás en una organización, las bibliotecas que se aprobaron como recursos y que se habilitaron por defecto aparecerán en la búsqueda.

También puedes hacer clic en Comunidad para buscar diseños de la comunidad de Figma que coincidan con tus términos de búsqueda.

Similar a Otros diseños en tu organización, cuando selecciones un diseño de la comunidad, puedes hacer clic en:

• Adjuntar diseño para agregarlo al recuadro de indicaciones.
• Abrir en la comunidad para abrir la lista de la comunidad en una nueva pestaña.
• Vista previa para ver una vista previa ampliada del diseño.

Adjuntar una imagen

Para ayudar a guiar al modelo cuando está generando un prototipo funcional o una app web, puedes proporcionar imágenes. El modelo no puede replicar tus imágenes exactamente; considéralas como una sugerencia para la dirección que toma el modelo. El modelo hace todo lo posible para replicar el texto, los colores y la posición de los elementos en la imagen, pero los resultados aún pueden diferir de lo que se representa en la imagen.

Hay dos maneras de adjuntar imágenes a una indicación.

• En el recuadro de indicaciones, haz clic en +, luego  Subir imagen y selecciona la imagen desde el explorador de archivos de tu sistema.

• Copia y pega la imagen en el recuadro de indicaciones.

Mejores prácticas para 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.

Mejores prácticas generales

• 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 con 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.