Criar e editar um protótipo funcional ou aplicativo web

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.

Com o Figma Make, você pode usar a interface de bate-papo para criar protótipos funcionais, aplicativos web, interfaces de usuário interativas e muito mais. O Figma Make é orientado por IA, o que torna a criação de seus próprios protótipos interativos tão simples quanto compartilhar alguns exemplos ou ter uma breve conversa. Você pode editar ou melhorar seus protótipos funcionais e aplicativos web continuando a conversa, bem como editar a visualização e o código diretamente.

Dica: para saber mais sobre o Figma Make e como você pode usá-lo, confira Explore o Figma Make.

Criar um protótipo funcional ou aplicativo web

mceclip0.png

Para criar um protótipo funcional, aplicativo web ou UI interativa com o Figma Make:

  1. Crie um arquivo Figma Make. No navegador de arquivos, acesse seus rascunhos. Depois, no canto superior direito, clique em Make.

  2. No chat de IA, diga ao modelo o que você gostaria de construir. Você pode realizar uma ou mais das seguintes ações para orientar a IA:
  3. Clique em Enviar.

Depois que você envia seu prompt, o Figma Make começa a gerar o código para o seu protótipo funcional ou aplicativo web. Dependendo da complexidade do resultado final, pode levar alguns minutos para que o Figma Make termine de gerar o código.

Quando o processo estiver concluído, o Figma Make responderá com um resumo das alterações, e uma visualização interativa aparecerá.

Se você encontrar algum problema ao tentar obter o resultado inicial, consulte nossas recomendações para solução de problemas no Figma Make.

Editar um protótipo funcional ou aplicativo web

Para editar um protótipo funcional ou aplicativo web existente, siga as mesmas etapas em Criar um protótipo funcional ou aplicativo web. Você pode continuar a conversa existente para iterar e melhorar o resultado original. Você também pode apontar partes específicas do resultado original para que a IA modifique.

Use os seguintes métodos para editar seu protótipo funcional ou aplicativo web:

A visualização é atualizada cada vez que você envia outro prompt e as alterações são feitas pela IA.

Se você encontrar algum problema durante a atualização, consulte nossas recomendações para solução de problemas no Figma Make.

Ferramenta Apontar e editar

A ferramenta Apontar e editar permite que você aponte para elementos no seu protótipo funcional ou aplicativo web. Dependendo do tipo de elemento e da forma como ele foi gerado, você pode modificar propriedades diferentes, como cores, espaçamento, margens, estilo de texto e muito mais. Você também pode pedir ao modelo para fazer mudanças diretamente nesse elemento.

Para usar a ferramenta Apontar e editar:

  1. Na parte inferior da caixa de prompt, clique em Apontar e editar.
  2. Na visualização, clique no elemento que você quer modificar.
  3. Faça alterações usando a barra de ferramentas.
  4. Se quiser, clique em e peça para o modelo fazer alterações no elemento selecionado.

O conjunto exato de propriedades que você pode editar depende do tipo de elemento que você selecionou. Alguns elementos podem ter uma mistura das propriedades descritas abaixo.

Editar imagens

Ao editar uma imagem, você pode:

  • Carregar uma nova imagem para substituir a existente
  • Alterar o raio da borda
  • Alterar o espaçamento ao redor da imagem (as margens e o preenchimento)
  • Acessar o código-fonte

Editar texto

Ao editar um elemento que contém texto, como um parágrafo ou título, você pode:

  • Alternar entre fontes de código aberto do Google
  • Alterar a cor do texto
  • Ajustar o tamanho do texto
  • Deixar o texto em negrito
  • Deixar o texto em itálico
  • Sublinhar o texto
  • Ajustar o alinhamento do texto
  • Alterar o espaçamento ao redor do texto (margens e preenchimento)
  • Acessar o código-fonte

Atenção: fontes personalizadas não são compatíveis com o Figma Make.

Editar contêineres

