Eu mostro como identificar no Figma os elementos que se repetem e transformá-los em componentes no Framer para ganhar consistência e rapidez. Comecei pelo botão — copiei do Figma, ajustei largura/altura e padding, criei o componente e adicionei variáveis para cor, texto e ícone. Configurei o gap entre ícone e texto, escolhi biblioteca de ícones e fiz variantes como Default e Naked, além de definir hover (sombra/opacidade) e a possibilidade de borda. Organizei o botão dentro de uma pasta Base para facilitar o reuso. Em seguida, reproduzi a Caption e um Card principal: substituí vetores do Figma por ícones da biblioteca, defini tamanhos e cores, usei frames com radius para bordas arredondadas, e ajustei propriedades responsivas (fill/fit) para que o card funcione bem em mobile. Por fim, limpei assets desnecessários, nomeei layers e agrupei componentes em pastas (Base, Cards) — a próxima aula será dedicada a montar o menu completo. Termos importantes (explicação rápida): - Figma: ferramenta de design para interfaces onde criamos telas e componentes. - Framer: ferramenta para transformar designs em componentes interativos e protótipos funcionais. - Componente / componentizar: elemento reaproveitável (botão, card) que se cria uma vez e usa várias vezes. - Padding: espaço interno entre o conteúdo do elemento e sua borda. - SVG: formato vetorial de imagem (ícones) que pode ser editado. - Hover: estado visual quando o cursor passa sobre um elemento. - Gap: espaçamento entre elementos internos (ex.: ícone e texto). - Opacity: transparência de um elemento (0 a 1). - Variant: variação de um componente (ex.: default, hover, naked). - Fill / Fit / Fixed: modos de dimensionamento — fill preenche, fit ajusta ao conteúdo, fixed tem tamanho fixo. - Overflow hidden: esconde o que ultrapassa a caixa do elemento.