Começar e desenvolver uma carreira em Web Design

A navegação é fundamental em qualquer interface digital. Os Componentes Inteligentes permitem-nos 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 num componente usando Variáveis de Evento e passagem desses eventos pelos seus componentes. Um dos principais benefícios do uso de componentes aninhados é que eles fornecem controle total sobre seus estados, como estados exclusivos de foco 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 aninhar componentes dentro de outros componentes. Estamos a construir um componente de barra de navegação para um site que conterá dois tipos diferentes de componentes aninhados, com as suas próprias interações exclusivas. O nosso projeto conterá uma barra de navegação com 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, terá impacto na forma como projetamos a 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í.

Componentes aninhados

Assim que tivermos os nossos dois componentes prontos, podemos começar a criar o componente no qual os aninharemos. Desenhe a sua barra de navegação, selecione-a na tela e clique na ferramenta Componente na barra de ferramentas. Para aninhar um componente diferente no nosso novo componente, basta arrastar qualquer outro componente para a tela do componente e colocá-lo dentro da 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 tela totalmente nova. Se ligássemos o componente usando o Conector de Prototipagem a um novo ecrã, poderíamos configurar uma Interação. No entanto, isso seria acionado se tocássemos em qualquer lugar dentro do nosso componente. Não é isso que queremos fazer, pois queremos acionar essa 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.