Tutorial Figma: Protótipo do Gerenciador de Tarefas
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?
Como o nosso desafio é criar um Gerenciador de Tarefas em Python, o protótipo no Figma vai servir para:
Definir quais funcionalidades o programa terá
Mostrar como o usuário vai interagir com o sistema (iniciar, parar, salvar, ver histórico)
Ter um modelo visual para guiar a criação do programa depois
Ou seja: primeiro a gente “desenha e testa a ideia”, depois a gente codifica.
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 — Montar a TELA INICIAL
Dentro do frame TELA INICIAL:
5.1 Título
Texto grande: GERENCIADOR DE TAREFAS
Centralize e deixe em negrito
5.2 Botões
Crie 3 botões (copiando o botão padrão) com os textos:
▶ Tarefas aleatórias
▶ Cronômetro
▶ Estatística
5.3 Rodapé
Texto pequeno: copyright
Passo 4 — Duplicar para criar as outras telas
Selecione a TELA INICIAL → Ctrl + D (3 vezes) e renomeie:
TELA TAREFAS
TELA CRONÔMETRO
TELA ESTATÍSTICA
Coloque as 4 telas lado a lado para facilitar os links.
Passo 5 — Montar a TELA TAREFAS
Título grande: CLIQUE PARA RECEBER A SUGESTÃO
Botões:
▶ Clique aqui
Voltar
Passo 6 — Montar a TELA CRONÔMETRO
Texto grande no centro: 00
Botões:
▶ Iniciar
|| Pausar
Voltar
Passo 7 — Montar a TELA ESTATÍSTICA
Texto: Digite o tempo da primeira tarefa:
Campo de input (retângulo branco com “00” dentro)
Texto: Digite o tempo da segunda tarefa:
Outro input igual
Textos:
tempo médio:
desvio padrão:
Botão: Voltar
Esses inputs são “fake” no protótipo (só aparência), mas já mostram como o usuário vai preencher.
Passo 8 — Fazer as conexões do protótipo (Prototype)
Agora clique na aba Prototype (lado direito).
Definir a tela inicial do fluxo
Selecione o frame TELA INICIAL
Clique em Set as starting frame
Links da TELA INICIAL
Botão Tarefas aleatórias → vai para TELA TAREFAS
Botão Cronômetro → vai para TELA CRONÔMETRO
Botão Estatística → vai para TELA ESTATÍSTICA
(Interaction: On click → Navigate to)
Links de “Voltar”
Em todas as telas:
Botão Voltar → volta para TELA INICIAL
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 Gerenciador de Tarefas, você organizou a estrutura do app, definiu as funcionalidades principais (tarefas aleatórias, cronômetro e estatística) 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.
