Gebruik variabelen in prototypes

Voordat je begint

Wie kan deze functie gebruiken?

Beschikbaar op elk betaald abonnement.

Iedereen met het toegangsrecht kan bewerken tot een bestand kan prototypes maken.

Iedereen met de toegangsrechten kan bekijken of kan alleen prototypes bekijken tot een bestand kan prototypes bekijken.

In Figma zijn variabelen opgeslagen waarden die ontwerpattributen of opgeslagen toestanden vertegenwoordigen. Dit kunnen string-, getal-, kleur- of booleaanse waardetypen zijn.

Je kunt de waarden van variabelen instellen en wijzigen met prototype-acties, zodat je meeslepende prototypes kunt maken die dynamisch veranderen op basis van gebruikersselectie, met slechts een paar eenvoudige frames en interacties. Dit betekent dat je prototype-acties kunt gebruiken om:

• Tekstinhoud bij te werken met stringvariabelen
• Objectdimensies, hoekradius of automatische lay-outeigenschappen met numerieke variabelen te wijzigen
• De zichtbaarheid van lagen met booleaanse variabelen in- of uit te schakelen

Om van start te gaan met variabelen in prototypes, stel je je variabelen in en gebruik je vervolgens de actie Variabele instellen om je variabelewaarden te wijzigen of aan te passen.

Als je het gebruik van variabelen en prototypes eenmaal onder de knie hebt, probeer dan enkele geavanceerdere functies om hun kracht nog verder te vergroten:

• Expressies: Manipuleer variabelen met basisbewerkingen, zodat je geavanceerdere prototypes met flexibele waarden kunt bouwen
• Meerdere acties en voorwaarden: Gebruik if/else-instructies om te controleren of aan een voorwaarde is voldaan voordat je acties uitvoert, en stapel een onbeperkt aantal acties op een enkele trigger

Zijn variabelen nieuw voor je? Lees verder over variabelen in Figma →

Variabelen instellen

Voordat je met variabelen kunt prototypen, moet je:

1. Variabelen aanmaken: Ontdek hoe je verzamelingen variabelen kunt aanmaken en ordenen →
2. Variabelen toepassen: Ontdek hoe je variabelen toepast op tekstinhoud, objectafmetingen, laagzichtbaarheid en meer →

Waarden van variabelen instellen

Zodra je variabelen hebt gemaakt en toegepast in je ontwerp, kun je ze gaan gebruiken met prototypes.

Elke prototype-interactie heeft een trigger (wat zorgt ervoor dat het prototype doorgaat) en een of meer acties (wat er gebeurt als gevolg van de trigger).

Met de actie Variabele instellen kun je de waarde van een variabele instellen of wijzigen als gevolg van een prototype-trigger.

Pas als volgt de actie Variabele instellen toe op een prototype-interactie:

1. Maak een prototype-interactie.
2. Navigeer naar het paneel interactiedetails en selecteer een trigger uit het keuzemenu.
3. Selecteer in het keuzemenu Acties Variabele instellen.
4. Selecteer in het keuzemenu Doelvariabele kiezen de variabele waarvoor je een nieuwe waarde wilt instellen.
5. Voer in het veld Expressie schrijven een nieuwe waarde voor de variabele in. Het nieuwe waardetype moet overeenkomen met het type variabele dat je aan het wijzigen bent. Als je bijvoorbeeld een numerieke variabele hebt geselecteerd, moet de nieuwe waarde ook een getal zijn.
   • Stringwaarden: Voer een willekeurige tekstwaarde in (tussen aanhalingstekens) of selecteer een willekeurige stringvariabele uit het selectiepaneel.
   • Numerieke waarden: Voer een willekeurige numerieke waarde in of selecteer een willekeurige numerieke variabele uit het selectiepaneel
   • Booleaanse waarden: Voer true of false in, of selecteer een booleaanse variabele uit het selectiepaneel
   • Kleurwaarden: Voer een willekeurige hexcode in of selecteer een hexcode uit de kleurenkiezer
6. Speel je prototype af om de interactie te testen.

Prototypen met variabelen in de praktijk

Zodra je de basis onder de knie hebt, kun je prototypes en variabelen op allerlei manieren gebruiken.

Gebruik variabelen met componentvarianten

Je kunt variabelen toepassen op componentvarianten. Hiermee kun je je component automatisch bijwerken met de actie Variabele instellen.

1. Maak een componentenset met minstens twee varianten. (Maak bijvoorbeeld een componentenset die een varianteigenschap "vorm" heeft met de waarden "cirkel" en "vierkant").
2. Plaats een exemplaar van een variant op een frame.
3. Wijs een variabele toe aan het exemplaar. De waarde van de variabele moet overeenkomen met een waarde van een varianteigenschap. (Wijs bijvoorbeeld een variabele shapeType met een standaardwaarde "cirkel" toe aan het exemplaar).
   1. Klik op het exemplaar om het te selecteren.
   2. Beweeg je muis vanaf de rechter zijbalk naar de rechterkant van een varianteigenschap en klik op Variabele toewijzen.
   3. Selecteer de variabele die je aan de eigenschap wilt koppelen.
4. Maak een interactie op elk object binnen het frame dat de actie Variabele instellen gebruikt. Wijzig de waarde van de variabele zodat deze overeenkomt met de waarde van de ongebruikte varianteigenschap. (Stel bijvoorbeeld de waarde van de variabele shapeType in op "vierkant").
5. Speel je prototype af om de interactie te testen. Wanneer de interactie wordt geactiveerd en de variabele verandert, wordt de variant ook bijgewerkt.

Gebruik variabelen met interactieve componenten

Net als bij het gebruik van variabelen met componentvarianten, kun je variabelen toepassen op interactieve componenten.

Wanneer je vervolgens op een interactief onderdeel klikt:

• De variantupdates
• De variabele wordt bijgewerkt en alle andere elementen die aan diezelfde variabele zijn gekoppeld, worden vervolgens ook bijgewerkt.

Om interactieve componenten met variabelen te gebruiken:

1. Maak een interactieve componentenset. (Maak bijvoorbeeld een interactieve knopcomponent die een varianteigenschap "geklikt" heeft met de waarden "true" en "false").
2. Plaats een exemplaar van een variant uit de interactieve componentenset in een frame.
3. Wijs een variabele toe aan het exemplaar van de interactieve component. De waarde van de variabele moet overeenkomen met een waarde van een varianteigenschap. (Wijs bijvoorbeeld een booleaanse variabele circleVisibility met een standaardwaarde "false" toe aan het exemplaar).
   1. Selecteer het exemplaar.
   2. Selecteer in de rechterzijbalk het keuzemenu voor een van de varianteigenschappen.
   3. Selecteer Variabele toewijzen.
   4. Klik om een variabele te selecteren die aan de eigenschap moet worden gekoppeld.
4. Speel je prototype af om de interactie te testen. Wanneer de interactie wordt geactiveerd en de component wordt gewijzigd, verandert de waarde van de variabele mee. Dit betekent dat als je diezelfde variabele aan andere waarden hebt gekoppeld, deze ook worden bijgewerkt.