Como criar um app de análise nutricional via foto usando IA e Figma Make
Transforme seu celular em uma máquina de análise nutricional instantânea: tire uma foto do rótulo de alimentos, extraia os macros via IA Gemini, e tenha insights para saúde ou performance – tudo isso desenhando a interface e integrando 100% dentro do Figma Make.
Por que isso é importante
Você já se perguntou se é possível ter um nutricionista no seu bolso? Esse app permite fotografar qualquer tabela nutricional e entender, via IA, o que realmente está consumindo. Faça escolhas melhores, ganhe tempo, evite erros e transforme cada refeição em informação acionável.
O desafio: entender rótulos em tempo real
Rótulos de alimento podem ser confusos ou pouco claros, ainda mais para quem monitora macros ou busca objetivos de saúde. Vamos construir uma solução mobile rápida: fotografe rótulos, extraia informações e receba análises inteligentes, com zero código backend – tudo no Figma Make.
Do zero à solução: como funciona
Você vai criar uma interface mobile simples no Figma Design, migrar para o Figma Make, integrar Gemini 2.5 Flash (IA do Google) para analisar a foto, e apresentar um relatório dos macros extraídos – destacando carboidratos, proteínas, gorduras e calorias.
Ferramentas essenciais para acelerar
Figma Design, Figma Make e Gemini 2.5 Flash
Use o Figma Design para desenhar a interface mobile, Figma Make para gerar o backend sem código, e Gemini 2.5 Flash para processar imagens e extrair textos. Tudo isso sem plugins ou infra complicada.
Começando: desenhando a UI mobile
Crie um frame com 360x600px, cor de fundo verde-claro (E9F2DE). Use o plugin Iconify para buscar e aplicar ícones: banana (marca d’água), código de barras, botão add e hambúrguer (menu). Estruture o topo com logo, título e barra de menu, e área para ação de foto.
⚠️Atenção
Use sempre layout automático nos grupos de elementos no Figma – sem isso, sua UI irá quebrar no Make.
Adicionando experiência de usuário real
O botão “Adicionar Comida” abre a câmera do aparelho, já pronto para capturar apenas o recorte nutricional do rótulo. O usuário não precisa baixar nada, nem criar conta.
De UI ao protótipo funcional no Figma Make
Exporte os frames do Figma Design para o Make, usando copy+paste. Selecione cada área lógico-funcional e ajuste constraints/posicionamento absoluto dos elementos artísticos (como o ícone de banana), garantindo fluidez no mobile.
ℹ️Info
Posicione marcas d’água e ícones de destaque com “absolute positioning”. Certifique-se que estão atrás do conteúdo principal para não atrapalhar interatividade e leitura.
Prompt de integração com IA: seja explícito
No Figma Make, adicione o seguinte prompt para o Gemini: “Tirar foto do rótulo nutricional. Extrair e retornar apenas carboidratos, gorduras, proteínas, calorias. Gerar texto com resumo curto, sugerindo se é uma boa opção para quem busca perda de peso e ganho muscular.”
Configurando chave de API Gemini 2.5 Flash
Crie gratuitamente no site do Aistudio Google, obtenha a chave de API e cole diretamente na box do Figma Make. Especifique no prompt que é obrigatório usar Gemini 2.5 Flash, não aceitando fallback para outros modelos.
⚠️Atenção
NUNCA exponha a sua chave de API real em ambientes públicos; gere e copie direto para o campo privado quando for testar.
Prototipando o fluxo: da foto ao insight
O usuário fotografa o rótulo, a IA processa a imagem e mostra os macronutrientes em destaque e uma frase-resumo personalizada. Opcional: animação nos textos (resultados aparecem um a um após o processamento).
Testando no mobile em minutos
Com o projeto publicado, basta gerar a URL do Make, abrir no smartphone e usar a câmera real para validar a extração e análise. Nada de instalação nem autenticação.
✅Sucesso
O protótipo permite experimentar e iterar rapidamente para ajustes visuais ou de fluxo, otimizando engajamento UX com base em feedback real.
Recebendo e usando o feedback da IA
A resposta da IA deve trazer: valores dos macros, total de calorias, e uma frase simples indicando se aquele alimento é recomendado – tudo apresentado com design limpo e legível, realçando o insight e não apenas dados crus.
Evite bancos de dados: prototipe sem complexidade
Deixe claro no prompt que não deseja base nem gestão de login – o objetivo é só testar e aprender rápido. Assim, o deploy é instantâneo e seguro.
⚠️Atenção
Se o Figma Make sugerir criar banco de dados, reforce no prompt que é apenas protótipo frontend; sem persistência.
Bônus: animações nos resultados
Incremente o projeto gerando animações para as métricas: cada macro apresentado com transição suave, elevando a experiência visual e tornando a análise mais envolvente.
ℹ️Dica
Proponha no prompt “animar os textos de resultado (macros e resumo) com delay leve e efeito de entrada pelo eixo Y”. Isso turbina a interação e percepção de valor do app.
Limitações e próximos passos
O app protótipo não valida todos os tipos de etiquetas ou fontes, pode depender da qualidade da foto e do modelo Gemini 2.5 em reconhecer campos padronizados. Para produção, pense em suporte a várias línguas, exportação e ajustes para cegos de cor.
Resumo que importa: você no controle
Criar seu app de análise nutricional com Figma Make e Gemini não só é possível como é uma das aplicações mais rápidas de IA no mobile. Da ideia à execução, com interface original e tudo sem backend. O mais incrível: você aprende, prototipa, experimenta – e pode adaptar para qualquer objetivo de saúde.
Quer se aprofundar?
Veja tutoriais práticos de IA, mobile e web no canal Dev Doido no YouTube. O passo a passo está lá em vídeo para quem quer código, design e deploy real para protótipos ainda mais poderosos.
✅Pronto para criar?
Experimente o processo, compartilhe com amigos e compare diferentes alimentos em tempo real. Torne a saúde fácil e divertida com tecnologia na prática.