8 dicas essenciais para usar o Figma Make

Na Config 2025, apresentamos o Figma Make, nossa nova funcionalidade que leva designers do conceito ao protótipo funcional em poucos prompts. Times de produto testaram exaustivamente seus recursos. Agora, reunimos 8 dicas e sugestões de prompts para ajudar você a maximizar o potencial da ferramenta.

1. Comece seu primeiro prompt com detalhes

Quanto mais detalhes você incluir sobre seu design no prompt inicial, menos trocas adicionais você precisará para obter o resultado que deseja. "É melhor obter a geração inicial o mais próxima possível da sua visão, precisando apenas de ajustes menores - corrigir a saída com vários prompts de acompanhamento leva muito mais tempo", diz a Embaixador de Designers Ana Boyer.

Aqui estão alguns detalhes importantes para incluir em seu prompt inicial:

• Tarefa: O que o Figma Make deve fazer
• Contexto: Onde este fluxo ou tela se encaixa
• Elementos-chave do design: Recursos importantes que o Figma Make deve incorporar
• Comportamentos esperados: Como esses elementos reagem à interação
• Restrições: Coisas como dispositivo, layout ou estilo visual

Esta estratégia frontal requer não apenas ter uma visão clara do fluxo e especificações do seu produto antes de iniciar o Figma Make, mas também compartilhar esse contexto com os prompts adequados. Você também pode utilizar assistentes de IA para refinar seus prompts—eles fornecerão orientações detalhadas e trechos de código prontos para serem colados diretamente em seu Make para efeitos avançados.

Dica extra: Se a sua instrução inicial não fornecer o resultado desejado, considere reformulá-la de outra forma. Por exemplo, em vez de solicitar alinhar verticalmente dois elementos, tente reformular a solicitação como mova este elemento 20 pixels para baixo ou adicione 16px de espaço entre estes botões.

Na prática

O Gerente Embaixador de Designers da Figma, Greg Huntoon, experimentou diferentes abordagens até chegar a um prompt que resultou em uma versão v1 funcional para seu kit de visualização de efeitos de mouse. Seu prompt mais bem-sucedido continha:

• Visão geral do projeto
• Especificação da Plataforma
• Propósito e caso de uso
• Lista de recursos principais
• Orientação de estilo de design
• Especificações técnicas

Greg também incluiu este primeiro passo explícito em sua solicitação: Primeiro passo: Construa o componente de sobreposição de grade base com dimensões ajustáveis e estados de texto de apoio ao passar o cursor.

2. Limpe seus arquivos de design antes de trazê-los para o Figma Make

Embora o Figma Make possa criar designs do zero (0→1), ele também é excelente em transformar seus designs Figma existentes em protótipos interativos (1→1). Para ajudar o Figma Make a gerar o melhor resultado possível, dedique tempo à organização e limpeza do arquivo, certificando-se de arrumar qualquer quadro que planeje copiar e colar na caixa de prompt. Quanto mais limpo for o seu design de entrada, melhor será o seu resultado. Usar as restrições de quadro corretas e as configurações de layout automático é o parâmetro mais importante para garantir que seus arquivos de design se traduzam bem no Figma Make, mas nomear camadas com base em seu conteúdo ou propósito também pode ajudar.

Você pode usar alguns dos recursos de IA existentes no Figma Design, como Sugestão de layout automático e Renomear camadas com IA, ou até plugins como Clean Document para rapidamente organizar seus quadros em preparação para levá-los para o Figma Make.

Dica extra: Mesmo com a melhor configuração de camadas, o Figma Make às vezes pode traduzir arquivos de design de forma um pouco literal em suas próprias restrições. Se o seu design ultrapassar as bordas da pré-visualização, siga com um prompt como: Escale isso para o tamanho da minha tela e torne-o responsivo. Ou, se você tiver dimensões específicas em mente, experimente um comando como: Mantenha isso no tamanho de celular.

Na prática

A gerente de produto do Figma, Holly Li, construiu com sucesso a micro-interação do player de música abaixo em uma única solicitação, tudo graças à configuração inicial com uma estrutura robusta de layout automático no Figma Design.

