Tutorial Figma: Protótipo do Aplicativo de Delivery
O Figma é uma ferramenta online usada para criar designs e protótipos de telas de aplicativos e sites. Com ele, você consegue desenhar como o app vai ficar visualmente (cores, botões, textos, ícones) e também simular a navegação, como se o aplicativo já estivesse funcionando.
Por que vamos usar o Figma neste desafio?
O protótipo no Figma vai ajudar a:
Definir as telas do aplicativo
Planejar a navegação do usuário
Visualizar o fluxo completo do pedido
Servir como guia para implementar o sistema depois
Ou seja: Primeiro desenhamos e testamos a ideia. Depois transformamos isso em código.
Passo 1 — Criar o arquivo e manter apenas 1 Page
Abra o Figma → New design file
Renomeie o arquivo: Gerenciador de Tarefas – Protótipo
No painel esquerdo, deixe só Page 1 e renomeie para: Gerenciador de Tarefas
Passo 2 — Criar o Frame padrão do celular
Pressione F (Frame)
Escolha: Phone → iPhone 13/14 (390 × 844)
Renomeie o frame para: 01 – Home (Pendentes)
Defina o fundo (Fill) como um cinza bem claro ou branco
Passo 3 — Criar a TELA DE LOGIN
Dentro do frame TELA LOGIN:
- Título (logo)
- Campos: E-mail e Senha
- Botões:
- Entrar
- Criar conta
- Esqueci minha senha
É importante observar que, em um aplicativo real, os botões Criar conta e Esqueci minha senha levam a telas próprias, onde o usuário poderá:
Criar um novo cadastro
Recuperar ou redefinir sua senha
Portanto, essas telas também precisam existir no protótipo completo do aplicativo.
No entanto, como o foco deste tutorial é o fluxo principal do pedido de delivery, a construção dessas telas não será abordada aqui.
Caso queira aprender a criar essas interfaces, existem outros tutoriais específicos que mostram como desenvolver telas de cadastro e recuperação de senha passo a passo.
Passo 4 — Duplicar para criar as outras telas
Selecione o frame TELA LOGIN e pressione:
Ctrl + D
Repita esse processo 7 vezes para gerar todas as telas necessárias do aplicativo.
Renomeie os frames com os seguintes nomes:
TELA PEDIDOS
TELA INGREDIENTES
TELA INGREDIENTES 2
TELA PEDIDO
TELA PAGAMENTO
TELA FINAL
Depois de renomear, organize todas as telas lado a lado no Figma.
A organização deve ficar aproximadamente assim:
TELA LOGIN → TELA INICIAL → TELA PEDIDOS → TELA INGREDIENTES → TELA INGREDIENTES 2 → TELA PEDIDO → TELA PAGAMENTO → TELA FINAL
Deixar as telas alinhadas horizontalmente facilita muito a criação das conexões do protótipo, pois você conseguirá visualizar claramente o fluxo de navegação do aplicativo.
Passo 5 — Montar a TELA INICIAL
Texto: Seja bem-vindo(a)
Botões:
Fazer pedido
Falar com atendente
Sair da conta
Essa tela funciona como o menu principal do aplicativo.
Passo 6 — Montar a TELA DE PEDIDOS
- Título: Escolha seu sabor
- Adicione cards com pizzas. Cada card deve conter:
- Imagem da pizza
- Nome
- Descrição
- Preço
Para facilitar a organização do layout, utilize a função Group Selection do Figma.
Selecione todos os elementos que compõem cada card (imagem, nome, descrição e preço) e pressione Ctrl + G para agrupá-los. Assim, cada pizza passa a funcionar como um único bloco, facilitando mover, copiar ou ajustar o card dentro da tela.
Como a tela possui várias pizzas, o conteúdo ficará maior do que o tamanho do celular. Para permitir que o usuário visualize todas as opções, utilize a função Scrolling do Figma.
Para isso:
Selecione o frame da TELA PEDIDOS
No painel direito, em Prototype, ative a opção Vertical Scrolling
Isso permitirá que a tela funcione como um aplicativo real, onde o usuário pode rolar a lista de pizzas para baixo para ver todas as opções disponíveis.
Passo 7 — Montar a TELA DE INGREDIENTES
Texto principal: Gostaria de adicionar algum ingrediente a mais
Botões:
Sim
Não
Voltar
Essa tela serve para decidir se o cliente deseja personalizar a pizza.
Passo 8 — Montar a TELA DE INGREDIENTES EXTRAS
Título: Escolha seus ingredientes
Adicione cards para os ingredientes. Cada ingrediente pode ser representado por um pequeno card contendo:
Nome do ingrediente
Preço adicional
Para facilitar a organização do layout, utilize a função Group Selection do Figma.
Selecione todos os elementos que compõem cada card (nome do ingrediente e preço) e pressione Ctrl + G para agrupá-los. Assim, cada ingrediente passa a funcionar como um único bloco, facilitando mover, copiar ou reorganizar os itens dentro da tela.
Como a tela pode conter vários ingredientes extras, o conteúdo pode ficar maior que o tamanho do celular. Para permitir que o usuário visualize todas as opções, utilize a função Scrolling do Figma.
Para isso:
Selecione o frame da TELA INGREDIENTES EXTRAS
No painel direito, na seção Prototype, ative a opção Vertical Scrolling
Isso permitirá que a tela funcione como um aplicativo real, onde o usuário poderá rolar a lista de ingredientes para baixo para ver todas as opções disponíveis.
Passo 9 — Montar a TELA DE RESUMO DO PEDIDO
Conteúdo: pedido completo
Botão: Escolher forma de pagamento
Passo 10 — Montar a TELA DE PAGAMENTO
Título: Escolha como vai pagar na entrega
Botões:
Cartão de crédito / débito
Dinheiro
Pix
Passo 11 — Montar a TELA FINAL
Conteúdo: Ícone de confirmação ✔
Texto: Seu pedido está sendo preparado e logo chegará!
Botão: Falar com atendente
Passo 12 — Fazer as conexões do protótipo (Prototype)
Agora vamos configurar a navegação entre as telas para que o protótipo funcione como um aplicativo real.
- Primeiro, clique na aba Prototype, localizada no painel direito do Figma.
- Selecione o frame TELA LOGIN.
- Depois clique em: Set as starting frame
Isso define que o protótipo começará pela tela de login quando for executado.
Links da TELA LOGIN
Configure as seguintes conexões:
- Botão Entrar → vai para TELA INICIAL
Links da TELA INICIAL
Configure os botões principais:
- Botão Fazer pedido → vai para TELA PEDIDOS
- Botão Falar com atendente → pode direcionar para um chat ou tela de atendimento (opcional no protótipo)
- Botão Sair da conta → pode voltar para TELA LOGIN
Fluxo do pedido
Configure as conexões do fluxo principal do aplicativo:
- Selecionar uma pizza → vai para TELA INGREDIENTES
- Botão Sim (ingredientes extras) → vai para TELA INGREDIENTES 2
- Botão Não → vai para TELA PEDIDO
- Botão Confirmar extras → vai para TELA PEDIDO
- Botão Escolher forma de pagamento → vai para TELA PAGAMENTO
- Selecionar forma de pagamento → vai para TELA FINAL
Tela final
Na TELA FINAL, adicione o botão:
- Falar com atendente
Esse botão pode ser conectado a uma tela de atendimento ou simplesmente permanecer como elemento visual no protótipo.
Links de navegação (Voltar)
Em todas as telas intermediárias do aplicativo, adicione um botão Voltar.
Configure:
- Botão Voltar → retorna para a tela anterior
ou, de forma simplificada no protótipo:
- Botão Voltar → volta para TELA INICIAL
Isso permite que o usuário navegue pelo aplicativo sem ficar preso em uma tela.
Conclusão
Aprender a usar o Figma é um passo fundamental para quem deseja criar aplicações, porque permite planejar e visualizar as telas antes de começar a programar. Ao desenvolver este protótipo do Aplicativo de Delivery, você organizou a estrutura do app, definiu as funcionalidades principais (login, escolha de pizzas, seleção de ingredientes extras, resumo do pedido e pagamento) e montou um fluxo de navegação claro entre as telas. Com isso, fica muito mais fácil transformar a ideia em código depois, já que o protótipo funciona como um guia visual do que o programa precisa fazer e de como o usuário vai interagir com ele.
