12 TUTORIAL COMPLETO 3 PROT4TIPO

Apuntes

📱 TUTORIAL COMPLETO – PROTÓTIPO MOBILE (APP) NO FIGMA Este tutorial cria um protótipo mobile no estilo aplicativo, não apenas uma versão reduzida do site. 🎯 1. Criar o Arquivo e Configurar a Tela Mobile 1.1 Criar página mobile ● No seu arquivo Figma → crie uma página chamada: “MOBILE – APP” 1.2 Criar o Frame-base ● Pressione F ● Selecione iPhone 14 Pro (390 × 844) ou digite 390 de largura. Renomeie: APP – Home (Mobile) 1.3 Configurar o grid ideal O padrão mobile mais confortável: Item Valor Colunas 4 Margens 16 px Gutter 16 px Configuração: ● Selecione o frame ● Layout Grid → + → Columns ● Colunas 4, Margin 16, Gutter 16 Isso garante que tudo fique “limpo”, equilibrado e responsivo. 🎨 2. Definir Identidade Visual (Herdada do Web) 2.1 Paleta ● Primário: #0B1F3A ● Secundário: #2D6CDF ● Fundo das seções: #F3F5F7 ● Texto: #111319 2.2 Tipografia (Google Fonts) ● Montserrat para títulos ● Open Sans para textos Essas combinações são amplamente recomendadas para UI e têm ótima legibilidade em telas pequenas. [pagecloud.com], [medley.ltd] 🧱 3. Estrutura Geral do APP (Mobile) A estrutura do App fica assim: 1. Header simplificado 2. Hero compacto (imagem + título + CTA) 3. Carrossel horiz...