Aqui está a solicitação dela: Torne este CD player interativo, o CD deve girar quando eu tocar uma faixa. Obrigado!

3. Divida projetos complexos em etapas gerenciáveis

Mesmo com um primeiro prompt sólido, projetos complexos podem exigir muitos prompts de acompanhamento adicionais. Dividir essas tarefas de acompanhamento em passos menores e mais focados gera melhores resultados do que tentar resolver tudo de uma vez só. “Quanto menor o escopo, mais detalhado pode ser o LLM”, diz a designer de produto Tammy Taabassum. "O desempenho do Figma Make depende do tamanho ou da complexidade da sua solicitação, e da especificidade do seu idioma."

Seu primeiro prompt grande e detalhado ajudará a estabelecer uma base sobre a qual construir, e você vai querer fazer pequenas mudanças pouco a pouco a partir daí. Ao adotar esta abordagem incremental após o seu prompt inicial, você pode criar interfaces complexas gradualmente, construir fluxos de múltiplas páginas quadro a quadro e manter o controle sobre a direção geral do design.

Dica extra: Leve essa abordagem em pequenos pedaços adiante, incentivando explicitamente o Figma Make a criar pastas de código separadas para cada elemento. Ao fazer isso, você melhorará a organização do código, garantirá a manutenção em vários prompts e isolará possíveis erros em seus projetos mais ambiciosos.

Na prática

Para criar um painel financeiro totalmente funcional com um fluxo de integração, a testadora alfa Antonella Rodriguez acabou usando mais de 150 prompts. Ela começou com uma descrição ampla das características principais que precisava, o layout desejado e um ponto de referência visual, então revisou a versão 1 e mergulhou no conteúdo de cada página individual para preenchê-las uma peça de cada vez.

Alguns dos prompts de acompanhamento que Antonella usou:

• Adicione post-its na página do diário para adicionar anotações.
• Adicione uma tabela com categoria, tipo de gasto, valor em USD, valor em pesos, notas, data na página de Finanças.
• Adicione uma caixa de seleção para explicar qual tipo de moeda você está usando, USD ou ARS.

Para criar um mundo interativo em 3D para a apresentação do Config London deste ano, a designer de produto Tammy Taabassum trabalhou com vários elementos diferentes. Após um pedido inicial para criar um explorador 3D de Londres com marcos famosos, Tammy solicitou ao Figma Make que dividisse cada marco 3D – Big Ben, London Eye, Tower Bridge e outros – em arquivos codificados separados. Isso tornou mais fácil e rápido refinar componentes individuais sem afetar o ambiente inteiro do arquivo.

Prompt de Tammy:Você pode mover o código do Big Ben para um novo arquivo?

4. Aproveite seus próprios componentes para garantir a consistência visual

Ao trabalhar no Figma Make, copiar e colar um componente — ou um quadro com múltiplos componentes — pode ser muito poderoso. Componentes da sua biblioteca, já equipados com layout automático e nomenclatura de camadas consistente, geralmente se traduzem bem no seu Make.

Você também pode colar componentes na caixa de prompt do Figma Make como um ponto de referência visual para o design que ele criará. Ao ter uma noção de como parte da interface se parece, o Figma Make pode combinar seu estilo e espaçamento, efetivamente seguindo as regras do seu design system sem precisar de explicações ou esclarecimentos adicionais.

Dica extra: O recurso de apontar e editar do Figma Make é uma ótima maneira de trocar os componentes genéricos na sua v1 por UI específica das suas bibliotecas. Selecione um elemento na pré-visualização, cole seu próprio componente dentro da caixa de prompt e insira o seguinte prompt: Substitua este componente por este design.

Na prática

A equipe de embaixadores de design construiu o aplicativo de produtividade abaixo, usando componentes do mais novo Kit de Design Material 3. Para criar este app, eles colaram dois componentes do arquivo do design system no Figma Make seguido por este prompt:

