Voordat je begint

Wie kan deze functie gebruiken?

Gebruikers op elk abonnement

Iedereen met toegang bewerken tot het Figma Design-bestand kan componenteigenschappen maken, beheren en gebruiken

In dit artikel wordt besproken hoe je componenteigenschappen maakt en configureert. Leer hoe je exemplaren met componenteigenschappen kunt bewerken.

Componenteigenschappen zijn de veranderlijke aspecten van een component. Hiermee kun je communiceren welke onderdelen van een component gewijzigd kunnen worden, zoals:

• Welke lagen in een component hebben de optie om verborgen of getoond te worden?
• Of een exemplaar kan worden gewisseld en de voorkeursexemplaren ingesteld om naar te wisselen
• Welke tekstreeksen kun je wijzigen

Iedereen die een component met componenteigenschappen gebruikt, kan een enkele set geconsolideerde besturingselementen in de rechterzijbalk bekijken, zodat men in één oogopslag kan zien wat er kan worden bewerkt en op één plek wijzigingen kan aanbrengen.

Het duurt hierdoor minder lang om documentatie te raadplegen, het verbetert het nauwkeurige gebruik van componenten en ontwerpsystemen, en vermindert de noodzaak om afzonderlijke lagen te selecteren en te overschrijven.

Eigenschappen van componenten helpen ook om je ontwerpsysteem of bibliotheekbestand te verkleinen door het gebruik van booleaanse eigenschappen.

Soorten componenteigenschappen

Componenteigenschappen zijn gekoppeld aan verschillende ontwerpeigenschappen. Je kunt componenteigenschappen aanmaken voor elke hoofdcomponent of elke componentenset, en ze toepassen op geneste lagen van de component of variant.

Componenteigenschappen zijn er in verschillende typen:

• Booleaanse eigenschappen
• Eigenschappen "exemplaar wisselen"
• Teksteigenschappen
• Variant-eigenschappen

Booleaanse eigenschap

Gebruik booleaanse eigenschappen om true/false-waarden in te stellen. Hiermee kunnen gebruikers een attribuut in- of uitschakelen.

Als een ontwerpsysteem bijvoorbeeld knoppen met en zonder pictogram bevat, kun je in plaats van voor elke staat varianten te maken, een booleaanse eigenschap toepassen op de zichtbaarheid van de pictogramlaag.

Dit is ook een geweldige manier om de omvang van ontwerpsystemen en bestandsbibliotheken te verkleinen.

Als er een booleaanse eigenschap is aangemaakt voor de zichtbaarheid van een laag en de waarde is ingesteld op false, wordt elke bijbehorende componenteigenschap verborgen. Zodra je deze op true zet, verschijnt de bijbehorende eigenschap.

Eigenschap "exemplaar verwisselen"

Een eigenschap "Exemplaar wisselen" geeft aan welke exemplaren in een hoofdcomponent of variant kunnen worden verwisseld. Bij het maken van een eigenschap "Exemplaar wisselen" kun je de standaard exemplaarwaarde definiëren vanuit elke lokale en ingeschakelde bibliotheek.

Voor iedereen die deze eigenschap gebruikt, wordt een menu "Exemplaar wisselen" aangeboden om het geneste hulpmiddel te vervangen door een hulpmiddel binnen dezelfde componentenset, of een hulpmiddel uit een beschikbare bibliotheek.

Geneste exemplaren met deze componenteigenschap kunnen alleen worden verwisseld op de bovenste laag van de bovenliggende component. Je kunt het niet wisselen met een ander exemplaar als je het geneste exemplaar selecteert.

Stel voorkeursexemplaren in zodat anderen weten naar welke instanties ze moeten wisselen ↓

Teksteigenschap

Gebruik teksteigenschappen om aan te geven welke tekstlagen je moet bewerken.

