A navegação é fundamental em qualquer interface digital. Os Smart Components nos permitem criar componentes de navegação interativos personalizados que funcionam perfeitamente com o restante do seu protótipo. Neste guia, abordaremos os conceitos de aninhar componentes, adicionar eventos a elementos em um componente usando Variáveis de Evento e passar essas variáveis através dos seus componentes. Um dos principais benefícios do uso de componentes aninhados é que proporciona controle total sobre seus estados, como estados de hover únicos de elementos dentro de outro componente.

Começando no nível atômico

O Framer permite criar componentes totalmente interativos e animados, e até mesmo permite aninhar componentes dentro de outros componentes. Estamos construindo um componente de barra de navegação para um site que conterá dois tipos diferentes de componentes aninhados, cada um com suas próprias interações únicas. Nosso projeto terá uma barra de navegação que contém vários componentes aninhados, a saber, cinco itens de navegação e um componente de carrinho de compras. O design dos nossos componentes aninhados, o item da lista de navegação e o carrinho de compras, impactará a forma como projetamos nossa barra de navegação. Por este motivo, um fluxo de trabalho ótimo inclui começar com o componente aninhado 'mais profundo' e construir a partir daí.

Aninhando componentes

Assim que tivermos nossos dois componentes prontos, podemos começar a criar o componente no qual vamos aninhá-los. Desenhe sua barra de navegação, selecione-a na tela e clique na ferramenta Componente na Barra de Ferramentas. Para aninhar um componente diferente em nosso novo componente, basta arrastar qualquer outro componente para a Tela de Componente e colocá-lo dentro da sua barra de navegação projetada.

Acionando interações a partir da barra de navegação

De volta à tela principal, gostaríamos de poder tocar em 'Roupas' e navegar para uma nova tela inteira. Se você conectasse o componente usando o Conector de Prototipagem para uma nova tela, poderíamos configurar uma Interação. No entanto, isso seria acionado se tocássemos em qualquer lugar dentro do nosso componente. Isso não é o que queremos fazer, já que queremos acionar esta transição apenas a partir de um elemento específico. É aqui que entram as Variáveis de Evento, que são tipos especiais de Variáveis não ligadas a propriedades (como opacidade ou preenchimento), mas sim a eventos.