Eu mostrei passo a passo como montar o footer do site no Framer, começando pela estrutura externa (frames e stacks) e definindo orientação, limites e tamanhos. Configurei o max-width em 1216px para respeitar a grid do layout e usei 92% de largura para manter espaçamento nas laterais em telas menores — assim garante alinhamento sem depender de margens fixas. Transformei frames em stacks, ajustei alturas (ex.: 707px e 86px), apliquei borda superior, organizei texto e o botão “voltar ao topo”, troquei ícones por vetores do Framer e padronizei fontes e cores conforme o design. Também agrupei ícones sociais dentro de stacks para permitir links, defini larguras fixas para colunas de cards (210px) e limites máximos (max-width) para evitar que elementos estourem o layout. Limpei resíduos do Figma (cores e fontes inconsistentes), padronizei fill/fit/fixed onde necessário e ajustei espaçamentos (gaps e padding). Por fim criei o footer como componente e adicionei ao layout template para reaproveitamento — isso facilita criar versões tablet e mobile depois. A versão desktop ficou finalizada e pronta para testes. Termos técnicos (explicação rápida): - stack: contêiner com auto layout que organiza elementos em coluna ou linha. - frame: bloco/caixa que contém elementos (pode virar stack). - max-width: largura máxima que um elemento pode alcançar (em px). - fill / fit / fixed / relative: modos de dimensionamento/alinhamento dentro do auto layout. - auto layout: recurso que posiciona e redimensiona elementos automaticamente com regras (gap, padding, alignment). - SVG / vetor: formato de imagem vetorial (ícones escaláveis). - breakpoint: ponto de corte de largura onde o layout muda para outra versão (tablet/mobile). - componente: elemento reutilizável (ex.: footer) que facilita variações. - template de layout: modelo aplicado em todas as páginas (header/footer fixos). - Figma / Framer: ferramentas de design; Figma é editor de design, Framer é ferramenta que gera protótipos/website com auto layout.