Of je nu de standaardwaarde van een teksteigenschap beheert of een exemplaar gebruikt die deze bevat, de tekst kan worden bewerkt vanuit de rechter zijbalk of op het canvas. De waarde wordt in beide richtingen bijgewerkt.

Lagen zonder deze eigenschap kunnen nog steeds worden bijgewerkt.

Variantieigenschap

Een variant is een individueel onderdeel binnen een set van componenten.

Met een varianteigenschap kun je attributen van je varianten definiëren, zoals status, kleur of grootte.

Een componentenset bevat meerdere varianten, en de varianten hebben attributen die kunnen worden gedefinieerd door varianteigenschappen. Variantieigenschappen zijn specifiek voor varianten en componentensets en kunnen niet worden aangemaakt of toegepast op hoofdcomponenten.

Ontdek hoe je varianten en componentensets kunt aanmaken.

In het onderstaande voorbeeld zie je een knopcomponentenset met vier varianten. Er zijn twee varianteigenschappen: grootte en kleur. De grootte heeft de waarden klein en groot, en de kleurwaarden zijn groen en rood.

Een componenteigenschap aanmaken en toepassen

Eigenschappen van componenten worden aangemaakt en toegepast op hoofdcomponenten en componentensets om onderdelen van een ontwerpsysteem te definiëren en om het makkelijker te maken om ontwerpsystemen te gebruiken.

Componenteigenschappen kunnen op twee niveaus worden aangemaakt: de bovenliggende laag of de onderliggende laag van een hoofdcomponent of componentenset. Lees verder over de relatie tussen boven- en onderliggende lagen.

Je kunt wissel-, tekst- en booleaanse eigenschappen maken vanuit de bovenliggende laag, en deze worden zonder extra stappen toegepast op de onderliggende laag(en).

Je kunt elke componenteigenschap aanmaken vanuit de bovenliggende laag, maar het vergt een extra stap om deze toe te passen op de onderliggende lagen. Varianteigenschappen kunnen alleen worden aangemaakt vanuit de bovenliggende laag.

Eigenschap	Onderliggende laag	Bovenliggende laag
Booleaans	✓	✓
Tekst	✓	✓
Exemplaar wisselen	✓	✓
Variant	✕	✓

Aanmaken vanuit een onderliggende laag

Maak een componenteigenschap vanaf een onderliggendelaag van een variant of hoofdcomponent. De eigenschap wordt aangemaakt en toegepast op eventuele geselecteerde lagen.

Deze methode ondersteunt het maken van de eigenschappen exemplaar wisselen, tekst en Booleaanse eigenschappen.

Je kunt geen varianteigenschappen aanmaken vanuit een onderliggende laag.

1. Selecteer een laag die genest is in een hoofdcomponent of variant.
2. (Optioneel, alleen varianten) Klik op om "Tegelijk bewerken" in te schakelen zodat je overeenkomende objecten kunt bewerken en je workflow kunt versnellen. Ontdek hoe je varianten tegelijk kunt bewerken.
3. Zoek in de rechter zijbalk het gedeelte dat overeenkomt met de componenteigenschap die je wilt aanmaken en klik erop.
   • Eigenschap "Exemplaar wisselen": Naast het keuzemenu "Exemplaar wisselen" in de rechter zijbalk.
   • Teksteigenschap: In het gedeelte Inhoud in de rechter zijbalk.
   • Booleaanse eigenschap: In het gedeelte Laag in de rechter zijbalk.
