Construindo um Componente de Navegação com Variáveis

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 restante do seu protótipo. Neste guia, abordaremos os conceitos de aninhamento de componentes, adição de eventos aos elementos em um componente usando Variáveis de Evento e passagem desses eventos através de seus componentes. Um dos principais benefícios do uso de componentes aninhados é que ele fornece controle total sobre seus estados, como estados únicos de hover dos elementos em outro componente.

Começando no nível atômico

O Framer permite que você crie 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 contém vários componentes aninhados, ou seja, cinco itens de navegação e um componente de carrinho de compras. O design de 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 esse motivo, um fluxo de trabalho ideal inclui começar com o componente aninhado 'mais profundo' e construir a partir daí.

Aninhamento de componentes

Depois de termos nossos dois componentes prontos, podemos começar a criar o componente no qual vamos aninhar esses. Desenhe sua barra de navegação, selecione-a no canvas e clique na ferramenta Component na Barra de Ferramentas. Para aninhar um componente diferente em nosso novo componente, basta arrastar qualquer outro componente para o Component Canvas e colocá-lo dentro da barra de navegação projetada.

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

De volta ao canvas principal, gostaríamos de poder tocar em 'Roupas' e navegar para uma nova tela inteira. Se você conectar o componente usando o Prototyping Connector 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, já que queremos acionar essa transição apenas a partir de um elemento específico. Aqui é onde entram as Variáveis de Evento, que são tipos especiais de Variáveis não anexadas a propriedades (como opacidade ou preenchimento), mas sim a eventos.