Fluxo de trabalho com modelos
Modelos gratuitos de aplicativos móveis para Figma podem dar a um projeto de design de aplicativos um ponto de partida visual. Escolha um layout adequado à sua tarefa, substitua o conteúdo de exemplo e teste se o fluxo ainda faz sentido.
Um caminho baseado em modelos começa com um padrão de tela existente; o design de aplicativos em geral começa com o problema e só depois escolhe um padrão. A comparação abaixo torna essa distinção concreta.
Um modelo útil oferece uma estrutura de tela, um padrão visual reproduzível e algo específico para avaliar criticamente. O trabalho está em decidir quais partes devem permanecer.
Você precisa apresentar uma ideia de agendamento a alguém que não consegue avaliar apenas uma lista de funcionalidades.
Adapte uma tela relevante para que a conversa se concentre nas opções, nos rótulos e na próxima ação — não na decoração.
Você está comparando duas maneiras de organizar um checkout para celular.
Use um modelo como uma das opções e avalie sua hierarquia em relação à tarefa, em vez de tratá-lo como uma solução pronta.
Uma tela de exemplo parece bem acabada, mas sua navegação pode não ser adequada ao contexto de uso do dispositivo previsto.
Mantenha a estrutura útil do conteúdo enquanto analisa as expectativas da plataforma, o espaçamento e as áreas de toque.
Você consegue editar uma tela, mas não sabe ao certo o que mudar primeiro.
Parta da tarefa principal do usuário e avance, em uma sequência planejada, para os rótulos, os estados e a prioridade visual.
Trate o modelo como um rascunho a ser questionado, não como um atalho para evitar decisões sobre o produto.
Anote quem usa a tela e o que essa pessoa precisa fazer. Para o design de aplicativos, “agendar uma visita” oferece uma direção mais clara do que “criar uma tela inicial moderna”.
Procure um modelo com uma tarefa e uma hierarquia de conteúdo semelhantes. Confira os termos de uso e as possibilidades de edição antes de dedicar tempo a ele; a semelhança visual, por si só, não basta.
Insira rótulos e conteúdo realistas. Siga a ação principal até a tela seguinte e depois verifique os estados ausentes, como erros, resultados vazios e confirmação.
Use esta comparação lado a lado para decidir se um layout mobile existente ajuda na sua tarefa específica de design de aplicativos.
| Ponto de partida com um modelo do Figma | Ponto de partida geral para design de aplicativos | |
|---|---|---|
| Primeira decisão | Qual tela existente corresponde melhor à tarefa? | O que o usuário precisa realizar? |
| Material inicial | Um layout existente, se o criador o disponibilizar para você usar | Uma descrição da tarefa, um fluxo preliminar ou uma tela em branco |
| Vantagem inicial | Hierarquia visível que pode ser avaliada e alterada | Liberdade para definir a estrutura antes de aplicar o estilo |
| Principal risco | Manter elementos atraentes que não contribuem para a tarefa | Passar tempo demais decidindo por onde começar |
| Trabalho com conteúdo | Substituir textos, imagens e dados de exemplo | Definir as necessidades de conteúdo antes de organizá-lo |
| Trabalho com o fluxo | Verificar o que acontece antes e depois da tela fornecida | Mapear o fluxo antes de refinar telas individuais |
| Pergunta para revisão | O que deve ser removido ou adaptado? | Que estrutura deve ser criada? |
Este guia aborda temas relacionados ao Figma; o App Design não é o Figma e não fornece nem verifica uma biblioteca de templates do Figma.
Esta página não fornece um arquivo específico do Figma nem confirma que um arquivo de terceiros continua disponível.
O que fazer em vez disso
Confira a origem de qualquer template que encontrar, incluindo as condições atuais de acesso.
Uma tela criada para outro aplicativo pode ocultar decisões ainda não tomadas sobre seus usuários, conteúdo e navegação.
O que fazer em vez disso
Compare cada elemento de destaque com a tarefa que você definiu antes de mantê-lo.
Um template descrito como gratuito ainda pode ter condições de atribuição, redistribuição ou uso comercial.
O que fazer em vez disso
Leia a licença do criador para o arquivo exato que você pretende adaptar.
Uma tela bem acabada não comprova se alguém entende o fluxo ou consegue concluir a tarefa.
O que fazer em vez disso
Percorra cenários realistas e observe onde os rótulos ou as próximas etapas causam hesitação.
Descreva a tarefa do usuário, o conteúdo necessário na tela e a ação seguinte. Seja adaptando um template externo ou começando do zero, essas decisões dão uma base mais sólida ao seu trabalho de design de aplicativos.
Procure templates compartilhados por seus criadores e confira as condições atuais de acesso e uso de cada fonte. Esta página explica como avaliar e adaptar um template; não é um diretório de templates para Figma.
Isso depende da licença vinculada ao arquivo específico, não da palavra “gratuito” em um resultado de busca. Confira as condições de uso comercial, atribuição e redistribuição antes de incorporá-lo a um produto.
Uma tela existente pode facilitar a análise da hierarquia e do espaçamento. Ainda assim, iniciantes precisam substituir o conteúdo de exemplo, entender o fluxo pretendido e questionar elementos que não atendem às necessidades do aplicativo.
Anote primeiro a tarefa principal e uma sequência aproximada de telas. Assim, você poderá selecionar um template compatível com essa sequência, em vez de remodelar o produto em torno de um layout conveniente.
Nenhum arquivo ou biblioteca de templates do Figma é prometido nesta página, e o App Design não é afiliado ao Figma. Use estas orientações para planejar um fluxo de trabalho baseado em templates e verifique qualquer recurso de terceiros em sua fonte original.