4. Als er een keuzemenu verschijnt, klik dan op Eigenschap aanmaken.
5. Gebruik in de modaal Componenteigenschap aanmaken de velden en keuzemenu's om de componenteigenschap te configureren.
   • Exemplaar wisselen:
     • Geef je eigenschap een naam met behulp van het tekstveld
     • Stel de standaardwaarde in via het keuzemenu een exemplaar te selecteren uit lokale componenten in het bestand of uit ingeschakelde bibliotheken.
     • Stel eventuele voorkeursexemplaren in zodat anderen weten naar welke exemplaren ze kunnen wisselen wanneer ze de component gebruiken.
   • Tekst:
     • Geef je eigenschap een naam met behulp van het tekstveld
     • Stel de standaardtekst in via het tekstveld waarde . Als je de standaardwaarde instelt op iets anders dan de huidige reeks, werkt Figma de tekstreeks bij zodat deze overeenkomt met deze waarde. Dit werkt ook andersom: als je de tekstreeks op de hoofdcomponent bijwerkt, werkt Figma de standaardwaarde ook bij.
   • Booleaanse eigenschap:
     • Geef je eigenschap een naam in het tekstveld.
     • Stel de standaardwaarde in op "true" of "false".
6. Klik op eigenschap aanmaken. Eenmaal toegepast, zie je een paarse pil met de naam van de eigenschap in het bijbehorende gedeelte van de rechter zijbalk.

Aanmaken vanaf een bovenliggende laag

Deze methode ondersteunt het aanmaken van alle eigenschapstypen, inclusief varianteigenschappen.

Het toevoegen van componenteigenschappen vanuit de bovenliggende laag is een proces in twee stappen:

1. Maak de componenteigenschap aan vanaf de bovenliggende laag.
2. Pas deze handmatig toe op de gewenste lagen.

Maak als volgt een componenteigenschap aan vanuit de bovenliggende laag:

1. Selecteer een hoofdcomponent of componentenset en klik op in het gedeelte Eigenschappen van de rechter zijbalk. Er verschijnt een keuzemenu met opties voor componenteigenschappen.
2. Selecteer een eigenschap van de component.
   • Variantieigenschap
   • Booleaanse eigenschap
   • Eigenschap "exemplaar verwisselen"
   • Teksteigenschap
3. Gebruik de velden en keuzemenu's in de modaal voor het aanmaken van een componenteigenschap om je eigenschap een naam en standaard waarde te geven.
4. Klik op Eigenschap aanmaken.
5. Pas ten slotte de eigenschap toe op elke geneste laag.

Een bestaande eigenschap toepassen

Pas als volgt een bestaande componenteigenschap toe op een geneste laag:

1. Selecteer een of meer geneste lagen in een hoofdcomponent, componentenset of variant.
2. (Optioneel, alleen varianten) Klik op om "Tegelijk bewerken" in te schakelen zodat je overeenkomende objecten kunt bewerken en je workflow kunt versnellen. Ontdek hoe je varianten tegelijk kunt bewerken.

3. Zoek in de rechter zijbalk het gedeelte voor de eigenschap die je wilt toepassen.

4. Klik op om een keuzemenu te openen. Het keuzemenu bevat bestaande eigenschappen voor het type in de desbetreffende sectie.

   • Exemplaar wisselen: het gedeelte "exemplaar wisselen"
   • Tekst: Inhoudssectie
   • Boolean: het gedeelte "lagen"

   Als de modaal voor het aanmaken van een componenteigenschap verschijnt in plaats van het keuzemenu, dan bestaat er geen eigenschap van dat type in die component.  Ontdek hoe je een componenteigenschap kunt aanmaken.

5. Klik in het keuzemenu op een eigenschap om deze toe te passen op de geselecteerde laag of lagen. Er verschijnt een paarse pil met een pictogram en een eigenschapsnaam in de rechter zijbalk.

Een componenteigenschap aanpassen

Standaardwaarde wijzigen

Wijzig de standaardwaarde van een tekst- of booleaanse eigenschap, of de eigenschap "Exemplaar wisselen".

1. Selecteer een componentenset of hoofdcomponent.
2. Klik op naast de varianteigenschap om de modaal "Eigenschappen bewerken" te openen.
3. Gebruik het tekstveld of het keuzemenu in het gedeelte Waarde om de standaardwaarde bij te werken.

De bijgewerkte standaardwaarde wordt op het canvas weergegeven als de bijbehorende exemplaarlaag geen eigenschapoverschrijvingen heeft.

