Anexar designs e imagens a um prompt

Antes de começar

Quem pode usar esse recurso

O Figma Make está disponível para acessos Full em planos pagos.

Você pode experimentar o Figma Make em outros acessos e planos.

Ao criar protótipos funcionais, aplicativos web e UIs interativas usando o Figma Make, você pode anexar designs e imagens aos seus prompts para ajudar a guiar a IA rumo a um resultado satisfatório.

Você pode usar até três anexos por prompt, e esses anexos podem ser qualquer combinação de designs e imagens.

Anexar um design

Quando você anexa um design a um prompt em uma conversa, o modelo de IA usado no Figma Make é capaz de interpretar esse design e traduzir as camadas e o conteúdo em código funcional. O resultado tentará ficar o mais parecido possível com o design, incluindo texto e imagens, respeitando também as suas instruções e outros anexos.

Existem duas maneiras de anexar designs do Figma a um prompt:

• Na caixa de prompt, clique em +, depois Importar do Figma e busque o design, componente ou arquivo da Comunidade que você quer anexar.

• Copie e cole designs dos seus arquivos do Figma Design na caixa de prompt.

Buscar um design

Ao criar ou editar uma versão e clicar em Importar do Figma, o modal Anexar design será exibido. No modal Anexar design, você pode buscar componentes e quadros em projetos de suas equipes e organização.

Para encontrar designs e conteúdo da comunidade, escreva na caixa de busca.

A caixa de busca no modal Anexar design também oferece busca visual. Para usar a busca visual, clique em Busca visual na caixa de busca e selecione uma imagem para usar como orientação.

Clique em Ver mais para procurar componentes ou outros designs que correspondem aos seus termos de busca.

Ao selecionar um componente, você pode clicar em:

• Inserir para adicioná-lo diretamente à caixa de prompt
• Acessar componente principal para abrir o arquivo de design original em uma nova aba.

Ao selecionar um design em Outros designs, você pode clicar em:

• Anexar design para adicioná-lo à caixa de prompt
• Abrir arquivo para abrir o arquivo de design original em uma nova aba
• Visualizar para ver uma prévia ampliada do design

Se você estiver em uma organização, as bibliotecas que foram aprovadas como recursos e ativadas por padrão aparecerão na busca.

Você também pode clicar em Comunidade para procurar designs da Comunidade do Figma que correspondem aos seus termos de busca.

Semelhante a Outros designs na sua organização, quando você seleciona um design da Comunidade, pode clicar em:

• Anexar design para adicioná-lo à caixa de prompt
• Abrir na Comunidade para abrir a publicação da Comunidade em uma nova aba
• Visualizar para ver uma prévia ampliada do design

Anexar uma imagem

Para ajudar a orientar o modelo quando ele estiver gerando um protótipo funcional ou aplicativo web, você pode fornecer imagens. O modelo não pode replicar exatamente as suas imagens: pense nelas como uma sugestão para uma orientação que o modelo segue. O modelo faz o possível para replicar texto, cores e a posição dos elementos na imagem, mas os resultados ainda podem ser diferentes do que está representado na imagem.

Existem duas maneiras de anexar imagens a um prompt.

• Na caixa de prompt, clique em +, depois em  Carregar imagem e selecione a imagem no navegador de arquivos do sistema.

• Copie e cole a imagem na caixa de prompt.

Práticas recomendadas para trabalhar com anexos

Confira algumas práticas recomendadas ao anexar imagens e designs ao seu prompt.

Práticas recomendadas gerais

• Em designs, use o layout automático sempre que possível. Quando você anexa um design ou componente, o sistema consegue entender o fluxo de conteúdo usando o layout automático.
• Concentre-se primeiro no layout e depois na funcionalidade. Oriente o sistema para o layout desejado e, em seguida, use mais prompts para adicionar funcionalidades a esse layout.
• Trabalhe em etapas. Em vez de tentar fornecer ao sistema uma descrição completa, de ponta a ponta, do resultado que você deseja, comece com uma descrição mais geral. Em seguida, conforme você trabalha, continue adicionando mais detalhes e funcionalidades. Caso decida anexar componentes e imagens de designs mais complexos, anexe quadro por quadro, em vez de tudo de uma vez.
• Crie novas versões do resultado. No caso de protótipos funcionais ou aplicativos web complexos, provavelmente serão necessárias várias etapas na conversa para chegar a um resultado que satisfaça todos os requisitos que você está procurando. Não hesite em dizer ao sistema quando houver erros na funcionalidade, incluindo exemplos de como seriam os resultados de sua preferência.
• Elementos de design e layouts comuns proporcionam os melhores resultados de primeira. Por exemplo, galerias simples e aplicativos web que usam um único quadro principal funcionam bem, entre abordagens de design semelhantes. Layouts mais complexos ou novos podem exigir prompts adicionais.
• Concentre-se em resultados que funcionem para desktop e tela cheia. Estamos trabalhando para melhorar os resultados para dispositivos móveis, mas, por enquanto, o conteúdo que se ajusta a telas inteiras funciona melhor.

Anexos individuais

Confira algumas práticas recomendadas para trabalhar com anexos individuais.

• Especifique se é uma cópia exata ou uma referência de estilo. No prompt, diga ao sistema se você quer uma versão exata do arquivo anexado ou se prefere usar o arquivo anexado como inspiração/referência de estilo
• Adicione detalhes para cada seção da versão. Para a versão mais próxima, você pode especificar com mais exatidão o que pretende. Tente fazer isso seção por seção no seu design. Você também pode pedir para o modelo ajudar a escrever um prompt mais detalhado.

Vários anexos

Confira algumas práticas recomendadas para trabalhar com vários anexos.

• Monte tela por tela. Você pode anexar vários designs ou imagens, mas para ter os melhores resultados similares, tente criar anexando apenas um ou dois designs de cada vez. Lembre-se: o sistema se lembrará do que você anexou; portanto, se ele não entender na primeira vez, explique mais uma vez o resultado esperado e tente novamente
• Use referências de estilo em várias telas. Você pode anexar vários designs ou imagens para ajudar a criar o estilo que você procura, só não esqueça de dizer ao sistema que você quer que as imagens sejam usadas como inspiração, não que sejam uma cópia exata

Solução de problemas

Confira algumas práticas recomendadas para corrigir ou contornar os problemas encontrados.

• Experimente designs menores. Se o seu design não estiver sendo recriado fielmente, tente usar um anexo menor para aumentar a precisão
• Tente usar menos imagens e designs com menos conteúdo. Se você anexar designs com muitas imagens, svgs ou ilustrações vetoriais, às vezes o sistema pode apresentar dificuldades. Tente reduzir a fidelidade ou o tamanho das imagens, ou use um anexo com menos conteúdo.