Ao editar um elemento de contêiner, como uma div ou uma seção, você pode:

  • Alterar a cor do plano de fundo
  • Alterar o raio da borda
  • Alterar o espaçamento do contêiner (as margens e o preenchimento)
  • Acessar o código-fonte

Prompt para editar

Quando você seleciona um elemento com a ferramenta de editar, pode solicitar ao modelo que faça alterações diretamente nesse elemento. Se um elemento não tiver nenhuma propriedade editável, a caixa de prompt aparecerá na barra de ferramentas por padrão. Caso contrário, clique em para exibir a caixa de prompt.

Histórico de versões

À medida que você conversa no chat de IA, um ponto de verificação para cada versão do seu protótipo funcional ou aplicativo web é criado. Você pode percorrer o chat da IA e restaurar versões anteriores do seu protótipo funcional ou aplicativo web. Use o histórico de versões se quiser trabalhar com versões anteriores do seu protótipo funcional ou aplicativo web, ou se tiver problemas durante uma etapa da conversa.

Para restaurar uma versão anterior, clique em Restaurar esta versão.

Ao restaurar uma versão, você não perde nenhuma etapa da conversa ou das versões que vieram depois da que você restaurou. Você pode voltar para essas versões a qualquer momento.

E depois?

Quando o Figma Make terminar de gerar o código do seu protótipo funcional, aplicativo web ou UI interativa, você poderá:

Práticas recomendadas

Confira algumas práticas recomendadas para trabalhar com o Figma Make, incluindo recomendações gerais, bem como as melhores práticas para trabalhar com anexos e resolver problemas.

Práticas recomendadas gerais

Estas práticas são recomendadas ao trabalhar com o compositor de chat no Figma Make:

  • Escreva de forma clara e direta. Quando você estiver digitando no chat da IA, é melhor explicar de forma específica o tipo de resultado final que você procura. Dessa forma, o modelo tem menos oportunidades de fazer suposições e tentar adicionar proativamente recursos que você não quer.

    ✅ Prompt:

    Crie um aplicativo para anotações. Quero que ele permita:

    1. Nomear um arquivo.
    2. Adicionar e editar texto.
    3. Formatar o texto, como negrito, itálico e tachado.
    4. Adicionar links ao texto.
    5. Salvar o arquivo em formato markdown.

    ⛔ Prompt:

    Crie um aplicativo no qual eu possa fazer anotações.

  • Use exemplos. Ao escrever um prompt no chat de IA, você deve fornecer exemplos de como gostaria que fosse o resultado final. Você pode descrever os exemplos ou usar designs do Figma para oferecer mais orientações. Também é possível usar imagens para ajudar o modelo a se aproximar do que você procura, mas existem algumas limitações. O modelo não é capaz de processar cores exatas de uma imagem, por exemplo.

    ✅ Esses métodos podem ser usados individualmente ou juntos em um único prompt.

    Texto

    Adicione uma tela de login. Inclua elementos comuns de telas de login. Por exemplo, você deve incluir um campo de nome de usuário com o rótulo “E-mail” e um link para criar contas com o rótulo “Precisa de uma conta?” Crie a sua aqui”.

    Designs

    Use o design em anexo como exemplo do carrinho de compras.

  • Não forneça informações confidenciais. Embora o Figma Make seja ótimo para criar aplicativos e UIs interativas, você não deve fornecer dados como chaves de API, endereços de e-mail e postais, dados pessoais, números de documentos e outras informações confidenciais no compositor de chat. Em vez disso, se quiser um aplicativo capaz de fazer solicitações de API para você, por exemplo, instrua o modelo sobre os tipos de recursos seguros ou confidenciais que você gostaria de criar. O Figma Make ajudará você a adicionar um backend para lidar com os dados.

    ✅ Prompt:

    Quero enviar solicitações para uma API privada. Adicione uma caixa de entrada onde eu possa colar a chave.

    ⛔ Prompt:

    Use esta chave para as solicitações de API: 11qYAYKxCrfVS_7TyWQHOg

Trabalhar com anexos

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

  • 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.
Esse artigo foi útil?

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!