Kies voorkeurswaarden (alleen voor de eigenschap "Exemplaar wisselen")

Met voorkeurswaarden kun je een samengestelde componentenset aanmaken waar je uit kunt kiezen bij het wisselen van exemplaren (via de eigenschap "Exemplaren wisselen"). Ze verminderen het giswerk door te communiceren welke specifieke componenten een bestaande component kunnen vervangen.

Je maakt bijvoorbeeld een pictogramknop met een eigenschap "Exemplaar wisselen" om aan te geven dat het pictogram kan worden verwisseld. Je pictogrammenbibliotheek bevat meer dan 100 pictogrammen, maar er mogen slechts 8 worden gebruikt voor deze knop.

Om het gemakkelijk te maken om deze 8 pictogrammen te vinden en te bepalen welke je kunt gebruiken, voeg je ze toe als voorkeurswaarden. Als ontwerpers een pictogram willen wisselen, hebben ze nu een samengestelde lijst van hulpmiddelen waarvan ze weten dat ze die kunnen gebruiken.

Wanneer je een component met een voorkeurswaarde gebruikt, verschijnt er standaard een lijst met voorkeurswaarden wanneer je het menu van de eigenschap "Exemplaar wisselen" opent.

Voeg als volgt voorkeurswaarden toe voor een exemplaar:

1. Begin met het bewerken van de bestaande eigenschap "Exemplaar wisselen" of maak een nieuwe aan.
2. Klik in de betreffende modalen op in de sectie Voorkeurswaarden en vink de selectievakjes aan naast de exemplaren die je als voorkeurswaarden wilt opnemen.

Om een voorkeurswaarde te verwijderen, klik je op naast de waarde in het gedeelte Voorkeurswaarden van de modaal.

Geneste exemplaren zichtbaar maken

Toon specifieke geneste exemplaren om hun componenteigenschap te onthullen naast die van het bovenliggende exemplaar. Dit helpt gebruikers van het ontwerpsysteem om geneste exemplaren en hun componenteigenschappen te zien zonder diep in de lagen te hoeven graven om ze te vinden.

Je maakt bijvoorbeeld een sociale mediakaartcomponent met meerdere componenten erin genest – een avatar, naam, knoppen, enzovoort. Je wilt het pictogram van de standaardknop wijzigen naar een pictogram "verzenden" en de tekst wijzigen. Je wilt ook de status van de knop annuleren wijzigen naar de status uitgeschakeld.

In plaats van diep in elke laag te moeten graven om de componenteigenschap te vinden, kun je door geneste instanties te tonen eenvoudig op de bovenste component klikken - in dit geval de sociale mediakaart - en je exemplaar vanaf één plek bewerken.

Wanneer je een topniveau-exemplaar selecteert met onthulde geneste exemplaren, verschijnt er een lijst met componenteigenschappen voor zowel de topniveau- als de geneste exemplaren in de rechter zijbalk.

Wanneer je met de muis over een rij eigenschappen beweegt, verschijnt er een lichtpaarse markering rond het bijbehorende object op het canvas, zodat je weet wat je aan het bewerken bent.

Met een hoofdcomponent of componentenset geselecteerd, klik je op in het gedeelte Eigenschappen van de rechter zijbalk en kies je Geneste exemplaren onder Eigenschappen onthullen vanaf.

In de modaal Geneste exemplaren onthullen vink je de vakjes aan voor de exemplaren die je op het hoogste niveau wilt onthullen.

Er verschijnt een lijst van geselecteerde geneste exemplaren in de rechter zijbalk.

Om te voorkomen dat geneste exemplaren worden weergegeven, beweeg je de muisaanwijzer over de naam van het exemplaar in deze lijst en klik je op .

Exemplaren vereenvoudigen

