O que é o Figma Make?
O Figma Make é a ferramenta prompt-to-app do Figma alimentada por IA[1]. Você descreve uma ideia por texto, e/ou anexa uma tela ou imagem do Figma, e ele gera um protótipo funcional e interativo em minutos. Sem precisar de habilidades de design ou programação.
O Figma Make vive dentro do ecossistema do Figma e entrega código real que você pode publicar ou exportar.
Experimente o Prompt-to-Prototype Grátis >
Passo a Passo para Criar um App com o Figma Make
Para demonstrar como usar o Figma Make, vou criar do zero um app de tutor de programação para crianças inspirado na interface do Duolingo; e também usar outras funções de IA do Figma, como o Figma Agent, para acelerar como um Pro.
Nota: Este tutorial de Figma Make utiliza a versão Figma Pro[2]. Mas mesmo se estiver na versão limitada do plano Figma AI Freemium, os passos serão os mesmos.
Abra e configure o Figma Make
Assim que abrir o dashboard do Figma, você verá o banner do Figma Make no topo como uma barra interativa de inputs. Comece por lá ou acesse ‘www.figma.com/make’; eu prefiro a segunda opção.
Aqui, descreva sua ideia de app em inglês simples. Você também pode adicionar referências de UI como uma imagem, um arquivo Design MD, um PRD ou até o link de um frame de design do Figma. O mais interessante é poder escolher o modelo de IA que vai rodar no seu app: Gemini, GPT ou Claude. Vou escolher o modelo focado em design, o Gemini 3.1 PRO.
Como fazer Web Design com Gemini 3.1 PRO >
Escreva o prompt e/ou envie referências
No prompt, você pode descrever uma única tela ou um fluxo completo. Pode deixar a IA decidir o estilo ou fornecer referências textuais e visuais. Minha dica para um bom "vibe coding" é ser o mais detalhista possível.
Vou começar com um prompt para a tela de perguntas e respostas do meu app (que chamei de Coddly) e subir algumas telas do Duolingo como referência:
"Crie um app de tutor de programação para crianças chamado Coddly. Comece com uma tela de início/mapa de unidades mostrando uma jornada de aprendizado com níveis bloqueados e desbloqueados. Depois, uma tela de lição com 2 tipos de perguntas: (1) selecione a imagem correta (entre 4 opcionais) para a descrição de uma linguagem de programação, (2) escreva uma linha curta de código tocando em blocos de palavras. Termine com uma tela de parabéns mostrando o XP ganho.
Use uma UI divertida e gamificada inspirada no Duolingo anexo. Mas use uma paleta de roxo e amarelo, cards arredondados, um mascote, barra de progresso no topo e navegação por abas na parte inferior."
Enquanto o prompt é processado, você consegue ver o raciocínio dele em tempo real. Funciona em segundo plano desde que a aba continue aberta, e te avisa quando terminar. Nem precisei detalhar muito como preencher a tela de Q&A; ele se saiu muito bem com o contexto fornecido.
Para processar meu prompt, levou cerca de 4 minutos e consumiu 54 créditos de IA. O resultado é um app interativo de 4 telas com fluxo funcional e o estilo idêntico ao que imaginei.
Edição manual e com IA em uma tela
Agora, quero um mascote bem desenhado, que a 'Unidade 1' se chame 'Coddly' e que ambos apareçam no cabeçalho de todas as telas. É aqui que a edição bidirecional do Figma Make brilha:
i) Clique e edição manual
Escolho a opção Manual Edit abaixo da barra de chat. Basta clicar no elemento (de texto) que eu quero editar e digitar.
Edições manuais no Figma Make não custam créditos. E são perfeitas para ajustes rápidos em uma tela.
ii) Editar pedindo para a IA
Para alterações complexas ou que afetam várias telas, o caminho mais rápido é pedir diretamente no chatbot:
“Substitua o logo atual na tela de abertura e na tela final pela imagem do mascote anexada no prompt. Além disso, deixe os cabeçalhos de todas as telas idênticos ao da tela inicial.”
*Nota: Criei o mascote usando a ferramenta text-to-vector do Figma Weave.
E em 4 minutos e 90 créditos, meu mascote estava posicionado em todas as 4 telas exatamente como pedi.
Como gerar UIs exclusivas com o Lovable >
Adicione uma nova tela com um prompt
Com as telas atuais prontas, vamos adicionar uma nova, por exemplo, de 'Ofensiva e Desafios'. Basta pedir ao Figma App Maker em linguagem simples. Ele vai seguir a mesma lógica e estilo das telas existentes; desta vez, sem precisar referenciar o Duolingo.
“Adicione uma tela para 'Ofensiva e Desafios' alinhada ao design atual do app. Ela deve ser acessada através do ícone de alvo na barra de navegação.”
Ficou pronto em 2 minutos, custou 56 créditos e o resultado foi perfeito.
Dá para imaginar o tempo que o vibe coding no Figma Make economiza gerando wireframes, telas de UI e lincando tudo comparado ao processo manual.
Eu testei as melhores ferramentas de Vibe Coding de 2026 >
Teste as interações no modo preview
Antes de conectar banco de dados, APIs e fazer o deploy para finalizar o app, vale conferir a interatividade no preview do Figma Make. Para isso, clique no ícone de play no canto superior direito e uma janela com o preview abrirá.
No meu teste, fiquei bem satisfeito com as interações do app — o fluxo ficou correto, os botões funcionam bem, os estados de certo/errado nas perguntas estão certos e as microanimações são divertidas. O preview, claro, não consome créditos.
Você também pode compartilhar o link de visualização com qualquer pessoa ou hospedá-lo ao vivo pela opção ‘Publish’ no menu do Figma Make.
Veja o preview do meu app Coddy feito no Figma Make >
Exportando o app do Figma Make para código
Com o app de 5 telas do Coddly criado e testado, o próximo passo natural é entregá-lo para produção. O Figma Make oferece dois caminhos para isso.
O primeiro é simplesmente alternar para a aba de código e clicar no ícone de download; você baixa imediatamente o arquivo zip com o projeto estruturado em React + TypeScript, com Tailwind CSS, configuração do Vite e cada tela como seu próprio componente (Home.tsx, Lesson.tsx, Celebration.tsx, StreakAndChallenges.tsx). Além disso, elementos globais como BottomNav e Header são extraídos automaticamente. Imagens e rotas já vêm configuradas. É só abrir no VS Code e rodar.
O segundo caminho é usar a integração nativa com GitHub e Supabase do Figma Make, permitindo que você envie o código para um repositório e configure um backend real sem sair do navegador.
Há também o servidor Figma MCP, que permite que agentes de IA como Claude Code ou Cursor leiam o contexto do seu arquivo do Figma diretamente, tornando o handoff de prompt-to-code no Figma muito mais preciso.
Para puxar o contexto do produto durante o processo, os Connectors do Figma Make suportam Notion, Slack, Monday.com, Marvin e Sprig.
Comparativo de AIs de Figma-para-Código Grátis >
Minhas Dicas para Usar o Figma Make
O Figma Make é rápido e extremamente potente, assim como todo o conjunto de IA do Figma. No entanto, os créditos acabam rápido, interpretações erradas de prompts e resultados genéricos acontecem com frequência. Entendendo isso como parte de qualquer criador de apps com IA, reuni algumas dicas para você aproveitar ao máximo o Figma Make:
Seja ultra específico no primeiro prompt: O Make trabalha melhor no primeiro input. Descreva o número de telas, lógica de fluxo, estilo visual, paleta de cores e interações logo de início. Quanto mais contexto no prompt de partida, menos você gasta corrigindo depois.
E se você não tiver certeza e quiser fazer um brainstorm, use o modo 'Plan' em vez do modo 'Build' durante a configuração.
Use edições manuais para ajustes pequenos: Edições manuais não cobram créditos. Deixe os comandos por IA para mudanças estruturais (novas telas, mudanças de layout ou roteamento). Não gaste créditos para alterar um botão ou texto simples.
Peça uma coisa por vez para a IA: Colocar várias alterações em um só prompt pode causar execuções incompletas ou confusão no modelo. Uma instrução clara por vez mantém o Make focado e fácil de reverter.
Use a aba de código para correções rápidas: Pequenos problemas como um espaçamento incorreto ou cor errada são muito mais rápidos de corrigir direto no código do que reescrevendo prompts para a IA.
Crie o design por vibe antes do vibe coding: Os designs iniciais do Figma Make podem parecer genéricos. Para evitar isso com elegância, velocidade e economia, recomendo que antes do vibe coding, você faça o design por vibe usando o Banani AI.
Abaixo está como o Banani desenharia as mesmas telas do app, com exatamente os mesmos prompts.
Veja e edite o design do app Coddy criado pelo Banani >
Usando o Figma Make com outras IAs do Figma
O Figma Make é uma das principais peças do ecossistema de IA do Figma em 2026. Ele pode ser combinado com outras ferramentas para um fluxo de desenvolvimento ponta a ponta. Para criar seu app, comece com o Figma Weave para gerar as ilustrações, posicione-as usando o Figma Agent na tela de design. Quando gostar do resultado estético, importe as telas no Figma Make para gerar o código e conectar o backend. Por fim, o Figma Sites publica seu aplicativo como um site funcional em um clique.
A pilha de IA do Figma ainda está em beta e consome créditos rápido. Se você precisa de uma IA focada em design-to-code com integração profunda ao Figma, experimente o Banani AI.
Perguntas Frequentes sobre o Figma Make AI
Qual modelo de IA o Figma Make utiliza?
O Figma Make suporta múltiplos modelos: Claude Sonnet 4.6 & Opus, Gemini 3 Flash & 3.1 Pro e GPT-5.5. Você pode selecionar o seu favorito antes de gerar.
Qual linguagem de programação o Figma Make gera?
O Figma Make gera código estruturado em React e TypeScript, estilizado com Tailwind CSS. O projeto vem pronto em Vite, incluindo arquivos de componentes, rotas e estilos.
Como a IA do Figma gera código a partir de componentes de design?
O Figma Make combina o seu prompt às referências visuais enviadas e usa a IA selecionada para programar componentes que reproduzem exatamente o layout, fluxo e estilo propostos.
Qual a diferença entre Figma Make e Figma Sites?
O Figma Make cria web apps funcionais e interativos a partir de prompts de texto; ideal para protótipos de alta fidelidade com código real por trás. O Figma Sites, por outro lado, publica designs prontos do Figma diretamente como sites responsivos no ar.
Qual a melhor alternativa ao Figma Make para criação de apps?
Para programores em "vibe coding" full-stack, Lovable e Bolt.new são excelentes escolhas. No entanto, para focar primeiro em UI e prototipação rápida, o Banani AI é a melhor alternativa ao Figma Make.
Referências
[1] https://www.figma.com/make
[2] https://help.figma.com/hc/en-us/articles/31304412302231-Explore-Figma-Make
