Como construir um app funcional com Figma Make: o processo que ninguém mostra
Builder Session da Tera mostra como criar um app funcional com Figma Make sem código. Aprenda com Juno Jo a usar moodboard, prompts em JSON, guidelines e integração com Supabase e APIs para construir produtos reais com IA.
11 minutos de leitura
A Tera roda Builder Sessions toda semana: experts constroem algo ao vivo, do zero, em pouco mais de uma hora. Sem roteiro ensaiado, sem slides. Só a tela compartilhada e o processo real.
Numa dessas sessions, Juno Jo construiu um app de Wi-Fi finder para Belo Horizonte. Fonte customizada, ícones open source, backend no Supabase, mapa integrado via Open Street Map. Funcional. Publicável. Zero linhas de código.
Juno é designer de produto brasileiro-coreano baseado em Atlanta, com 20 anos de experiência em SaaS, games e educação. Fundou a DOJO+, plataforma para escolas de artes marciais. Foi Lead UX/UI Teacher na Ironhack por 5 anos, é mentor na Techstars e na eMerge Americas, e lidera a comunidade Friends of Figma Atlanta. Antes da DOJO+, foi Senior Product Designer na OnChain Studios.
Este post é o resumo dessa Builder Session. O processo completo que separou o resultado do Juno da frustração que a maioria relata com o Figma Make: “eu peço para ele fazer as coisas e as coisas não funcionam da forma que eu quero.”
A diferença está na sequência: moodboard antes do prompt, JSON em vez de texto corrido, guidelines.md como índice de regras, e tarefas quebradas em prompts pequenos.
O moodboard vem antes do Figma Make
Juno não abriu o Figma Make primeiro. Abriu o Behance.
Antes de qualquer prompt, ele coletou referências visuais: apps de Wi-Fi existentes, paletas de cor, estilos tipográficos, padrões de interface. Pesquisou também a fonte UI, criada pela Nipe Foundary. Dois designers brasileiros que moram fora do país e construíram uma tipografia com correções técnicas sobre fontes populares como Inter e Open Sans. A fonte é gratuita e open source.
Junto com a fonte, Juno escolheu a biblioteca de ícones Grid Icons, também open source e acessível via repositório no GitHub.
“Pensa que o Figma Make tá na web. Uma vez que você faz isso, ele consegue acessar serviços externos, APIs ou repositórios no GitHub.” — Juno Jo, Builder Session (9:19)
O moodboard dá direção estética ao Figma Make antes que ele tente adivinhar sozinho. As referências viram material concreto para a IA construir algo com identidade, em vez de cuspir um layout genérico.
Moodboard no Figma: referências visuais de Minas Gerais que guiaram o design do app.
Gere o prompt em JSON com ChatGPT
Com o moodboard montado, Juno jogou as imagens de referência no ChatGPT e pediu:
ChatGPT com as imagens do moodboard anexadas — o ponto de partida do prompt.
Juno pediu o resultado em formato JSON. Esse detalhe importa.
“Eu normalmente quando peço para criar um prompt, peço para que seja em formato JSON. A utilidade é porque você consegue ter um pouco mais de clareza no prompt que está enviando para a IA.” — Juno Jo, Builder Session (17:06)
Por que JSON e não texto corrido
Com JSON, cada parâmetro fica isolado. Você vê exatamente o que pediu: a fonte está correta? O ícone referenciado é o certo? O objetivo do app está claro? Ajustar um campo específico é trivial. No texto corrido, qualquer mudança exige reler tudo.
Profissionais de IA generativa para vídeo e imagem já usam essa técnica para controlar luz, ângulo de câmera e animação. Juno adaptou o mesmo padrão para Figma Make. O ChatGPT gera o JSON estruturado; você revisa e cola direto no Figma Make.
O ChatGPT devolveu o prompt em JSON — tipografia, iconografia, tom de voz e direção visual, tudo estruturado.
Cole o prompt no Figma Make e escolha o modelo
Com o JSON pronto, Juno criou um novo arquivo no Figma Make e colou o prompt. Na escolha de modelo de IA, as opções incluem Sonnet (padrão) e Gemini.
“Vamos jogar no Gemini agora, porque dizem que ele é mais criativo. Vamos ver se isso realmente funciona.” — Juno Jo, Builder Session (19:34)
O prompt JSON colado direto no Figma Make. A partir daqui, a IA gera o app.
O Figma Make funciona como um wrapper. Não tem IA proprietária. Ele conecta modelos externos (Claude Sonnet, Gemini) e os aplica ao contexto do seu projeto. Quando o Figma lançou a funcionalidade com IA, só oferecia Sonnet. Hoje tem múltiplas opções, cada uma com características diferentes de criatividade e precisão.
O que o Figma Make gera automaticamente
A partir de um único prompt JSON, o Figma Make criou páginas com estrutura de navegação, componentes de UI com tipografia e paleta aplicadas, a fonte customizada puxada automaticamente via cdnfontes.com (sem que Juno pedisse) e um design system básico com variáveis de cor e tipografia.
O processamento levou alguns minutos. O resultado inicial não foi perfeito: faltaram os ícones Grid Icons porque não estavam no prompt original. Erro do usuário, não da ferramenta. Mas a estrutura base estava funcional.
Configure o guidelines.md como índice do projeto
Dentro do Figma Make, existe um arquivo chamado guidelines.md. Toda vez que o Figma processa um novo prompt, ele lê esse arquivo primeiro. É o índice de regras do projeto, o que a IA deve respeitar em cada interação.
“O guidelines.md é como se fosse o índice. Toda vez que o Figma processar, ele vai primeiro neste arquivo.” — Juno Jo, Builder Session (53:55)
Quem configura esse arquivo com cuidado consegue manter consistência entre prompts. Quem ignora, recomeça do zero a cada iteração.
Quebre em sub-arquivos
Juno recomenda não manter tudo em um único arquivo. Quebre por área:
voz-e-tom.md — linguagem, estilo de escrita, personalidade da marca
componentes.md — regras de componentes, variantes, autolayout
acessibilidade.md — contraste, tamanhos mínimos, navegação
seo.md — meta tags, performance, regras de indexação
Para criar um sub-arquivo, basta pedir ao Figma Make via prompt:
“Crie um arquivo voz-e-tom.md dentro da pasta de guidelines para documentar o tom e voz do projeto. Coloque como regra para utilizar nas telas futuras.”
Figma Make processando: conexão com Supabase, autocorreção de bugs, e guidelines sendo aplicadas.
Na session, Juno criou um arquivo de tom de voz “mineirês” para o app, com saudações (uai, eita, trembão), verbos (tô, achamos, num) e expressões regionais. O Figma Make gerou a documentação e vinculou ao índice principal automaticamente.
“Quanto mais organizado seu arquivo de design, mais fácil fica pro Figma Make.” — Juno Jo, Builder Session (25:40)
Conecte a design systems existentes
Uma pergunta do público durante a session: “Dá para conectar um design system já existente?”
Sim. Se você tem um design system em React com componentes publicados, pode instalá-lo via npm dentro do Figma Make e trabalhar em conjunto. Outra opção é usar o MCP Server do Figma para conectar ferramentas externas como Cursor ou VS Code ao seu arquivo de design.
Conecte o backend com Supabase
Nas configurações do projeto, Juno conectou o Supabase, uma plataforma de backend que oferece 2 projetos gratuitos. O Supabase gerencia banco de dados e autenticação de usuários. Para o app de Wi-Fi, isso significa salvar locais favoritados, criar perfis de usuário e persistir dados entre sessões.
A conexão é direta: o Figma Make oferece integração nativa com Supabase. Basta criar o projeto no Supabase e conectar nas configurações do Figma Make.
Um alerta que Juno fez questão de dar:
“Eu peço que vocês tomem muito cuidado com quantos aplicativos vocês vão usar na conta paga, porque para mim veio uma conta de $500.” — Juno Jo, Builder Session (36:45)
A conta gratuita funciona para protótipos e MVPs. Para produção, desative projetos que não está usando ativamente.
Integre APIs externas e debugue com screenshots
Mapas com Open Street Map
Para adicionar mapas reais ao app, Juno usou a API do Open Street Map, gratuita e conectável direto pelo Figma Make. O resultado: locais reais de Belo Horizonte apareceram no mapa, incluindo uma padaria e uma biblioteca que os participantes da session confirmaram como reais.
Para Google Maps, o free tier vai até $180 por mês, mas a configuração é mais técnica: exige API key, secrets e cuidados com exposição pública. Juno criou um dashboard em outro projeto que monitora o gasto com Google Maps e para de usar a API quando se aproxima do limite. Para testar, Open Street Map é a escolha mais prática.
Debug: mande screenshots, não descrições
Quando bugs aparecem (e vão aparecer), não descreva o problema em texto. Tire um screenshot e mande direto para o Figma Make.
“O Figma pode ler, mas ele não vê. Então eu mando o erro que eu tô vendo para ele.” — Juno Jo, Builder Session (1:01:16)
O Figma Make processa texto e código, mas não tem visão do que está renderizado na tela. A imagem do erro dá contexto visual que palavras não conseguem transmitir. Juno testou isso em vários projetos e confirmou: screenshots resolvem bugs mais rápido que descrições.
O que Juno construiu ao vivo
Ao final da session, o app WiFi estava funcional. Tela principal com busca por locais de Wi-Fi, categorias (cafezinho, restaurantes, bibliotecas), mapa integrado com Open Street Map mostrando locais reais de BH, perfil de usuário com edição, backend no Supabase salvando dados, tom de voz mineiro nos textos da interface, fonte customizada e ícones open source.
Não é um mockup. É um web app funcional, publicável direto do Figma Make para testar no browser.
O app funcionando: “Biblioteca Pública”, Praça da Liberdade, Wi-Fi “Carroça”, tags #silêncio #estudos #grátis.
Locais reais de BH com Open Street Map integrado: “Bar do Zé” (Internet arretada de boa), “Mercado Central”, botão “Procurar WiFi bão”.
Créditos e custos: o que esperar
O Figma Make opera em créditos. Cada prompt consome uma quantidade variável:
Média por prompt: ~35 créditos (range: 18-40)
Limite mensal: 3.000 créditos
Autocorreções: 0 créditos (quando o Figma corrige bugs que ele mesmo criou, não cobra)
Com 3.000 créditos e ~35 por prompt, você tem aproximadamente 85 prompts por mês. Quebre tarefas em prompts pequenos e específicos em vez de mandar instruções complexas: cada prompt erra menos e gasta menos créditos.
Ano passado, até 31 de dezembro, o Figma ofereceu créditos ilimitados. Juno criou “centenas de aplicativos” nesse período.
Perguntas do público
Prompt em inglês ou português?
Inglês para backend. Variáveis e código ficam em inglês, que é a melhor prática para developers. Textos de interface podem ser em português. Se o prompt inteiro é em PT, o Figma Make cria variáveis em português no código, o que gera atrito técnico depois.
Dá para replicar um projeto do Lovable no Figma Make?
Não diretamente. As estruturas internas não se conversam. Cada plataforma (Figma Make, Lovable, Base.for) tem arquitetura própria. Entenda o que cada uma faz melhor e use a que resolve o seu problema.
Dá para usar geolocalização?
Sim, mas funciona melhor após publicar o app no browser. Dentro do editor do Figma Make, a geolocalização trava por questões de segurança do navegador. Publique primeiro, teste depois.
O Notion AI conecta com Figma Make?
Sim. Você pode definir as regras do seu produto no Notion e conectar via integração nativa. Jira e Confluence da Atlassian também funcionam.
Assista, pratique, construa
Essa session mostrou o processo em uma hora. Assista ao replay completo para ver cada decisão do Juno em tempo real.
As Builder Sessions acontecem toda semana, sempre com um expert diferente construindo ao vivo. Cadastre-se para receber as próximas na sua caixa de entrada.
Se você quer ir além do Figma Make e dominar o processo inteiro de construção de produtos com IA, conheça a formação AI Product Builders da Tera.
AUTOR
Redação Tera
O time de Redação da Tera traduz conhecimento em conteúdos claros, práticos e profundos, conectando aprendizado real, mercado, tecnologia e carreira em cada publicação.
Você informado toda semana sobre Produto e IA
Assinar gratuitamente
