Como fazer desenho de tela de celular na prática
Desenho de tela de celular envolve entender dimensões reais de dispositivos, escolher a ferramenta certa e saber quando ignorar o pixel-perfect em favor da usabilidade. Não é tão simples quanto abrir um programa e começar a arrastar retângulos. Na verdade, a maior parte do tempo você vai gastar decidindo qual resolução basear seu trabalho e como lidar com as variações que aparecem depois.
O que é desenho de tela de celular
No sentido técnico, é o processo de criar layouts visuais para interfaces móveis, considerando resoluções, densidades de pixel, áreas seguras de toque e as restrições específicas de cada sistema operacional. Você desenha telas que serão exibidas em dispositivos com proporções drasticamente diferentes, desde smartphones compactos até tablets dobráveis. O desafio não é apenas o visual, mas garantir que o design funcione em hardware que você nem sempre tem acesso físico. Quando eu comecei a trabalhar com isso, minha equipe pedia protótipos em 1080x2400 porque era a resolução mais comum no mercado brasileiro. Quando entregamos, percebemos que uma fatia enorme de usuários tinha telas em 720p com densidade baixa. O layout quebrava em pontos que nunca havíamos testado. A solução foi adotar um sistema baseado em dp (density-independent pixels) ao invés de pixels brutos, e criar checkpoints de teste em três resoluções fixas: 360dp de largura, 390dp e 412dp. Isso cobriu mais de 90% dos dispositivos reais.
Ferramentas que realmente funcionam
Figma ainda é a opção padrão do mercado para desenho de tela de celular, principalmente pela colaboração em tempo real e pela quantidade de plugins disponíveis. Figma é gratuito para uso individual com limitações razoáveis. O Affinity Designer pode ser útil se você precisar de vetores mais pesados e controle total sobre curvas, mas o fluxo de colaboração é inferior. Para quem trabalha muito com Android nativo, o Android Studio tem um designer de layouts integrado que é subestimado, especialmente para visualizar como os constraints funcionam antes de codar. Se o orçamento permite, o Figma Professional custa cerca de 12 dólares por mês por usuário. Para equipes pequenas que fazem desenho de tela de celular como atividade pontual, o plano gratuito atende sem problema. O que mais costuma travar projetos não é a ferramenta em si, mas a falta de um sistema de design consistente. Você pode ter o melhor software do mundo e ainda assim entregar telas que não conversam entre si.
Passo a passo prático
Comece definindo a largura base do seu frame. O padrão da indústria para a maioria dos smartphones atuais gira em torno de 360 a 390dp de largura. A escolha depende do público-alvo. Se o app é voltado para mercados emergentes onde dispositivos de entrada são predominantes, vá de 360dp. Para mercados mais ricos ou apps premium, 390dp ou até 412dp faz sentido. Depois disso, construa um grid de colunas. Sets de 4, 8 ou 12 colunas são os mais comuns. O valor 8 funciona bem na maioria dos casos porque é divisível por 2, 4 e 8, o que reduz a chance de frações estranhas nas proporções. Configure espaçamentos com base nesse mesmo sistema. Padding horizontal de 16dp nas laterais é um ponto de partida seguro para a maioria das telas.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Aqui entra um ponto que muita gente erra: o uso de safe areas. Em dispositivos com notch, illiquid zones ou barras de navegação dinâmicas, o conteúdo importante precisa respeitar essas margens. No iOS, o sistema opera com uma área segura que varia conforme o modelo. No Android, o GestureNavigationOverlay e o NavigationBar também ocupam espaço real da tela. Ignorar isso significa que botões de ação principal podem ficar parcialmente cobertos ou impossíveis de alcançar com o polegar. Para entrega, exporte seus frames em PNG ou SVG para stakeholders, mas sempre mantenha o arquivo fonte organizado com componentes reutilizáveis. Cada botão, campo de input e card deve existir como um componente único, não como elementos repetidos manualmente. Isso reduz erros de consistência e acelera a produção de novas telas em cerca de 60% após a configuração inicial.
Problemas que aparecem de verdade
Um dos problemas mais chatos que eu enfrentei foi com campos de texto em teclados nativos. O desenho da tela mostrava um input perfeitamente posicionado, mas quando o teclado abria no dispositivo físico, o layout colapsava porque ninguém tinha definido constraints de resistência apropriadas. A correção foi adicionar um padding inferior dinâmico de pelo menos 16dp em todas as telas que contivessem inputs, e testar com o teclado ativo em cada device farm. Outro problema recorrente envolve o contraste de cores em telas OLED. Pretos absolutos (#000000) em telas OLED economizam bateria e parecem bonitos, mas textos escuros sobre fundos escuros frequentemente caem no problema de legibilidade porque o olho humano tem dificuldade com contraste baixo em fundo preto puro. A solução prática é usar #121212 ou #1A1A1A ao invés de preto absoluto, mantendo o benefício de economia de energia enquanto garante legibilidade.
Vale mencionar que desenho de tela de celular feito exclusivamente em Figma pode criar uma falsa sensação de completude. O que parece bom na ferramenta nem sempre se traduz bem quando implementado. Sempre reserve tempo para testes em dispositivos reais, mesmo que sejam apenas dois ou três modelos diferentes. Um teste de uma hora em hardware real vale mais do que três horas ajustando pixels na tela do computador.
Downloads e recursos
Para começar, o Figma oferece templates gratuitos de UI kits mobile na seção Community. Basta buscar por "mobile UI kit" ou "phone frame" e importar diretamente para seu workspace. A maioria dos templates inclui frames pré-configurados para iOS e Android com as dimensões adequadas e safe areas já demarcadas. Também existem bibliotecas de ícones gratuitas como o Material Symbols e o SF Symbols que são padrão da indústria e já vem com versões otimizadas para diferentes densidades de pixel. Se você prefere trabalhar offline, o Sketch tem uma licença anual de aproximadamente 99 dólares e oferece suporte nativo a symbols e overlays que pode ser vantajoso para equipes que não dependem de colaboração em nuvem. O arquivo de download está disponível diretamente no site oficial do Sketch após a compra da licença.
O que importa no final é consistência. Tela bem desenhada é aquela que segue regras claras aplicadas em todas as telas do projeto, não a que tem mais efeitos visuais ou animações. Comece com um sistema simples, documente as decisões e vá evoluindo conforme o projeto cresce.
