Antes de montar um app, vale desenhar como ele vai ser. Isso evita retrabalho, ajuda a testar a ideia com pessoas e facilita a conversa com quem vai construir. O Figma é uma das ferramentas mais usadas para isso, e dá para aprender o básico em uma tarde.
O que é o Figma e para que serve
O Figma é uma ferramenta de design de interfaces. Funciona direto no navegador e também tem versão de aplicativo para computador. Ele é muito usado porque várias pessoas podem abrir o mesmo arquivo ao mesmo tempo, comentar e acompanhar mudanças em tempo real.
Com ele você consegue:
- desenhar wireframes, esboços simples das telas, sem cores nem acabamento;
- montar o visual final (UI) com cores, fontes e ícones;
- criar um protótipo clicável, em que as telas se ligam e a pessoa navega como se fosse o app;
- compartilhar um link para outras pessoas verem e comentarem.
Se você ainda está decidindo o que o app terá, comece pela versão mínima do app. Ela vai dizer quantas telas você realmente precisa desenhar.
Passo 1: crie um arquivo e o primeiro frame
Entre no site do Figma, crie uma conta gratuita e abra um novo arquivo de design. O elemento central do programa é o frame, que representa uma tela.
- Pressione a tecla F (ou A, em algumas versões) para usar a ferramenta de frame.
- No painel da direita, escolha um tamanho de celular na lista de modelos. O nome das opções pode variar conforme a versão.
- Dê um nome ao frame, como “Início” ou “Login”, para encontrar depois.
Comece sempre pelos tamanhos de celular, porque a maioria dos apps é pensada primeiro para essa tela. Se o app também terá versão para tablet ou web, você cria outros frames depois.
Passo 2: desenhe as telas em estilo simples
Não se preocupe com beleza no início. Monte as telas com formas e textos:
- R cria retângulos, que viram botões, campos e cartões;
- T cria textos;
- O cria círculos, úteis para fotos de perfil e ícones;
- segure Shift para manter as proporções ao redimensionar;
- use as linhas-guia que aparecem para alinhar os elementos.
Faça uma tela para cada passo do fluxo principal. Para um app de agendamento, por exemplo: tela inicial, lista de horários, confirmação e sucesso. Escreva textos reais nos botões, em vez de “Texto aqui”. Isso expõe problemas de clareza logo no desenho.
Passo 3: use auto layout, componentes e estilos
Três recursos fazem o Figma render muito mais:
Auto layout
Com o auto layout, os elementos dentro de um grupo se organizam sozinhos, com espaçamento fixo. Se você aumentar o texto de um botão, o botão cresce junto. O atalho comum é Shift + A, mas ele pode mudar entre versões.
Componentes
Um componente é um elemento que você desenha uma vez e reutiliza em várias telas, como um botão, um cartão ou um cabeçalho. Quando você altera o componente principal, todas as cópias mudam. O atalho para criar componente costuma ser Ctrl + Alt + K (ou Cmd + Option + K no Mac). Se não encontrar, clique com o botão direito no elemento e procure a opção de criar componente.
Isso evita aquele problema clássico de ter dez botões “iguais” que, na verdade, são todos um pouco diferentes. Quando o arquivo crescer, agrupe os componentes em uma página separada do arquivo, para encontrar tudo com facilidade.
Cores e estilos
Para manter o visual consistente, escolha logo no começo:
- uma cor principal e uma cor de apoio;
- uma fonte para títulos e outra (ou a mesma) para o texto;
- uma escala de tamanhos de texto e de espaçamentos.
O Figma permite salvar cores e estilos de texto para reaproveitar em todo o arquivo. Dá para começar também com kits de interface prontos, disponíveis na comunidade do Figma, que trazem botões, formulários e menus no estilo do Android e do iOS.
Passo 4: transforme as telas em protótipo clicável
Na parte superior do painel da direita, troque da aba de design para a de protótipo. Depois:
- Selecione um botão da primeira tela.
- Arraste a bolinha que aparece até a tela de destino.
- Escolha o gatilho (ao tocar) e o tipo de transição.
- Repita para os outros botões do fluxo.
- Clique em apresentar (o ícone de play) para testar no próprio computador ou compartilhe o link para abrir no celular.
Agora você pode colocar o protótipo na mão de alguém e observar. Esse tipo de teste é o centro do teste de usabilidade de app.
Erros comuns de quem está começando
- Detalhar demais cedo: perder horas em sombras e ícones antes de saber se o fluxo funciona.
- Não nomear camadas e frames: o arquivo vira uma bagunça rápido.
- Copiar e colar em vez de usar componentes: qualquer mudança vira trabalho em dobro.
- Desenhar só a tela feliz: esquecer estados de erro, vazio e carregamento.
- Não testar: o protótipo só vale se alguém de fora o usar.
O que fazer em seguida
Escolha um fluxo curto do seu app, como cadastro ou compra, desenhe de três a cinco telas, ligue-as em um protótipo e mostre para duas ou três pessoas do seu público. Ajuste o que confundiu e só então parta para a construção, seja com uma ferramenta visual, como mostra o guia de como criar um aplicativo sem programar, seja com um desenvolvedor.