Layout de App Mobile com Figma AI

    Cria a estrutura de telas mobile com foco em fluxo, clareza e consistência visual.

    Design
    ux
    figma-ai
    mobile
    app
    intermediario

    Preencha as variáveis

    0/7 preenchidas

    Preencha os campos abaixo e o prompt será atualizado automaticamente. Depois é só copiar!

    {tipo_app}
    {publico}
    {objetivo_app}
    {tela_principal}
    {funcionalidades}
    {estilo_visual}
    {referencias}

    Prompt (prévia ao vivo)

    Atue como Mobile Product Designer. Estruture um layout mobile no Figma AI com foco em usabilidade e fluxo de navegação.
    
    Dados do app:
    - Tipo de app: {tipo_app}
    - Público: {publico}
    - Objetivo principal do app: {objetivo_app}
    - Tela principal desejada: {tela_principal}
    - Funcionalidades principais: {funcionalidades}
    - Estilo visual: {estilo_visual}
    - Referências: {referencias}
    
    Entregue:
    1) Mapa simples de navegação (tabs, stack, bottom nav etc.)
    2) Estrutura da tela principal
    3) Componentes recomendados (cards, listas, chips, CTA, filtros)
    4) Sugestões de padrões mobile (toque, espaçamento, legibilidade)
    5) Prompt final para Figma AI
    
    No final, inclua uma lista de 5 cuidados para evitar layout bonito porém ruim de usar no mobile.

    Exemplos

    Entrada

    Tipo de app: App de viagens e roteiros
    Público-alvo: Viajantes 25-45 anos
    Objetivo principal do app: Explorar roteiros e salvar favoritos
    Tela principal desejada: Feed de roteiros com filtros
    Funcionalidades principais: Busca, filtros, favoritos, mapa, avaliações
    Estilo visual: Clean, moderno, com foco em fotos
    Referências: Airbnb, TripAdvisor

    Saída esperada

    🗺️ Mapa de navegação sugerido:
    - Bottom nav: Início | Buscar | Favoritos | Perfil
    - Stack para detalhes de roteiro e mapa
    
    📱 Estrutura da tela principal:
    1. Header com saudação + busca
    2. Filtros em chips horizontais
    3. Cards de roteiros com foto, título e nota
    4. CTA para ver no mapa
    
    🧩 Componentes recomendados:
    - Cards com imagem
    - Chips de filtro
    - Bottom sheet para filtros avançados
    - Botões sticky para ações principais
    
    ⚠️ 5 cuidados mobile:
    1. Botões pequenos demais
    2. Contraste fraco sobre imagem
    3. Excesso de informação no card
    4. Espaçamento inconsistente
    5. CTA longe do polegar
    
    ✅ Prompt para Figma AI:
    Crie layout mobile para app de viagens com feed de roteiros, busca, filtros em chips, cards com imagem e avaliação, navegação inferior e foco em usabilidade. Visual clean, moderno e orientado a descoberta.