Vai pedir um aplicativo à IA? Como desenhar o protótipo no Figma antes do código

Um protótipo ajuda você a ver se as telas e a navegação fazem sentido antes de pedir a uma IA que construa o aplicativo. Nesta aula, vamos pegar o site de agendamento da barbearia planejado na aula anterior e desenhar no Figma o caminho entre escolher um serviço e enviar um pedido de horário.

O resultado será um protótipo navegável com cinco telas. Ele não terá login, banco de dados nem envio real de agendamentos. A finalidade é revisar a experiência e encontrar dúvidas cedo, quando ainda é simples mudar a ordem das telas ou as regras do fluxo.

Se você ainda não definiu o público, a tarefa principal e as regras do seu produto, comece pelo planejamento. O Figma mostra visualmente as decisões, mas não decide pelo negócio o que deve acontecer.

Um protótipo testa a sequência de telas e decisões; ele não prova que login, pagamentos ou armazenamento já funcionam.

Um wireframe é um esboço simples da tela. Ele mostra onde ficam o título, as informações e os botões, sem exigir cores ou detalhes visuais. Um protótipo conecta essas telas para que alguém consiga experimentar o caminho com cliques ou toques.

Um aplicativo funcional precisa implementar o comportamento real: validar dados, salvar um pedido, consultar horários disponíveis e responder a erros. Um protótipo no Figma pode simular a navegação, mas não executa essas regras de negócio por conta própria.

Essa distinção evita uma expectativa comum: ver uma tela de confirmação no protótipo não quer dizer que um agendamento foi gravado. Vamos usar textos de demonstração e dados fictícios durante o exercício.

Antes de abrir o Figma, escreva o caminho que a pessoa vai percorrer. Para este exemplo, a cliente quer marcar um corte de cabelo. Ela precisa escolher um serviço, selecionar um horário, informar como pode ser contatada e revisar o pedido.

Crie um arquivo de design e adicione cinco frames de celular. Você pode escolher uma predefinição de telefone ou definir um tamanho personalizado, como 390 por 844 pixels. Esse tamanho serve para o exercício; depois, o aplicativo ainda precisará ser ajustado e testado em diferentes aparelhos.

• Início: explique o serviço e apresente o botão Agendar horário.
• Serviço: mostre opções fictícias, como corte e barba, com duração e preço de exemplo.
• Horário: permita escolher um dia e um horário ilustrativo dentro do expediente.
• Contato e revisão: peça nome e telefone fictícios e resuma o pedido antes da confirmação.
• Confirmação: mostre que o pedido de demonstração foi enviado, sem afirmar que existe um sistema real por trás.

Comece pela estrutura. Em cada frame, coloque um título que explique onde a pessoa está, o conteúdo necessário para tomar a próxima decisão e um botão principal com um verbo claro. Por exemplo, prefira Continuar para escolher horário a um botão chamado Próximo sem contexto.

Use retângulos para representar campos e opções, textos curtos para rótulos e espaçamento consistente entre elementos. Se ainda está testando o fluxo, não gaste tempo procurando a cor perfeita. Primeiro confira se cada tela ajuda a completar a tarefa.

Mantenha nomes de camadas fáceis de encontrar, como Botão Agendar, Cartão Corte e Campo Telefone. Uma organização simples ajuda você a encontrar elementos e facilita a revisão com outra pessoa ou uma ferramenta de IA.

No Figma, selecione o botão que inicia a navegação e abra a aba Prototype no painel lateral. Arraste o conector azul do botão até o frame de destino. Configure a interação para acontecer ao clicar ou tocar e escolha a ação de navegar para a próxima tela. Os nomes exatos podem variar conforme a interface do Figma.

Repita o processo para cada etapa: Agendar horário leva à escolha de serviço; Continuar leva à seleção de horário; Revisar pedido leva ao resumo; e Confirmar abre a tela de demonstração. A documentação do Figma descreve essa ligação como uma interação entre um ponto de origem, uma ação e um destino.

Depois de ligar a primeira tela à segunda, o Figma pode definir o início do fluxo automaticamente. Confira qual frame está marcado como ponto inicial. Para revisar o caminho, use a opção Present ou Preview no fluxo e clique nos botões como se fosse a pessoa usando o aplicativo.

• Comece sempre pelo frame de início e percorra as cinco telas na ordem.
• Confirme que cada botão leva ao destino certo e que a pessoa entende o que fazer em seguida.
• Volte às telas anteriores e confira se a navegação continua clara.
• Teste no modo de apresentação antes de compartilhar o protótipo para receber comentários.

Quando o fluxo fizer sentido, o protótipo pode servir de referência para explicar o projeto a uma ferramenta de desenvolvimento. Se ela não conseguir abrir o arquivo do Figma, exporte imagens das telas ou descreva cada etapa. Um link compartilhável só funciona se a ferramenta tiver acesso permitido ao arquivo.

Junto com as telas, informe as regras de negócio. Por exemplo: um horário não pode ser reservado duas vezes; a solicitação fica pendente até ser aprovada; e os horários exibidos precisam respeitar o expediente. As imagens mostram a interface, mas não substituem essas instruções.

Objetivo: criar um fluxo de agendamento para uma barbearia
Telas: início, serviço, horário, contato e confirmação
Regra: uma solicitação não deve parecer confirmada antes da aprovação
Use o protótipo como referência visual. Antes de gerar código,
resuma o fluxo, liste as dúvidas e espere minha aprovação.

O exercício está completo quando alguém que não acompanhou seu planejamento consegue iniciar na tela inicial, escolher um serviço, avançar pelo fluxo e entender o resultado final. Se a pessoa não sabe onde clicar ou não consegue dizer se o pedido foi confirmado, ajuste a tela antes de pedir código.

Um protótipo bom não precisa prever todos os detalhes do produto. Ele precisa tornar visíveis as decisões que você já tomou e as dúvidas que ainda faltam resolver. Depois dessa revisão, você pode transformar a próxima versão do protótipo em tarefas de desenvolvimento e avaliar quais ferramentas serão necessárias.