Nesta aula eu mostro, passo a passo, como montar um navbar responsivo no Framer usando componentes já prontos. Primeiro crio frames para logo, menus e botões, transformo grupos em stacks e crio um container com max-width de 1216px para controlar o limite do menu. Ajusto paddings, gaps e fontes, reaproveito botões como componentes (Naked) e adiciono links e hover. Em seguida crio duas variantes do navbar: Full (padrão) e Scroll (após rolagem), onde aplico cor com opacidade 0 para manter a cor base e um Background Blur para o efeito de vidro ao rolar. Depois eu preparo a versão mobile: transformo stacks para orientação vertical, posiciono o logo em absolute, crio o ícone de menu que vira um X para fechar e ajusto espaçamentos. Faço o navbar um template para reutilização em outras páginas e adiciono um pequeno trigger invisível (1px) que aciona a troca de variante quando a página é rolada. Por fim testo incluindo seções e verifico o comportamento responsivo e a troca de variantes ao passar pelo trigger. Termos (explicação breve): - Frame: área/container que agrupa elementos. - Stack: layout que organiza itens em linha ou coluna com gaps automáticos. - Container / max-width: limite de largura do conteúdo (ex.: 1216px). - Component: elemento reutilizável. - Variant: versão do componente (ex.: Full, Scroll). - Template: página com partes fixas reutilizáveis. - Absolute / Fixed / Fill: modos de posicionamento e dimensão. - Padding / Gap: espaçamento interno e entre elementos. - Z-index: ordem de empilhamento das camadas. - Hover: efeito ao passar o mouse. - Background Blur: desfoque de fundo para efeito vidro. - Trigger: elemento que ativa uma ação ao entrar em view.