Het vereenvoudigen van een exemplaar helpt rommel in het paneel eigenschappen en lagen te verminderen door lagen te verbergen waarop geen componenteigenschappen zijn toegepast. Figma gaat ervan uit dat een laag zonder componenteigenschappen niet bewerkt mag worden en daarom verborgen kan worden.

Om een exemplaar te vereenvoudigen, selecteer je een hoofdcomponent of componentenset en klik je op in de rechter zijbalk. Schakel in het pop-upvenster het selectievakje alle exemplaren vereenvoudigen in.

Wanneer je een exemplaar van een vereenvoudigde component gebruikt, worden overtollige lagen ingeklapt onder Alle lagen weergeven. Klik op Alle lagen weergeven om deze uit te klappen en de lagen te bekijken. Je kunt het opnieuw inklappen door buiten het lagenpaneel te klikken of door een andere laag te selecteren.

Eigenschappen beheren

Nadat je componenteigenschappen en hun waarde hebt aangemaakt, kun je ze op elk moment beheren. Hernoemen, herschikken, verwijderen, standaardwaarden aanpassen en meer.

Een eigenschap ontkoppelen

Ontkoppel tekst, exemplaarwissels of booleaanse eigenschappen van een laag.

1. Selecteer een geneste laag waarop een componenteigenschap is toegepast.
2. Klik in het rechter zijbalkpaneel naast de eigenschap die je wilt ontkoppelen.

Dit verwijdert de componenteigenschap uit de laag, maar de componenteigenschap zelf wordt niet verwijderd.

Hernoemen, opnieuw ordenen of verwijderen

Eigenschappen

Een bestaande componenteigenschap hernoemen, herschikken of verwijderen:

1. Selecteer de hoofdcomponent of componentenset.
2. Vanuit de sectie Eigenschappen in de rechterzijbalk:

   • Hernoemen: Dubbelklik op de naam van een eigenschap. Typ een nieuwe naam, druk vervolgens op return / enter of klik buiten het veld om toe te passen.

   • Opnieuw ordenen: Beweeg met de muis over een eigenschap om identificatoren weer te geven. Klik en sleep om de volgorde opnieuw te ordenen, en laat los om toe te passen.

     Varianteigenschappen staan altijd boven andere eigenschapstypen in de rechter zijbalk. Ze kunnen worden herschikt met andere varianteigenschappen, maar niet met andere soorten eigenschappen.

   • Verwijderen: Klik met de rechtermuisknop op een eigenschap en selecteer Eigenschap verwijderen. Of selecteer een eigenschap en druk op delete.

     Als je componentenset of hoofdcomponent slechts één varianteigenschap bevat, zal het verwijderen van de eigenschap de hele componentenset of hoofdcomponent verwijderen.

Waarden

Om de waarden van een varianteigenschap te wijzigen of opnieuw te ordenen:

1. Selecteer een componentenset of hoofdcomponent.
2. Klik op naast de varianteigenschap om de modaal "Eigenschappen bewerken" te openen.
   • Wijzigen: Gebruik de tekstvelden in het gedeelte Waarden om de waarden te wijzigen of bij te werken.
   • Opnieuw ordenen: Beweeg over een waarde om identificatoren te onthullen. Klik en sleep om de volgorde te wijzigen.

Testomgeving voor componenten in Dev Mode

Wanneer je een component of exemplaar selecteert in Dev Mode, zie je een voorbeeld van een component, een link naar de hoofdcomponent en eventuele links naar relevante documentatie en hulpbronnen.

De testomgeving voor componenten verschijnt in het inspectiepaneel wanneer er een componentexemplaar is geselecteerd. Gebruik de testomgeving om te experimenteren met de verschillende eigenschappen van de component zonder het daadwerkelijke ontwerp te wijzigen. Open als volgt de testomgeving voor componenten in Dev Mode:

1. Selecteer een componentexemplaar op het canvas.
2. Klik op Openen in testomgeving in het paneel "Inspecteren".

Lees verder over het gebruik van Dev Mode om ontwerpen te inspecteren →