Handleiding voor prototyping in Figma

Voordat je begint

Wie kan deze functie gebruiken?

Ondersteund voor elk team of abonnement.

Iedereen met toegang Kan bewerken kan prototypes maken.

Iedereen met toegang Kan bekijken kan prototypes afspelen in de Presentatieweergave.

Met de prototypingfuncties van Figma kun je interactieve stromen maken die verkennen hoe een gebruiker met je ontwerpen kan omgaan.

Prototypes zijn een fantastische manier om:

• Voorbeeldinteracties en -gebruikersstromen
• Ideeën delen en itereren
• Feedback krijgen van medewerkers
• Test interacties met gebruikers
• Ontwerpen presenteren aan belanghebbenden

Bekijk onze video over prototyping hieronder. Of bekijk onze Playlist prototype en samenwerking op YouTube.

Stromen en beginpunten

Met prototyping in Figma kun je meerdere stromen voor je prototype op één pagina maken om een voorbeeld van de volledige reis en ervaring van een gebruiker door je ontwerpen te bekijken.

Een stroom is het netwerk van frames en verbindingen op een enkele pagina. Een prototype kan de volledige reis van een gebruiker door je app of website in kaart brengen, of het kan zich richten op een specifiek segment via een eigen stroom. Bijvoorbeeld: je prototype dekt alle mogelijke interacties op een e-commerce site. Binnen het prototype heb je stromen voor het aanmaken van een account, het toevoegen van items aan een winkelwagentje en het afrekenen.

Figma creëert een startpunt voor de stroom wanneer je je eerste verbinding tussen twee frames toevoegt. Er zijn meer manieren om een startpunt voor een stroom aan je prototype toe te voegen:

• Met het startframe geselecteerd, klik je op in het gedeelte Stroomstartpunt van de rechter zijbalk.
• Klik met de rechtermuisknop op het frame en klik vervolgens op Startpunt toevoegen.
• Dupliceer een frame met een bestaand startpunt.

Wanneer het tijd is om je ontwerpen te testen, kun je het hele prototype delen of de link naar een startpunt van de flow delen.

Lees verder over startpunten en stromen →

Verbindingen maken

1. Selecteer het actieve deel voor de verbinding.
2. Klik op om de verbinding tot stand te brengen.
3. Sleep naar de bestemming.
4. Als er geen bestaande verbindingen zijn, stelt Figma het eerste frame als startpunt in.

Interacties en animaties aanmaken

1. Open het tabblad Prototype in de rechter zijbalk.
2. Voeg Interacties toe
3. Stel interactiedetails in
4. Pas een animatie toe.
5. Bekijk een Voorbeeld van je animatie

Prototype-instellingen aanpassen

1. Selecteer een Apparaat en Model
2. Bekijk een Voorbeeld van je prototype
3. Selecteer een achtergrondkleur
4. Stel het startframevan het prototype in

Meer informatie over prototyping

Aan de slag

• Maak prototype-interacties en animaties
• Selecteer een startpunt voor je prototype
• Personaliseer je prototype-apparaat
• Prototype acties, triggers en animaties

Geavanceerde interacties

• Maak overlays in je prototypes
• Maak geavanceerde animaties met Smart Animate
• Maak een prototype van scroll-interacties met overloopgedrag
• Voeg video toe aan prototypes
• Voeg geanimeerde GIF's toe aan prototypes.
• Gebruik variabelen in prototypes
• Gebruik expressies in prototypes
• Meerdere acties en voorwaarden
• Variabele modi in prototypes

Delen en samenwerken

• Bekijk prototypeverbindingen
• Stel presentatieweergaveopties voor het prototype in
• Deel je prototype
• Prototypes bekijken op een mobiel apparaat
• Geef feedback op prototypes met reacties

Woordenlijst

• Een Actief deel is de plaats waar de interactie plaatsvindt. Elk object binnen het originele frame kan een actief deel zijn, zoals een link, knop, afbeelding of pictogram.
• Verbindingen zijn de blauwe pijlen of "noodles" die het actieve deel met de bestemming verbinden. We passen de interactie- en animatie-instellingen toe via de verbinding.
• Een stroom is het netwerk van verbonden frames die een pad vormen door een prototype. Elke stroom heeft zijn eigen startpunt. Je kunt meerdere stromen hebben binnen een prototype.
• Het startpunt is het eerste frame van een stroom. Stel meerdere startpunten in om verschillende stromen van het prototype te laten zien in de Presentatieweergave.
• De trigger bepaalt welk type interactie met het actieve deel ervoor zorgt dat het prototype doorgaat. Dit kan een muis- of aanraakinteractie zijn, zoals tikken, slepen, klikken, zweven, enz.
• De bestemming is waar de transitie eindigt. Dit moet een frame op het hoogste niveau zijn – een frame dat direct aan het canvas wordt toegevoegd – en niet een object binnen een frame. Als we van A naar B willen, is A het actieve deel en B de bestemming.
• De actie bepaalt het type voortgang dat plaatsvindt in het prototype. De actie kan bijvoorbeeld zijn om naar een ander frame te navigeren of een externe URL te openen.
• De animatie-instellingen bepalen hoe het prototype van het ene frame naar het andere beweegt. Je kunt het type animatie, de snelheid en de richting bepalen.
• Een overgang is een type animatie. Dit bepaalt hoe de actie naar de bestemming beweegt.
• De richting bepaalt de richting waaruit de overgang komt. Kies tussen links, rechts, boven of onder.
• De duur bepaalt hoe lang het duurt om de animatie te voltooien. Hoe korter de duur, hoe sneller de overgang. Selecteer een duur tussen de 1 ms en 10.000 ms (10 seconden).
• Versnelling beïnvloedt de versnelling van de animatie—of deze langzaam of snel moet beginnen. Hiermee kun je animaties maken die natuurlijker aanvoelen.
• Deklagen zijn frames die boven het huidige scherm of kader verschijnen. Je kunt deklagen gebruiken om tooltips, interactieve menu's, waarschuwingen of bevestigingen te maken.
• Met overloopgedrag kun je bepalen hoe je prototype reageert op scrollen. Hiermee kun je meer geavanceerde gebruikerinteracties maken, zoals carrousels, galerijen of interactieve kaarten.
• Kies welk apparaat wordt getoond wanneer je je prototype presenteert. Definieer zowel het apparaat als het model.
• Via de achtergrondkleur kun je de achtergrondkleur van je prototype instellen.
• Als je een prototype hebt met staande en liggende frames, kun je een stand kiezen. De stand wordt ingesteld voor het gehele prototype. Het is niet mogelijk om binnen een prototype te wisselen tussen portret- en landschapsmodus.
• Een voorbeeld laat zien hoe iets eruit zal zien of zal werken in het prototype. We tonen voorbeelden van zowel animaties als prototype-apparaatinstellingen.