Construa um app de produtividade que ajude o usuário a gerenciar e priorizar tarefas, manter-se atualizado com o calendário e coletar notas escritas e de voz. Use o componente de navegação anexado, com seu conteúdo adaptado conforme necessário. Para a aba do calendário, use o componente de calendário anexado. As páginas restantes devem combinar visualmente com o estilo desses componentes.

A equipe então melhorou o v1 básico selecionando componentes com apontar e editar, em seguida, pediu ao Figma Make para substituí-los por variantes do design system Material 3.

5. Faça ajustes visuais usando a ferramenta de apontar e editar

Com a ferramenta de apontar e editar, você também pode fazer ajustes rápidos e básicos—como uma mudança de cor ou fonte—simplesmente apontando para um elemento, clicando nele e editando-o usando a barra de ferramentas ou sugestões adicionais. Esta manipulação direta permite que você faça alterações imediatas nas propriedades visuais, como cor, raio de canto, espaçamento e tipografia, de forma contínua.

Dica extra: Quando você seleciona a ferramenta de apontar e editar, as opções de edição disponíveis dependem do tipo de elemento selecionado—elementos de texto permitem ajustar fontes, cores e formatação, enquanto contêineres focam nas cores de plano de fundo e espaçamento. Imagens têm seu próprio conjunto de opções, incluindo a capacidade de enviar substituições.

Na prática

No exemplo de player de música abaixo, apontar e editar é usado para ajustar rapidamente detalhes como tamanho de fonte e formatação.

6. Acesse a aba de código para edições rápidas—não são necessárias habilidades de desenvolvimento

Ao construir no Figma Make, algumas pequenas mudanças não visuais são melhor editadas dentro do código. O botão ir para a fonte é um atalho que ajuda você a encontrar o código por trás de um elemento, permitindo que veja e ajuste seus valores nos bastidores. O Figma Make rotula todo o seu código de uma maneira fácil de entender, permitindo que pessoas sem experiência em programação identifiquem qual parte do código controla quais comportamentos dentro da construção.Os valores atualizados no código serão refletidos imediatamente na sua pré-visualização, sem necessidade de recarregar—facilitando testar rapidamente múltiplos comportamentos do produto.

Dica extra: Se uma configuração de nível de página não estiver acessível usando ir para a fonte, tente explorar as camadas semânticas dentro de uma pasta de código usando o atalho cmd+F (Mac) ou Ctrl+F (PC).

Na prática

Este método é ótimo para iterar rapidamente em propriedades como animação. Se quiséssemos testar a maneira como o vinil gira no arquivo do reprodutor de música da Holly, poderíamos simplesmente ir para o código-fonte do elemento, rapidamente escanear a base de código em busca do parâmetro de velocidade e ajustar manualmente a velocidade no código até alcançar a sensação certa no visualizador.

7. Integre dados realistas no seu Make

Para dar vida a um protótipo dinâmico, o Figma Make permite que você construa interfaces com dados personalizados ou em tempo real, desde preços de ações até previsões meteorológicas. Existem algumas maneiras diferentes de trazer dados para seus arquivos do Figma Make sem conectá-los a API:

• Peça ao Figma Make o tipo de dados que você espera ver exibido.
• Solicite explicitamente ao Figma Make para incluir um ponto de entrada de importar dados dentro da sua interface se você quiser mais controle granular sobre seu conjunto de dados.

Dica extra: Lembre-se de que o Figma Make pode se conectar a qualquer hardware do computador ao qual seu navegador tenha acesso, se necessário. Isso abre a porta para a prototipagem de interações envolvendo diferentes tipos de entradas de teclado, entradas de som ou até mesmo entradas de câmera, como ilustrado pelo mini app de cabine fotográfica da Designer de Produto Daniela Muntyan.

Na prática

Quando o Designer de Produto Ryan Reid criou um rastreador de tempo do metrô de Nova Iorque usando a API MTA, o Figma Make coletou automaticamente dados das linhas e estações do metrô e gerou inteligentemente dados simulados que emulavam a chegada de trens em tempo real—sem qualquer conexão com API.

