WORKSHOP - Figma

In Figma kun je interactieve ontwerpen maken, zoals een dropdownmenu. Hiermee laat je gebruikers een keuze maken uit een lijst, bijvoorbeeld in een navigatiebalk of formulier. Door gebruik te maken van Components en Interactive Prototypes, kun je een dropdown laten openen en sluiten als iemand erop klikt. Zo breng je je ontwerp tot leven en test je hoe het er in de praktijk uit zou zien.

Na deze les kun je:

• Vertellen wat een dropdownmenu is en waarvoor het wordt gebruikt in een interactief ontwerp.

• Een component met meerdere varianten aanmaken in Figma.

• Met prototyping een klikbare dropdown maken die opent en sluit.

Je leert hoe je een dropdownmenu ontwerpt en interactief maakt met prototyping in Figma.

• Open Figma en maak een nieuw frame aan (bijv. desktopformaat).

• Ontwerp een knop met het label “Menu”. Gebruik bijvoorbeeld een rechthoek met afgeronde hoeken en tekst erin.

• Ontwerp een lijst met drie menu-items (zoals “Home”, “Over ons”, “Contact”) die onder de knop verschijnt. Zet dit in een aparte groep of frame.

• Selecteer zowel de knop als de dropdown-lijst en maak er een Component van (Right-click > Create Component).

• Maak een tweede variant van dit component aan (Right-click > Add Variant):

1. Variant 1 = gesloten menu (alleen de knop)

2. Variant 2 = geopend menu (knop + lijst zichtbaar)

• Ga naar het tabblad Prototype, klik op de knop in Variant 1 en maak een interactie:

  1. On Click → Change to Variant 2

  2. Stel bij “Animation” bijvoorbeeld Smart Animate in

• Doe hetzelfde andersom in Variant 2 zodat je het menu ook weer kunt sluiten.

• Klik op Present om je interactieve dropdownmenu te testen.

Dropdownmenu maken in Figma

Een dropdownmenu is een interactief element dat je vaak tegenkomt in navigatiebalken of formulieren. Het helpt om keuzes overzichtelijk te tonen zonder dat het hele scherm vol staat. In Figma kun je zo’n menu niet alleen ontwerpen, maar ook interactief maken met de functie Prototyping.

Om een dropdown te maken, gebruik je meestal:

• Components: hiermee maak je herbruikbare elementen, zoals knoppen en menu’s.

• Variants: verschillende versies van je component, bijvoorbeeld: open en gesloten.

• Prototype-interacties: hiermee geef je aan wat er gebeurt als je op een element klikt, zoals “verander naar variant 2”.

Zo boots je het gedrag van een echt menu na: klikken op de knop > lijst klapt uit > klikken buiten of opnieuw op de knop > lijst sluit weer.

Voordeel: je kunt het dropdownmenu testen alsof het een echte app of website is, zonder dat je hoeft te coderen.

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