Gebruik variabelen in prototypes – Dutch (Netherlands)

Voordat je begint

Wie kan deze functie gebruiken?

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

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

Lees verder over variabelen in Figma.

Probeer het uit

Wil je nog meer oefenen? Bekijk het bestand testomgeving voor geavanceerd prototyping.

Op zoek naar meer voorbeelden van hoe je variabelen kunt gebruiken in prototypes? Bekijk nog meer voorbeelden van geavanceerde prototyping.

Variabelen instellen

Voordat je met variabelen kunt prototypen, moet je:

Variabelen aanmaken: Leer hoe je verzamelingen van variabelen kunt maken en ordenen.
Variabelen toepassen: Leer 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:

Maak een prototype-interactie.
Navigeer naar het Interactie-venster en selecteer een trigger uit het keuzemenu.
Selecteer in het keuzemenu Actie Variabele instellen.
Selecteer in het keuzemenu Doel de variabele waarvoor je een nieuwe waarde wilt instellen.
Voer in het veld Waarde een nieuwe waarde in voor de variabele. 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
Speel je prototype af om de interactie te testen.

Een ontwerp met twee frames. Een prototype-actie wordt ingesteld op een afbeelding in het eerste frame. Wanneer op de afbeelding wordt geklikt, wordt de waarde van de variabele "profileName" bijgewerkt en navigeert het prototype naar het volgende frame.

Opmerking:

Hebben je variabelen meerdere modi? Lees verder over waarden van variabelen instellen op specifieke moduswaarden.

Tip:

Gebruik expressies om variabelen te manipuleren met bewerkingen. Je kunt bijvoorbeeld basisberekeningen uitvoeren op numerieke variabelen, meerdere stringvariabelen samenvoegen of booleaanse expressies gebruiken.

Probeer het uit

Laten we een verzameling variabelen maken met de titel "Vormen". Deze collectie zal één stringvariabele bevatten die de naam van de vorm vertegenwoordigt.

Deselecteer alle items op het canvas, zoek vervolgens het gedeelte Lokale variabelen in de rechterzijbalk en klik op Variabelen openen.
Klik op Variabele maken en selecteer String.
Voer in de kolom Naam "shapeName" in.
Voer in de kolom Waarde, "cirkel" in.

Nu kun je de variabele shapeName toepassen op je ontwerp. Voor dit voorbeeld hebben we een eenvoudig ontwerp gemaakt dat een kader bevat met twee vormen (een cirkel en een vierkant) en twee tekstlagen. We willen de variabele shapeName koppelen aan de onderste tekstlaag, zodat deze verandert op basis van de geselecteerde vorm.

Maak het hieronder afgebeelde ontwerp opnieuw. Voeg een ellipsobject, een rechthoekobject en twee tekstlagen toe aan een frame. Voer "Je keuze:" in als inhoud van de eerste tekstlaag.
Klik erop om de onderste tekstlaag op je frame te selecteren.
Ga naar het tabblad Design in de rechter zijbalk, zoek de sectie Tekst en klik op Variabele toepassen.
Selecteer de variabele shapeName uit het selectiepaneel voor variabelen om deze toe te passen op de tekstinhoud.

Laten we nu een interactie toevoegen met een actie Variabele instellen.

Selecteer het ellipsobject.
Schakel in de rechter zijbalk naar het tabblad Prototype. Klik in de sectie Interacties op het plusteken om een nieuwe interactie toe te voegen.
Maak in het modale venster Interactie een interactie met een trigger Bij tikken/Bij klikken en de actie Variabele instellen.
Selecteer de variabele shapeName uit het keuzemenu Doel. Stel in het veld Waarde de nieuwe waarde in op "cirkel".
Herhaal stappen 1-4 voor het rechthoekobject. Stel deze keer de variabele shapeName in op "vierkant".

Er is een cirkelobject geselecteerd op het frame, met het Interactiemodaal geopend. Er is een interactie ingesteld: Trigger is "Bij tikken", Actie is "Variabele instellen", Doel is "shapeName" en Waarde is "cirkel".

Nu ben je klaar om je prototype af te spelen om het te testen. Wanneer je op elk vormobject klikt, wordt de tekstlaag automatisch bijgewerkt op basis van de nieuwe waarde van de variabele. Het prototype wordt afgespeeld. Wanneer het ellipsobject is geselecteerd, wordt de onderste tekstlaag bijgewerkt naar een cirkel. Wanneer het vierkante object is geselecteerd, wordt de onderste tekstlaag bijgewerkt naar vierkant.

