Como estruturar o desenho de tela de celular para apps reais
A maioria dos designers entra nessa área achando que é só colocar botões bonitos em cima de um fundo. A verdade é que desenho de tela de celular envolve considerar larguras variáveis, densidades de pixel diferentes, gestos do sistema operacional e limites de performance que nunca aparecem num tutorial básico. Eu já vi projetos inteiros sendo refazidos porque o designer ignorou a safe area do iPhone 14 Pro ou não respeitou o minimum touch target do Material Design. Quando eu comecei a trabalhar com interfaces móveis, eu usava o Figma sem pensar muito nas especificações técnicas. Meu primeiro erro grave foi entregar um protótipo com ícones de 24px para uma app de fintech que rodava principalmente em dispositivos Android de entrada com telas de baixa resolução. O resultado foi uma interface ilegível. A correção foi simples: adotar uma grid de 8dp, usar ícones mínimos de 48px para touch targets e testar tudo em um emulator com density 280dpi. Desde aí, eu sempre começo qualquer projeto com essa configuração padrão.
Processo prático de desenho de tela de celular
O fluxo que eu recomendo é diferente do que a maioria dos cursos ensina. Em vez de criar todas as telas de uma vez, você deve construir primeiro um sistema de design básico com tipografia, cores e espaçamentos definidos. Isso leva cerca de 2 horas num projeto pequeno, mas economiza dias inteiros depois. Sem esse passo, cada tela vira uma aventura individual e você gasta muito mais tempo consistentizando tudo no final. Dentro desse sistema, defina os componentes principais. Botões, inputs de texto, cards, listas e modais devem ter variantes claras: estado normal, hover, pressed, disabled e error. No Figma, use Auto Layout em todos os componentes e nomeie as camadas de forma consistente. Eu costumavo perder duas semanas em um projeto porque esqueci de aplicar Auto Layout nos cards de uma lista, e quando o desenvolvedor recebeu o arquivo, teve que reconstruir metade dos componentes manualmente.
Para o desenho de tela de celular propriamente dito, eu trabalho com três breakpoints principais: 375px para iPhone SE e dispositivos Android pequenos, 390px para a maioria dos Androids modernos e 428px para iPhones maiores. Alguns designers preferem 360px como padrão Android, mas 390px tem sido mais reprsentativo da realidade desde 2023. Use frames separados por breakpoint e mantenha todos conectados a um único sistema de design.
Resolução, densidade e formatos de entrega
Aqui é onde a maioria erra. Desenhar em 1x no Figma é o padrão recomendado pela Apple e pelo Material Design, mas muitos designers entregam arquivos em 2x ou 3x achando que isso melhora a qualidade. Isso é um mito. O código usa o valor em points, não em pixels. Se você desenha a 3x e entrega sem especificar o scale factor corretamente, o desenvolvedor pode interpretar mal e gerar assets errados ou código incorreto. Sempre exporte assets em @1x, @2x e @3x quando necessário, mas mantenha o frame de design em escala 1. Para ícones SVG, use o export padrão do Figma com scaling definido como percentage. Para screenshots de teste, exporte em PNG a 1x. Eu já perdi horas corrigindo problemas de blur em imagens que foram escaladas incorretamente porque o designer exportou tudo em 3x e o desenvolvedor assumiu que era @3x.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Arquitetas como Android e iOS têm convenções específicas para navegação. No iOS, a tab bar fica na parte inferior com no máximo cinco itens e usam-se ícones grandes. No Android, o padrão Material usa navigation rail ou bottom navigation conforme o contexto. Não misture os dois sistemas num mesmo projeto sem motivo real. Já vi apps híbridos com tab bars estilo iOS em apps Android que confundiram completamente os usuários.
Erros comuns que custam caro
O primeiro erro frequente é ignorar a dynamic island ou o notch. Se seu design preenche a área atrás dessas interrupções físicas da tela, o conteúdo vai ficar obstruído. Use as dimensões oficiais da Apple para a dynamic island e as medidas de safe area do Android. No Figma, existem plugins como "Safe Areas" que adicionam essas guias automaticamente aos seus frames. O segundo erro é não considerar a acessibilidade. Contraste mínimo de 4.5:1 para texto normal, 3:1 para texto grande. Touch targets de pelo menos 48x48dp. Textos menores que 16sp ficam difíceis de ler na maioria dos dispositivos. Ferramentas como o Stark plugin para Figma ajudam a verificar contraste rapidamente, mas o ideal é revisar manualmente cada tela antes de entregar.
O terceiro erro é criar animações impossíveis de implementar. Transições suaves entre telas são bonitas, mas se você não especificar easings, durações e se a animação é supported nativamente pelo framework, o desenvolvedor vai improvisar ou pular o recurso. Anote sempre: duração em milissegundos, tipo de easing (ease-in-out, linear, cubic-bezier), e se há parallax ou scroll-linked animation.
Download de recursos úteis
Eu mantengo um kit básico de início rápido com frames pré-configurados para iOS e Android, componentes reutilizáveis e uma checklist de revisão antes da entrega. Você pode baixar o kit direto do meu repositório público no GitHub. O link está na descrição abaixo. O kit inclui specs atualizados para 2024 com as dimensões corretas de safe area, tipografia escalável e os componentes padrão que eu uso em todos os projetos. Se você está começando agora, recomenda-se praticar refazendo telas de apps que você já usa no dia a dia. Pegue o Spotify, o Instagram ou o aplicativo do seu banco e tente recriar pelo menos cinco telas cada um. O processo de replicação força você a notar detalhes que passam despercebidos quando se trabalha do zero. Leva cerca de 4 a 6 horas por app, mas a curva de aprendizado é muito mais rápida do que seguir tutoriais genéricos.
O desenho de tela de celular exige atenção a detalhes que parecem pequenos mas acumulam problemas enormes. Safe areas, densidade de pixels, touch targets, contraste e consistência de componentes são pontos que definem se um projeto vai ser entregue no prazo ou vai voltar para refatoração. Comece com um sistema, teste em dispositivos reais e não pule a etapa de documentação para o desenvolvedor. Qualquer dúvida sobre dimensões específicas ou como configurar o Auto Layout corretamente, deixar comentário aqui no fórum. Eu respondo quando consigo.
