Interactie [Figma]

Doel van deze les: In deze les leer je hoe je een statisch app-design omzet naar een werkend prototype. Je voegt micro-interacties toe aan knoppen, richt schermnavigatie in en bouwt een uitschuifmenu door middel van een overlay.

Volg eerst de stappen in een nieuw document zodat je leert hoe het maken van overlays, menu's en knoppen werkt. Maak daarna de opdracht,

Stap 1: Componenten met meervoudige statussen (Interactive Components)

Om te zorgen dat knoppen reageren op de muis, maak je gebruik van componenten met verschillende statussen (variants).

1. Teken de knop: Maak op het werkveld een rechthoek met tekst of een icoon.

2. Maak er een component van: Selecteer de knop en maak hier een component van via de sneltoets Ctrl + Alt + K (Windows) of Cmd + Option + K (Mac). De randen worden paars.

3. Voeg varianten toe: Klik in het rechterpaneel bij Properties op het plusje naast Variant. Er ontstaat een component set (de container). Voeg een tweede variant toe:

   • Variant 1: Standaardstatus (Default).

   • Variant 2: Hover-status (wanneer de muis zich boven de knop bevindt). Pas hier de kleur of grootte aan.
     (Tip: om de knop vanuit het midden te laten schalen, gebruik je de K-toets of stel je de constraints in op Center).

4. Instellen in Prototype-modus: Schakel rechtsboven over naar het tabblad Prototype (Shift + E).

   • Van Variant 1 naar Variant 2: Sleep een verbinding van de eerste naar de tweede variant. Stel de instelling in op While hovering en de actie op Change to (met animatie Smart Animate).

Optie voor verdieping: Wil je de knop nóg levendiger maken? Maak dan in je component set ook een extra variant aan voor wanneer de knop wordt ingedrukt, en koppel deze met de trigger On click.

Testen: Sleep de component set naar het lege werkveld. Teken een nieuw test-frame (F), ga naar het tabblad Assets linksboven, sleep een kopie van de knop in dat frame en open de presentatiemodus.

Stap 2: Navigeren naar een ander scherm

Om door te klikken naar een volgende pagina binnen het prototype:

1. Plaats een tweede scherm: Zorg dat er een tweede app-scherm (Frame) aanwezig is op het canvas.

2. Koppel de knop:

   • Open de Prototype modus (Shift + E).

   • Selecteer de knop op het hoofdscherm en sleep de verbinding naar het tweede app-scherm.

3. Instellingen:

   • Zet de actie op Navigate to.

   • Kies bij animatie voor Smart Animate of Slide in voor een vloeiende overgang.

Stap 3: Een uitschuifmenu bouwen (Overlays)

Voor het tonen van een menu dat over de inhoud heen schuift:

1. De menuknop: Zorg dat er op het hoofdscherm een icoon of knop aanwezig is die als trigger dient.

2. Het menu-frame: Teken ergens los op het canvas een nieuw Frame dat smaller is dan het basisscherm (bijvoorbeeld een breedte van 300 pixels). Plaats hier de gewenste menu-items in.

3. Transparante achtergrond: Selecteer het menu-frame, ga in het rechterpaneel naar Fill, en zet de waarde op 0% zodat de achtergrond van het frame transparant wordt.

4. Koppel het menu:

   • Open de Prototype modus (Shift + E).

   • Sleep een verbinding van de menuknop op het hoofdscherm naar het nieuwe menu-frame.

5. Overlay-instellingen:

   • Zet de actie op Open overlay.

   • Overlay position: Kies de gewenste positie (bijvoorbeeld Top left of Top right).

   • Vink Close when clicking outside aan.

   • Vink Add background behind overlay aan en stel deze in op 40% zwart.

   • Animation: Selecteer Move In in de juiste richting.

Opdracht

Maak de opdracht in de style van jouw Event-Space opdracht. Maak dus je verder af met deze nieuw aangeleerde technieken. 

1. Maak minimaal één interactieve component-knop met een werkende hover-variant.

2. Koppel een knop aan een volgend scherm met de Navigate to functie.

3. Ontwerp een transparant uitschuifmenu

4. Test het prototype in de presentatiemodus.