Tutorial Figma: Protótipo do Aplicativo de Delivery — Versão Admin
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.
Neste tutorial, vamos continuar o projeto do aplicativo de delivery, mas agora desenvolveremos sua versão administrativa.
O administrador será responsável por acessar o sistema, visualizar os pedidos recebidos, aceitar ou recusar pedidos, atualizar o status das entregas e administrar os sabores e ingredientes disponíveis no aplicativo.
Por que vamos criar uma versão Admin?
Enquanto o cliente utiliza o aplicativo para realizar pedidos, precisamos de uma área separada para que o administrador consiga gerenciar tudo o que acontece dentro do sistema.
O protótipo da versão Admin vai ajudar a:
- visualizar os pedidos realizados pelos clientes;
- aceitar ou recusar pedidos;
- atualizar o status de cada pedido;
- enviar mensagens relacionadas à entrega;
- cadastrar novos sabores;
- editar sabores existentes;
- cadastrar novos ingredientes;
- editar ingredientes existentes.
Antes de desenvolver essas funcionalidades utilizando código, vamos montar e testar todo o fluxo no Figma.
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 — Criar a tela CRIAR CONTA
Duplique o Frame da tela de login para manter o mesmo estilo visual. Renomeie a nova tela para: Criar conta
Nesta tela, adicione os seguintes campos:
- Nome
- Senha
- Confirmar senha
Depois, crie dois botões:
- CRIAR CONTA
- VOLTAR AO LOGIN
O objetivo dessa tela é representar o cadastro de um novo administrador no sistema.
Passo 5 — Criar a tela ESQUECI SENHA
Agora duplique novamente uma das telas anteriores. Renomeie para: Esqueci senha
Crie os seguintes campos:
- Nova Senha
- Confirmar senha
Depois, adicione:
- NOVA SENHA
- VOLTAR AO LOGIN
Essa tela representa o processo de redefinição da senha do administrador.
Passo 6 — Criar o MENU ADMIN
Agora vamos criar a tela principal do administrador. Renomeie o novo Frame para: menu_admin
No centro da tela, adicione três opções:
- PEDIDOS
- EDITAR/ADICIONAR SABORES
- EDITAR/ADICIONAR INGREDIENTES
Essa tela será o principal ponto de navegação da versão administrativa.
Passo 7 — Criar a tela de PEDIDOS
Agora crie a tela responsável por mostrar os pedidos recebidos pelo sistema. Renomeie para: pedidos
Nesta tela, crie um card contendo as informações do pedido:
- Número. Exemplo: #001
- Informações do cliente
- Informações do pedido
Na parte inferior do card, adicione três botões:
- ACEITAR PEDIDO
- RECUSA PEDIDO
- ATUALIZAR PEDIDO
Essa é uma das telas mais importantes do sistema administrativo.
Passo 8 — Criar a tela de ATUALIZAÇÃO DE STATUS
O botão: ATUALIZAR PEDIDO, deve levar para uma nova tela.
Renomeie o Frame para: atualizar status
Nesta tela, crie a seção: STATUS
Adicione três possibilidades:
- PREPARANDO
- SAIU PARA ENTREGA
- ENTREGUE
Esses botões representam as diferentes etapas pelas quais um pedido pode passar.
Também crie: MENSAGEM PARA NOTIFICAÇÃO
e abaixo adicione um campo para inserir uma mensagem.
Por exemplo: Seu pedido saiu para entrega!
Na parte inferior, adicione:
- SALVAR
- CANCELAR
Passo 9 — Criar a tela de SABORES
Crie uma nova tela chamada: atualizar menu
Na parte superior, adicione: + NOVO SABOR
Logo abaixo, crie uma lista com os sabores disponíveis. Cada item pode possuir:
- Imagem da pizza
- Nome
- Descrição
- Preço
- Editar
Depois de criar um item, utilize: Ctrl + G
para agrupar todos os seus elementos.
Assim, será mais fácil duplicá-lo e criar os outros sabores.
Passo 10 — Criar a tela de INGREDIENTES
Crie um Frame chamado: atualizar ingredientes
Adicione no topo: + NOVO INGREDIENTE
Abaixo, crie uma lista semelhante à página de sabores. Cada ingrediente poderá apresentar:
- Imagem
- Nome
- Preço
- Editar
Passo 11 — Criar a tela de EDIÇÃO
Agora criaremos uma tela que poderá ser utilizada tanto para cadastrar quanto para editar informações. Renomeie o Frame para: edição
Adicione os campos:
- Nome
- Descrição
- Preço
Depois, crie uma área para: Upload de imagem
Na parte inferior, adicione:
- SALVAR
- CANCELAR
O mesmo comportamento pode ser utilizado para os ingredientes.
Passo 12 — Fazer as conexões do protótipo
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 MENU ADMIN
Botão Criar conta → vai para CRIAR CONTA
Botão Esqueci minha senha → vai para ESQUECI SENHA
Links da tela CRIAR CONTA
Configure os botões:
Botão Criar conta → vai para TELA LOGIN
Botão Voltar ao login → vai para TELA LOGIN
Links da tela ESQUECI SENHA
Configure os botões:
Botão Nova senha → vai para TELA LOGIN
Botão Voltar ao login → vai para TELA LOGIN
Links do MENU ADMIN
Configure os botões principais:
Botão Pedidos → vai para PEDIDOS
Botão Editar/Adicionar sabores → vai para ATUALIZAR MENU
Botão Editar/Adicionar ingredientes → vai para ATUALIZAR INGREDIENTES
Fluxo dos pedidos
Configure as conexões para o gerenciamento dos pedidos:
Botão Atualizar pedido → vai para ATUALIZAR STATUS
Botão Aceitar pedido → pode permanecer na tela PEDIDOS como ação do sistema
Botão Recusa pedido → pode permanecer na tela PEDIDOS como ação do sistema
Links da tela ATUALIZAR STATUS
Configure os botões:
Botão Preparando → seleciona o status Preparando
Botão Saiu para entrega → seleciona o status Saiu para entrega
Botão Entregue → seleciona o status Entregue
Botão Salvar → volta para PEDIDOS
Botão Cancelar → volta para PEDIDOS
Fluxo de sabores
Configure as conexões da área de gerenciamento de sabores:
Botão + Novo sabor → vai para EDIÇÃO
Ícone de editar de um sabor → vai para EDIÇÃO
Na tela EDIÇÃO, configure:
Botão Salvar → volta para ATUALIZAR MENU
Botão Cancelar → volta para ATUALIZAR MENU
Fluxo de ingredientes
Configure as conexões da área de gerenciamento de ingredientes:
Botão + Novo ingrediente → vai para EDIÇÃO
Ícone de editar de um ingrediente → vai para EDIÇÃO
Na tela EDIÇÃO, configure:
Botão Salvar → volta para ATUALIZAR INGREDIENTES
Botão Cancelar → volta para ATUALIZAR INGREDIENTES
Links de navegação (Voltar)
Nas telas intermediárias do aplicativo, você também pode adicionar 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 MENU ADMIN
Isso permite que o administrador navegue pelo aplicativo sem ficar preso em uma tela.
Conclusão
Neste tutorial, criamos o protótipo da versão Admin do aplicativo de delivery no Figma, incluindo login, criação e recuperação de conta, menu administrativo, gerenciamento de pedidos, atualização de status e administração de sabores e ingredientes. Com todas as telas organizadas e conectadas, já conseguimos simular como o administrador utilizará o sistema antes mesmo de iniciar a programação. O próximo passo é utilizar esse protótipo como referência para transformar as telas e funcionalidades em um aplicativo real.
