A navegação é fundamental em qualquer interface digital. Os Componentes Inteligentes nos permitem criar componentes de navegação interativos personalizados que funcionam perfeitamente com o resto do seu protótipo. Neste guia, abordaremos os conceitos de aninhamento de componentes, adição de eventos a elementos em um componente usando Variáveis de Evento e a passagem destes através dos seus componentes. Um dos principais benefícios de usar componentes aninhados é que ele fornece controle total sobre seus estados, como estados de hover exclusivos de elementos dentro de outro componente.

Começando no nível atômico

Framer permite criar componentes totalmente interativos e animados, e até permite que você aninhe 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, com suas próprias interações exclusivas. Nosso projeto conterá uma barra de navegação que inclui vários componentes aninhados, nomeadamente 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á como projetamos nossa barra de navegação. Por essa razão, um fluxo de trabalho ideal inclui começar com o componente aninhado 'mais profundo' e construir a partir daí.

Aninhando componentes

Uma vez que temos nossos dois componentes prontos, podemos começar a criar o componente no qual iremos aninhar esses. 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 do 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 conseguir tocar em 'Roupas' e navegar para uma nova Tela inteira. Se você conectar o componente usando o Conector de Prototipagem a 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, pois queremos acionar essa transição apenas a partir de um elemento específico. É aqui que as Variáveis de Evento entram, que são tipos especiais de Variáveis não ligadas a propriedades (como opacidade ou preenchimento), mas sim a eventos.