WORKSHOP - Figma

In Figma kun je realistische prototypes maken die lijken op echte websites of apps. Twee belangrijke functies daarbij zijn vertical scrolling en een sticky navigation menu.

Met vertical scrolling laat je zien hoe een gebruiker naar beneden kan scrollen om meer content te bekijken. Dit is handig bij lange pagina’s of mobiele ontwerpen.

Een sticky navigation menu blijft bovenaan het scherm zichtbaar tijdens het scrollen. Zo heeft de gebruiker altijd toegang tot de belangrijkste knoppen of links. In Figma kun je dit nabootsen door elementen vast te zetten met “Fix position when scrolling”.

Samen zorgen deze functies ervoor dat je ontwerp er niet alleen mooi uitziet, maar ook werkt zoals in een echte toepassing.

Na deze les kun je:

• Vertellen wat vertical scrolling is en waarvoor het wordt gebruikt in interactieve ontwerpen.

• Een frame instellen om verticale scroll te ondersteunen in Figma.

• Zelf een ontwerp maken dat reageert op scrollgedrag, zoals in een echte app of website.

• Je weet wat een sticky navigation menu is en waarom het handig is voor gebruikers.

• Je kunt elementen in Figma vastzetten met “Fix position when scrolling”.

• Je kunt een ontwerp maken waarin de navigatie zichtbaar blijft tijdens het scrollen.

Je leert hoe je een lange pagina maakt die verticaal scrollt, met een navigatiebalk die bovenaan blijft staan.

• Open Figma en maak een nieuw frame aan (bijvoorbeeld iPhone 13 of Desktop formaat).

• Bovenaan het frame ontwerp je een navigatiebalk met bijvoorbeeld:

• Een logo of titel

• 2 tot 4 menu-items (zoals "Home", "Over ons", "Contact")

• Selecteer de navigatiebalk en groepeer of plaats deze in een apart frame. Vink in het rechterpaneel aan:

  1. Fix position when scrolling

• Vergroot de hoogte van je hoofdframe tot ± 2000 pixels, zodat er genoeg ruimte is om te scrollen.

• Vul de rest van het frame met inhoud zoals afbeeldingen, tekstblokken, knoppen, enz. Verdeel dit in duidelijke secties (bijv. "Intro", "Diensten", "Portfolio", "Contact").

• Controleer of Vertical Scrolling aanstaat:

• Selecteer het frame

• Ga naar het tabblad Prototype

• Zet Scrolling behaviour op Vertical Scrolling

• Klik op Present om je ontwerp te testen.

  1. Je moet kunnen scrollen

  2. De navigatiebalk moet bovenaan blijven staan

Vertical Scrolling en Sticky Navigation in Figma

In interactieve ontwerpen is het belangrijk om realistische gebruikerservaringen na te bootsen. Twee veelgebruikte technieken hierbij zijn vertical scrolling en sticky navigation. Deze worden toegepast in vrijwel alle moderne websites en apps.

1. Vertical Scrolling

Vertical scrolling is het scrollen van boven naar beneden om meer inhoud te zien. Dit is vooral belangrijk bij lange pagina’s, bijvoorbeeld op mobiele telefoons, waar de beschikbare ruimte beperkt is. In Figma kun je dit simuleren door een frame hoger te maken dan het schermformaat en de scrolling behavior op Vertical te zetten. Tijdens het presenteren kun je dan naar beneden scrollen, net zoals een gebruiker dat zou doen op een echte website of app.

Let op: alleen het hoofdframe moet scrollbaar zijn. Elementen zoals navigatiebalken of footers kunnen apart worden ingesteld om vast te blijven staan.

2. Sticky Navigation

Sticky (of "fixed") navigation verwijst naar een navigatiebalk die op een vaste positie blijft, meestal bovenaan het scherm, terwijl de gebruiker door de rest van de content scrollt. Dit is handig bij lange pagina’s, omdat het zorgt voor constante toegang tot belangrijke onderdelen van de site, zoals het menu of de zoekfunctie. In Figma stel je dit in door het betreffende element te selecteren en “Fix position when scrolling” aan te vinken in het rechterpaneel. Hierdoor blijft het tijdens het scrollen zichtbaar op zijn plek.

Door beide functies te combineren in je ontwerp, krijg je een interactief prototype dat functioneel en professioneel oogt. Het helpt je niet alleen om beter na te denken over de gebruikerservaring, maar maakt het ook makkelijker om je ontwerp overtuigend te presenteren aan anderen.

• SoftTalk: https://youtu.be/RqL0SqKz400