Démarrer et développer une carrière dans la conception Web

La navigation est essentielle dans toute interface numérique. Les composants intelligents nous permettent de créer des composants de navigation interactifs personnalisés qui fonctionnent parfaitement avec le reste de votre prototype. Dans ce guide, nous aborderons les concepts d'imbrication des composants, d'ajout d'événements à des éléments d'un composant à l'aide de variables d'événement et de transmission de ces événements à travers vos composants. L'un des principaux avantages de l'utilisation de composants imbriqués est qu'elle permet un contrôle total sur leurs états, tels que les états de survol uniques des éléments d'un autre composant.

À partir du niveau atomique

Framer vous permet de créer des composants entièrement interactifs et animés, et même d'imbriquer des composants dans d'autres composants. Nous développons actuellement un composant de barre de navigation pour un site web qui contiendra deux types différents de composants imbriqués, avec leurs propres interactions uniques. Notre projet comprendra une barre de navigation contenant divers composants imbriqués, à savoir cinq éléments de navigation et un composant « panier ». La conception de nos composants imbriqués, l'élément de liste de navigation et le panier, aura une incidence sur la conception de notre barre de navigation. C'est pourquoi un flux de travail optimal consiste à commencer par le composant imbriqué le plus « profond » et à construire à partir de là.

Composants imbriqués

Une fois nos deux composants prêts, nous pouvons commencer à créer le composant dans lequel nous allons les imbriquer. Dessinez votre barre de navigation, sélectionnez-la sur le canevas et cliquez sur l'outil Composant dans la barre d'outils. Pour imbriquer un autre composant dans notre nouveau composant, il suffit de faire glisser n'importe quel autre composant vers le canevas Composant et de le placer dans la barre de navigation que vous avez conçue.

Déclencher des interactions à partir de la barre de navigation

De retour sur la toile principale, nous aimerions pouvoir appuyer sur « Vêtements » et accéder à un tout nouvel écran. Si vous connectiez le composant à un nouvel écran à l'aide du connecteur de prototypage, nous pourrions configurer une interaction. Cependant, celle-ci serait déclenchée si nous appuyions n'importe où dans notre composant. Ce n'est pas ce que nous voulons, car nous souhaitons déclencher cette transition uniquement à partir d'un élément spécifique. C'est là qu'interviennent les variables d'événement, qui sont des types spéciaux de variables non liées à des propriétés (comme l'opacité ou le remplissage), mais plutôt à des événements.