Prototype met variabelen en componenten

Zodra je de basis onder de knie hebt, kun je variabelen en componenten samen gebruiken in je prototypes.

Pas variabelen toe op componenten om je component automatisch bij te werken wanneer je de waarde van een variabele in een prototype wijzigt. Elke wijziging in de waarde van een variabele werkt ook alle andere elementen bij die aan dezelfde variabele zijn gekoppeld.

De waarde van een variabele kan worden gewijzigd door:

De actie Variabele instellen te gebruiken
De actie Wijzigen in te gebruiken in een interactieve component
De actie Variabele-modus instellen te gebruiken

Voorbeeld

Een interactieve knopcomponentenset heeft een standaard- en een zweefstatus. De component gebruikt de actie Wijzigen in, zodat wanneer je met de muis over de standaardvariant beweegt, er wordt overgeschakeld naar de zweefvariant (en vice versa).

Een booleaanse variabele hoverState wordt toegepast op zowel een exemplaar van de variant als op de zichtbaarheid van een aparte deklaag.

Wanneer je met de muis over de standaardvariant in je prototype beweegt:

Wordt het exemplaar geüpdatet naar de zweefvariant
Wordt de Booleaanse variabele hoverState bijgewerkt van false naar true
Wordt de afbeeldingslaag zichtbaar

Wil je oefenen met een soortgelijk voorbeeld? Bekijk de sectie "Probeer het uit" hieronder.

De locatie waar je de variabele toepast, bepaalt de reikwijdte van de wijzigingen in het prototype.

Variabele toepassen op:	Tijdens het maken van het prototype:
Eigenschappen van varianten van componentexemplaren	Verander de waarde van de variabele om de variant van het exemplaar bij te werken.
Componenteigenschappen	Verander de waarde van de variabele om alle exemplaren van de component bij te werken.

Lees verder over het toepassen van variabelen op eigenschappen van componenten en varianten.

Probeer het uit: Voorbeeld 1

Maak een set interactieve componenten.
1. Maak een knopcomponent die een varianteigenschap "geklikt" heeft met de waarden "true" en "false".
2. Voeg een prototype-interactie toe aan de "false"-variant, met de trigger Bij klikken en de actie Wijzigen in. Wanneer op de "false" variant wordt geklikt, schakelt het over naar de "true" variant.
Plaats een exemplaar van een variant uit de interactieve componentenset in een frame.
1. Voeg de "false" variant toe aan een frame.
Wijs een variabele toe aan het exemplaar van de interactieve component. De waarde van de variabele moet overeenkomen met een waarde van een varianteigenschap.
1. Maak een booleaanse variabele circleVisibility met een standaardwaarde "false".
2. Selecteer het exemplaar van de knop.
3. Beweeg in de rechter zijbalk met de muis over de aangeklikte varianteigenschap.
4. Selecteer Variabele toepassen.
5. Klik om de variabele circleVisibility te selecteren om aan de eigenschap te koppelen.
Wijs dezelfde variabele toe aan een andere laag in je ontwerp.
1. Voeg een ellipsobject toe aan het frame.
2. Klik in het gedeelte Vormgeving van de rechter zijbalk met de rechtermuisknop op het pictogram Verbergen.
3. Selecteer de variabele circleVisibility om de booleaanse variabele toe te passen op de zichtbaarheid van de ellipslaag.
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.

Probeer het uit: voorbeeld 2

Maak een componentenset met minstens twee varianten.
1. Maak een componentenset met een varianteigenschap 'vorm' met de waarden "cirkel" en "vierkant".
Plaats een exemplaar van een variant op een frame.
Wijs een variabele toe aan het exemplaar. De waarde van de variabele moet overeenkomen met een waarde van een varianteigenschap.
1. Maak een stringvariabele shapeType met een standaard waarde "cirkel".
2. Klik op het exemplaar om het te selecteren.
3. Beweeg in de rechterzijbalk met de muisaanwijzer naar de rechterkant van een varianteigenschap en klik op Variabele toewijzen.
4. Selecteer de variabele die je aan de eigenschap wilt koppelen.
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.
1. Voeg een prototype-interactie toe aan een object met behulp van de trigger Bij klikken/tikken en de actie Variabele instellen. Stel de waarde van de variabele shapeType in op "vierkant".
Speel je prototype af om de interactie te testen. Wanneer de interactie wordt geactiveerd en de variabele verandert, wordt de variant ook bijgewerkt.