33. Criando um menu de navegação

Você precisa ser um membro para assistir essa aula

Descrição

Comentários

Eu mostro passo a passo como construir um menu profissional totalmente no Framer, sem precisar exportar do Figma. Começo dividindo o menu em partes (logo, itens, CTAs) e organizo tudo com stacks e uma grid para estabelecer limites e centralização. Ajusto alinhamentos, espaçamentos e cores apenas na stack principal para facilitar mudanças futuras. Em seguida transformo o menu em componente e crio variações para desktop, tablet e mobile, adaptando tamanhos, espaçamentos e ícones para cada breakpoint. Na versão mobile eu transformo o menu em vertical, configuro o botão de abrir/fechar e trato visibilidade e animação para abrir a lista de itens. Também ensino a usar absolute/relative com cuidado para centralizar corretamente, aplicar padding e radius e preservar consistência visual ao abrir e fechar. No fim você terá um menu responsivo, reutilizável como componente e com opções de CTAs adaptadas para cada tela. Termos técnicos: - stack: agrupamento em coluna/linha que organiza elementos dentro do Framer. - grid: área delimitadora que define onde o conteúdo fica centralizado e com largura máxima. - CTA: "call to action", botão de ação (ex.: criar conta, login). - fit / fill (fio): ajustes que fazem o conteúdo caber ou preencher o espaço na stack. - absolute / relative: modos de posicionamento; absolute posiciona fora do fluxo, relative mantém no fluxo. - padding: espaçamento interno nas bordas de um container. - componente: elemento reutilizável com múltiplas variantes (desktop/tablet/mobile). - breakpoint: ponto de mudança de layout (ex.: tablet, mobile) que adapta o design. - visible: propriedade para mostrar/ocultar elementos sem apagá-los.

Comentários

Descrição

Comentários

Eu mostro passo a passo como construir um menu profissional totalmente no Framer, sem precisar exportar do Figma. Começo dividindo o menu em partes (logo, itens, CTAs) e organizo tudo com stacks e uma grid para estabelecer limites e centralização. Ajusto alinhamentos, espaçamentos e cores apenas na stack principal para facilitar mudanças futuras. Em seguida transformo o menu em componente e crio variações para desktop, tablet e mobile, adaptando tamanhos, espaçamentos e ícones para cada breakpoint. Na versão mobile eu transformo o menu em vertical, configuro o botão de abrir/fechar e trato visibilidade e animação para abrir a lista de itens. Também ensino a usar absolute/relative com cuidado para centralizar corretamente, aplicar padding e radius e preservar consistência visual ao abrir e fechar. No fim você terá um menu responsivo, reutilizável como componente e com opções de CTAs adaptadas para cada tela. Termos técnicos: - stack: agrupamento em coluna/linha que organiza elementos dentro do Framer. - grid: área delimitadora que define onde o conteúdo fica centralizado e com largura máxima. - CTA: "call to action", botão de ação (ex.: criar conta, login). - fit / fill (fio): ajustes que fazem o conteúdo caber ou preencher o espaço na stack. - absolute / relative: modos de posicionamento; absolute posiciona fora do fluxo, relative mantém no fluxo. - padding: espaçamento interno nas bordas de um container. - componente: elemento reutilizável com múltiplas variantes (desktop/tablet/mobile). - breakpoint: ponto de mudança de layout (ex.: tablet, mobile) que adapta o design. - visible: propriedade para mostrar/ocultar elementos sem apagá-los.

Comentários

Descrição

Comentários

Eu mostro passo a passo como construir um menu profissional totalmente no Framer, sem precisar exportar do Figma. Começo dividindo o menu em partes (logo, itens, CTAs) e organizo tudo com stacks e uma grid para estabelecer limites e centralização. Ajusto alinhamentos, espaçamentos e cores apenas na stack principal para facilitar mudanças futuras. Em seguida transformo o menu em componente e crio variações para desktop, tablet e mobile, adaptando tamanhos, espaçamentos e ícones para cada breakpoint. Na versão mobile eu transformo o menu em vertical, configuro o botão de abrir/fechar e trato visibilidade e animação para abrir a lista de itens. Também ensino a usar absolute/relative com cuidado para centralizar corretamente, aplicar padding e radius e preservar consistência visual ao abrir e fechar. No fim você terá um menu responsivo, reutilizável como componente e com opções de CTAs adaptadas para cada tela. Termos técnicos: - stack: agrupamento em coluna/linha que organiza elementos dentro do Framer. - grid: área delimitadora que define onde o conteúdo fica centralizado e com largura máxima. - CTA: "call to action", botão de ação (ex.: criar conta, login). - fit / fill (fio): ajustes que fazem o conteúdo caber ou preencher o espaço na stack. - absolute / relative: modos de posicionamento; absolute posiciona fora do fluxo, relative mantém no fluxo. - padding: espaçamento interno nas bordas de um container. - componente: elemento reutilizável com múltiplas variantes (desktop/tablet/mobile). - breakpoint: ponto de mudança de layout (ex.: tablet, mobile) que adapta o design. - visible: propriedade para mostrar/ocultar elementos sem apagá-los.

Comentários
Physis
Physis
Physis
Especialista

Henrique Sabino

Wama e Elogiou

Olá 👋,

Aqui é o Will, em que posso ajudar?

Sugestões & Feedbacks