Tutorial completo e inútil: como NÃO usar o Figma
Se você chegou aqui é porque quer aprender Figma. Sorry.
Este é um tutorial completo e inútil sobre como não usar o Figma para prototipar.
A ideia é simples: pegue tudo que normalmente recomendam fazer e faça exatamente o contrário.
Não é um guia para você melhorar como designer. É um guia para descobrir quantas decisões ruins cabem em um único arquivo.
1. Comece pelo arquivo
Abra o Figma e crie um único arquivo para tudo.
Projeto novo? Mesmo arquivo.
Projeto antigo? Mesmo arquivo.
Apresentação de 2019? Está lá.
Protótipo que o cliente abandonou? Também.
Não crie páginas para organizar nada. Organização é besteira.
Se depois de três meses você não conseguir encontrar a tela que procura, significa que o arquivo está funcionando.
2. Ignore os Frames
Frames existem para organizar layouts. Você não precisa disso.
Crie retângulos. Depois coloque outros retângulos dentro deles. Depois coloque mais retângulos por cima.
Quando alguém perguntar onde está o Frame, diga: “Está tudo no componente.”
Ninguém sabe exatamente o que isso significa, mas parece profissional.
3. Esqueça o Auto Layout
O Auto Layout foi criado para facilitar a vida do designer. Portanto, não use.
Faça tudo manualmente.
Mudou uma palavra no botão? Redimensione o botão.
Mudou duas palavras? Redimensione tudo.
Mudou o texto de um card? Comece a rezar.
Se alguém sugerir Auto Layout, responda: “Depois eu organizo.”
Você sabe que nunca vai organizar.
4. Use números aleatórios
Padding de 17px. Gap de 13px. Altura de 47px. Margem de 23px.
Não existe razão para usar números como 8, 16, 24 ou 32. Isso é coisa de Design System.
Você está prototipando.
Se alguém perguntar de onde veio aquele 13px: “Olhei e achei bonito.”
5. Não crie componentes
Criar componente significa pensar no futuro. Você está preocupado com a tela de agora.
Faça cada botão individualmente.
Se houver 37 botões iguais, crie 37 botões iguais.
E quando o cliente pedir para mudar a cor: mude os 37.
Isso também é experiência de usuário. Só que do designer.
6. Use fontes diferentes
Uma tela pode ter cinco fontes.
Uma para título. Outra para botão. Outra para legenda. Outra porque estava instalada. E uma quinta porque “ficou legal”.
Não se preocupe com hierarquia tipográfica.
Se tudo chama atenção, nada está errado.
7. Faça o protótipo parecer um produto pronto
Não importa se você ainda está descobrindo o fluxo. Faça tudo perfeito.
Todos os estados. Todas as telas. Todas as animações. Todos os casos extremos. Inclusive aquele fluxo que ninguém pediu.
Depois descubra que o problema original era outro.
Parabéns. Você acabou de gastar três dias prototipando uma solução para uma pergunta que ninguém fez.
8. Coloque 48 telas no protótipo
Quanto mais telas, melhor.
O usuário precisa conseguir: Home → Menu → Submenu → Categoria → Subcategoria → Filtro → Modal → Outro Modal → Tela que ninguém sabe de onde veio.
Se você consegue se perder no próprio protótipo, ele está suficientemente realista.
9. Instale todos os plugins
Você não precisa saber para que servem. Instale.
Plugin de ícone. Plugin de imagem. Plugin de texto. Plugin que gera outro plugin.
Se existe na Community, você precisa dele.
E se algum plugin resolver fazer em três segundos aquilo que você levaria vinte minutos para fazer manualmente, ignore. Você tem controle sobre seu trabalho.
10. E finalmente: mostre para o cliente
Não explique nada. Abra o protótipo e diga: “Pode navegar.”
Se ele perguntar por que determinado botão não funciona: “É só um protótipo.”
Se perguntar por que funciona daquele jeito: “Estamos validando.”
Se perguntar por que não funciona: “Ainda não está no escopo.”
Se perguntar qual é o objetivo da tela: “Precisamos testar com usuários.”
Pronto. Você terminou seu protótipo. Ou pelo menos terminou de desenhar a confusão.
Conclusão
Figma é uma ferramenta excelente. Justamente por isso é extremamente fácil transformar uma ferramenta excelente em um depósito desorganizado digital de decisões ruins.
Então, se você quiser prototipar direito, faça exatamente o contrário deste tutorial: organize, simplifique, use componentes, pense nos fluxos, use Auto Layout, estabeleça padrões e, principalmente, descubra primeiro qual problema você está tentando resolver.
Mas se nada disso der certo… sempre existe o bom e velho: “é só um protótipo.”