Prompt de Ryan: Crie um site para acompanhar os horários do metrô em Nova York, usando as APIs do NYC MTA. O site deve permitir que você escolha uma linha de metrô e uma estação para visualizar todos os horários dos trens, ordenados cronologicamente. O site deve ser de página única, onde a seleção de uma linha e estação revela mais informações à direita, tornando a navegação limpa e simples.

De maneira semelhante, a equipe de advocacy da Figma também gerou um conjunto de dados falso de sessões de corrida usando o GPT interno, baixou-o como um arquivo .CSV e solicitou ao Figma Make que adicionasse uma mecânica de upload dentro do treinador de maratona. O resultado é um design de painel que se adapta dinamicamente a qualquer banco de dados .CSV carregado usando o formato correto

Um exemplo do prompt:

Eu quero construir um painel de análise que mostre a progressão do meu treinamento para maratona ao longo do tempo.

O painel deve ter um resumo do meu último treinamento, incluindo números-chave e um gráfico de linhas da minha progressão ao longo do tempo. Eixo X: data do treinamento, Eixo Y: distância corrida em cada data de treinamento.

Antes de quaisquer análises aparecerem, a página deve estar vazia com um texto de apoio que me convide a fazer upload de um arquivo .csv. Você então pegará esse arquivo CSV, que será formatado com as seguintes informações, para transformá-los no painel detalhado acima: data, distância_km, tempo_minutos, ritmo_médio, frequência_cardíaca, calorias_queimadas, ganho_de_elevação.

8. Transforme o Figma Make em um assistente de entrega

Ao instruir o Make para criar interfaces que geram trechos de código prontos para produção, você pode criar sua própria ferramenta de transferência que gera escolhas de design e cria saídas de código para compartilhar com os desenvolvedores. Essa abordagem dá a você mais espaço para brincar, experimentar e iterar antes de passar para a próxima fase.

Dica extra: Se o código gerado pelo Figma Make não atender às suas necessidades de desenvolvimento, você pode solicitar que ele forneça elementos e comportamentos específicos como pseudocódigo genérico no chat. Um exemplo de prompt pode ser assim: Mantenha o código exatamente como está, mas descreva como esta peça é implementada em pseudocódigo. Se possível, detalhe considerações específicas da plataforma para (insira o nome da plataforma).

Na prática

O Embaixador de Designers Luis Ouriach usou o Figma Make como seu assistente de transferência ao criar seu próprio Construtor de Paleta OKLCH. O app dele permite que você gere um sistema completo de cores a partir de uma cor primária da marca, e inclui as variáveis CSS resultantes e a saída do Tailwind CSS prontas para ser entregues.

Prompt de Luis:Crie um construtor de paleta de cores OKLCH onde você adiciona sua cor principal de marca e ele gera uma paleta completa sobre cores comuns: verde, azul, vermelho, amarelo, laranja e cinzas. Você pode decidir quantas cores deseja em cada paleta - por exemplo, 3 de cada em diferentes tonalidades.

Da mesma forma, o Embaixador de Desenvolvedores Jake Albaugh criou seu próprio mini app para refinar as animações aplicadas em um elemento específico da UI—neste caso, um cartão de banco de luxo. Jake pediu ao Figma Make para incluir controles de efeitos visuais e saída JSON dos parâmetros de animação, criando código reutilizável para outro produto que ele estava desenvolvendo.

Um dos prompts do Jake: Crie um código JSON que descreva todos os parâmetros (incluindo inclinação mínima e máxima em cada eixo) que mudam quando a entrada muda.

Seja paciente consigo mesmo enquanto explora

Como acontece com qualquer ferramenta de IA, a criação de prompts é uma questão de tentativa e erro até encontrar uma abordagem que funcione para você. Com a versão Beta do Figma Make agora disponível para todos os usuários do Figma com um acesso Full, estamos animados para ver as maneiras criativas que você usará esta ferramenta para dar vida a novas ideias.

Estamos apenas começando a explorar o que é possível fazer com esta ferramenta — e mal podemos esperar para fazer isso com você.

Ready to dive deeper? We followed up with seven tips for using Figma Make credits more efficiently.