Nessa aula eu mostro passo a passo como construir botões limpos e performáticos no Framer, evitando a bagunça de múltiplas versões que prejudicam projetos grandes. Começo criando o botão como um frame transformado em stack, ajustando fonte, tamanho do ícone, gap e radius para manter proporção e consistência visual. Em seguida transformo o conjunto em componente e adiciono apenas as variáveis essenciais: texto, mostrar ícone (visibilidade), escolha do ícone, cor de fundo, cor do texto e borda. Também crio variáveis para link, new tab e smooth quando necessário, mas evito inflar a lista de variáveis para não complicar a interface de edição. Foco em performance: uso apenas uma leve opacidade no hover (atalho 8) e não adiciono efeitos extras como saturate ou outros effects que acrescentam código em todas as páginas. Quando precisar de um botão com degradê, crio uma versão específica com background fixo para não poluir o componente padrão. O resultado: dois tipos padrões que servem para todo o site, fáceis de editar e que atualizam globalmente quando altero padding, fonte ou cor, economizando tempo e evitando problemas de sincronização entre páginas. Termos técnicos: - componente: bloco reutilizável que representa o botão pronto para usar; - stack: organização que alinha elementos (texto e ícone) automaticamente; - padding: espaço interno entre conteúdo e borda do botão; - radius: arredondamento dos cantos do botão; - hover: efeito quando o cursor passa sobre o botão; - opacity (opacidade): transparência aplicada no hover; - effects/saturate: filtros visuais que aumentam o código e podem afetar performance; - new tab/smooth: configurações de link para abrir nova aba ou rolagem suave; - degradê: gradiente de cores no background.