Een carrière in webdesign starten en uitbouwen

Navigatie is essentieel binnen elke digitale interface. Met Smart Components kunnen we aangepaste interactieve navigatiecomponenten maken die perfect samenwerken met de rest van uw prototype. In deze handleiding behandelen we de concepten van het nesten van componenten, het toevoegen van gebeurtenissen aan elementen in een component met behulp van gebeurtenisvariabelen en het doorgeven van deze gebeurtenissen aan uw componenten. Een van de belangrijkste voordelen van het gebruik van geneste componenten is dat u volledige controle hebt over de statussen ervan, zoals unieke hover-statussen van elementen binnen een andere component.

Beginnend op atomair niveau

Met Framer kunt u volledig interactieve en geanimeerde componenten maken en zelfs componenten binnen andere componenten nesten. We bouwen een navigatiebalkcomponent voor een website die twee verschillende soorten geneste componenten zal bevatten, met hun eigen unieke interacties. Ons project zal een navigatiebalk bevatten met verschillende geneste componenten, namelijk vijf navigatie-items en één winkelwagencomponent. Het ontwerp van onze geneste componenten, het navigatielijstitem en de winkelwagen, zal van invloed zijn op hoe we onze navigatiebalk ontwerpen. Om deze reden omvat een optimale workflow dat u begint met de 'diepste' geneste component en van daaruit verder bouwt.

Onderdelen in elkaar passen

Zodra we onze twee componenten klaar hebben, kunnen we beginnen met het maken van de component waarin we deze zullen nesten. Teken uw navigatiebalk, selecteer deze op het canvas en klik op het Component-gereedschap in de werkbalk. Om een andere component in onze nieuwe component te nesten, sleept u gewoon een andere component naar het Component Canvas en plaatst u deze in uw ontworpen navigatiebalk.

Interacties activeren vanuit de navigatiebalk

Terug op het hoofdscherm willen we op 'Kleding' kunnen tikken en naar een geheel nieuw scherm kunnen navigeren. Als je de component met behulp van de Prototyping Connector aan een nieuw scherm zou koppelen, zouden we een interactie kunnen instellen. Dit zou echter worden geactiveerd als we ergens binnen onze component tikken. Dit is niet wat we willen, omdat we deze overgang alleen vanaf een specifiek element willen activeren. Hier komen gebeurtenisvariabelen om de hoek kijken. Dit zijn speciale soorten variabelen die niet aan eigenschappen (zoals dekking of vulling) zijn gekoppeld, maar aan gebeurtenissen.