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

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.

Cuando estás creando prototipos funcionales, aplicaciones web e interfaces de usuario interactivas utilizando Figma Make, puedes adjuntar diseños e imágenes a tus indicaciones para ayudar a guiar la IA hacia 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 utilizado en Figma Make puede interpretar el diseño y traducir las capas y el contenido en código funcional. El resultado intentará coincidir con la forma del diseño, incluidos el texto y las imágenes, lo más fielmente posible, pero respetando también tus instrucciones y otros archivos adjuntos.

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

• En el cuadro de indicación, haz clic en +, luego en Importar desde Figma y busca el diseño, componente o Archivo de la comunidad que quieres adjuntar.

• Copia y pega los diseños de tus archivos de diseño de Figma en el cuadro de indicación.

Buscar un diseño

Cuando creas o edites una marca y hagas clic en Importar desde Figma, aparece el modal Adjuntar diseño. En el modal Adjuntar diseño, puedes realizar una búsqueda de componentes y marcos en proyectos de tus equipos y organización.

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

El cuadro 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 cuadro de búsqueda y selecciona una imagen para usar como guía.

Haz clic en Ver más para buscar 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 cuadro de indicación
• 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 cuadro de indicación
• 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 aprobadas como recursos y habilitadas por defecto aparecerán en la búsqueda.

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

Al igual que en Otros diseños de tu organización, al seleccionar un diseño de la Comunidad, puedes hacer clic en:

• Adjuntar diseño para agregarlo al cuadro de indicación
• 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 el modelo cuando genera un prototipo funcional o una aplicación web, puedes proporcionar imágenes. El modelo no puede replicar tus imágenes exactamente, piensa en ellas 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 formas de adjuntar imágenes a una indicación.

• En el cuadro de indicación, haz clic en +, luego  Cargar imagen y selecciona la imagen en el explorador de archivos de tu sistema.

• Copia y pega la imagen en el cuadro de indicación.

Prácticas recomendadas para 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.

Prácticas recomendadas generales

• 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í hay algunas prácticas recomendadas a 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 con 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.