Voordat je begint

Wie kan deze functie gebruiken?

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

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.

Iedereen die een component metcomponenteigenschappen gebruikt, kan een enkele set geconsolideerde besturingselementen in het rechterpaneel bekijken, zodat men in één oogopslag kan zien wat er kan worden bewerkt en op één plek wijzigingen kunnen aanbrengen.

Dit vermindert de tijd die nodig is om documentatie te raadplegen, verbetert het nauwkeurige gebruik van componenten en ontwerpsystemen, en vermindert de noodzaak om individuele lagen te selecteren en te overschrijven.

Ontdek het testbestand voor componenteigenschappen in de Figma Community.

Soorten componenteigenschappen

Componenteigenschappen zijn gekoppeld aan verschillende ontwerpeigenschappen. Je kunt componenteigenschappen maken voor elk hoofdonderdeel of elke variant van een componentenset, en deze toepassen op geneste lagen van de component of de variant.

Componenteigenschappen zijn er in verschillende typen:

Type componenteigenschap	Gebruik dit om...
Booleaanse eigenschap	Aan te geven voor welke lagen de laagzichtbaarheid aan-/uitgezet kan worden, zoals een pictogram op een knop.
Eigenschap "exemplaar verwisselen"	Aan te geven welke exemplaren verwisseld kunnen worden; voorkeursexemplaren aan te geven waarnaar gewisseld kan worden.
Teksteigenschap	Aan te geven welke tekstinhoud je kunt wijzigen.
Variantieigenschap	De verschillende varianten van een component te definiëren, zoals de verschillende toestanden, maten of kleuren.

Tip: Communiceer het beoogde gebruik van een component door beschrijvingen en links naar de documentatie toe te voegen. Documentatie helpt bij het sturen van de juiste toepassing, het gebruik van varianten en staten, en de toegankelijkheid en contrastvereisten voor degenen die jouw ontwerpsysteem gebruiken. Ontdek hoe je documentatie aan ontwerpelementen toevoegt.

Eigenschappen van componenten aanmaken en toepassen

Booleaanse eigenschap

Gebruik booleaanse eigenschappen om true/false-waarden in te stellen, waarmee je een attribuut aan of uit kunt zetten. 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.

Momenteel ondersteunen booleaanse eigenschappen alleen de zichtbaarheid van lagen.

Een booleaanse eigenschap aanmaken

Wanneer een booleaanse eigenschap wordt aangemaakt voor de zichtbaarheid van een laag, betekent een waarde ingesteld op false dat de laag verborgen zal zijn. Als je de schakelaar op "true" zet, wordt de laag zichtbaar.

Selecteer een hoofdcomponent of een componentenset.
Klik in de rechterzijbalk op in de sectie Eigenschappen en selecteer Boolean in het keuzemenu.
Gebruik de velden en keuzemenu's om de componenteigenschap te configureren in het modale venster Componenteigenschap aanmaken.
- Geef je eigenschap een naam in het tekstveld.
- Stel de standaardwaarde in op "true" of "false". Je kunt ook op Variabele toepassen klikken om een bestaande booleaanse variabele toe te passen, indien beschikbaar.
Klik op Eigenschap maken.

Pas een booleaanse eigenschap toe op een component

Waarschuwing: Voordat je booleaanse eigenschappen op componenten toepast, is het belangrijk om na te denken over de behoefte aan interactieve componenten of prototyping-verbindingen. Prototyping-brainstormen moeten verbinding maken tussen twee objecten. Als je twee componenten met elkaar verbindt en ze consolideert met behulp van booleaanse eigenschappen, gaan de prototyping-verbindingen verloren.

Je hebt bijvoorbeeld een booleaanse eigenschap toegepast op een pictogram in een knopcomponent om twee toestanden weer te geven: een knop met een pictogram en een knop zonder. Het is niet mogelijk om een interactie tussen de twee op te zetten omdat je een enkele component gebruikt. Prototype-interacties moeten plaatsvinden tussen twee afzonderlijke objecten.

Selecteer een laag die genest is binnen een hoofdcomponent of variant.
Als je met varianten werkt, kun je op klikken om meerdere varianten tegelijk te bewerken en zo overeenkomende objecten te bewerken en je workflow te versnellen. Ontdek hoe je meerdere varianten tegelijk kunt bewerken.
Zoek in de rechterzijbalk de sectie Vormgeving en klik op het pictogram Variabele/eigenschap toepassen.
Kies een booleaanse eigenschap uit de lijst. Je ziet een paarse pil met de naam van de toegepaste eigenschap in de rechter zijbalk.

Tip: Je kunt een booleaanse eigenschap aanmaken en toepassen vanuit elke geneste laag in een hoofdcomponent of hoofdvariant. Selecteer de geneste laag en zoek het gedeelte Vormgeving, klik vervolgens op het pictogram Eigenschap toepassen. Zodra je de eigenschap hebt aangemaakt, wordt deze toegepast op de geselecteerde laag.

Eigenschap "exemplaar verwisselen"

Met de eigenschap "exemplaar wisselen" kun je aangeven welke exemplaren die genest zijn in een hoofdcomponent of variant kunnen worden gewisseld.

Tijdens het maken van vervangingsinstellingen voor een exemplaar kun je het standaardexemplaar instellen met behulp van elk component dat in het bestand is gemaakt of uit bibliotheken die aan het bestand zijn toegevoegd. Je kunt ook voorkeursexemplaren instellen, zodat anderen weten naar welke exemplaren ze kunnen wisselen. Ontdek hoe je componenten kunt vervangen met behulp van vervangingsinstellingen voor een exemplaar.

Een eigenschap "Exemplaar verwisselen" aanmaken

Selecteer een hoofdcomponent of een componentenset.
Klik in de rechter zijbalk op Eigenschappen en selecteer Exemplaar wisselen in de vervolgkeuzelijst.
Gebruik de velden en keuzemenu's om de componenteigenschap te configureren in het modale venster Componenteigenschap aanmaken.
- Geef je eigenschap een naam met behulp van het tekstveld.
- Stel de standaard waarde in via het keuzemenu om een exemplaar te selecteren uit componenten die in het bestand zijn gemaakt, of uit bibliotheken die aan het bestand zijn toegevoegd.
- Stel desgewenst voorkeursexemplaren in, zodat anderen kunnen zien welke componenten ze moeten kiezen bij het wisselen van het exemplaar.
Klik op Eigenschap aanmaken.

Pas een eigenschap "Exemplaar wisselen" toe op een component

Selecteer een exemplaar dat genest is binnen een hoofdcomponent of een variant.
Als je met varianten werkt, kun je op klikken om meerdere varianten tegelijk te bewerken en zo overeenkomende objecten te bewerken en je workflow te versnellen. Ontdek hoe je meerdere varianten tegelijk kunt bewerken.
Klik bovenaan in de rechterzijbalk op Eigenschap "Exemplaar wisselen" toepassen.
Kies een exemplaareigenschap uit de lijst. Je ziet een paarse pil met de naam van de toegepaste eigenschap in de rechter zijbalk.

Tip: Je kunt een eigenschap "Exemplaar wisselen" aanmaken en toepassen vanuit elk exemplaar dat genest is binnen een hoofdcomponent of hoofdvariant. Selecteer het geneste exemplaar en klik op Eigenschap "Exemplaar wisselen" toepassen/aanmaken bovenaan de rechter zijbalk. Zodra je de eigenschap hebt aangemaakt, wordt deze toegepast op de geselecteerde laag.

Kies je voorkeurswaarden

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.

Opmerking: Als je geen voorkeurswaarde wilt gebruiken, klik je op het keuzemenu of gebruik de zoekbalk boven de lijst om andere beschikbare componenten te vinden.

Voeg als volgt voorkeurswaarden toe voor een exemplaar:

Begin met het bewerken van de bestaande eigenschap "Exemplaar wisselen" of maak een nieuwe aan.
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 het modale venster.

Teksteigenschap

Gebruik teksteigenschappen om aan te geven welke tekstinhoud in een component kan worden bewerkt. Je kunt de tekstinhoud bewerken via het rechterpaneel of op het canvas.

Opmerking: Eigenschappen van tekstcomponenten ondersteunen momenteel geen rijke tekst, zoals lijststijlen, superscript en andere type-instellingen. Je kunt deze instellingen nog steeds toepassen op de tekstlaag, maar hun formaten worden niet weergegeven in het eigenschappenpaneel van componenten in het rechterpaneel.

Als de tekstlaag een lijststijl met opsommingstekens of een genummerde lijststijl bevat, wordt de lijststijl verwijderd als je de tekstreeks in het rechter paneel aanpast. Om deze te behouden, werk je in plaats daarvan de reeks vanaf het canvas bij.

Een teksteigenschap aanmaken

Selecteer een hoofdcomponent of een componentenset.
Klik ophet gedeelte Eigenschappen in de rechter zijbalk en selecteer Tekst in het keuzemenu.
Gebruik de velden om de eigenschap te configureren in het modale venster Componenteigenschap aanmaken.
- Geef je eigenschap een naam met behulp van het tekstveld.
- Stel de standaardtekst in via het tekstveld waarde . Je kunt ook op Variabele toepassen klikken om een bestaande tekenreeksvariabele toe te passen, indien beschikbaar.
Klik op Eigenschap aanmaken.

Een teksteigenschap toepassen op een component

Selecteer een tekstlaag die genest is in een hoofdcomponent of variant.
In het gedeelte Tekst bovenaan de rechter zijbalk, beweeg je de muisaanwijzer over het tekstveld en klik je op Variabele/eigenschap toepassen.
Kies een teksteigenschap uit de lijst.

Tip: Je kunt een teksteigenschap aanmaken en toepassen vanuit elke tekstlaag die genest is binnen een hoofdcomponent of hoofdvariant.

Met de geneste tekstlaag geselecteerd, zoek je het tekstveld in het gedeelte Tekst van de rechter zijbalk.
Beweeg de muis over het tekstveld en klik op Variabele/eigenschap toepassen.
Klik in het menu op Variabele/eigenschap aanmaken.
Kies in het keuzemenu Aanmaken voor Eigenschap. Geef de eigenschap een naam en een standaardwaarde.
Klik op Eigenschap aanmaken. Zodra je de eigenschap hebt aangemaakt, wordt deze toegepast op de geselecteerde laag.

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.

Opmerking: We raden aan om je bestaande ontwerpsysteem te bekijken voordat je de componenteigenschappen overneemt. Op die manier kun je beslissen welke aspecten je als componenteigenschappen kunt weergeven en welke varianten moeten zijn.

Overschakelen naar een andere componenteigenschap

Als een laag een componenteigenschap heeft, kun je deze op elk moment wisselen met een andere.

Zoek in de rechter zijbalk de corresponderende sectie voor de componenteigenschap die je wilt wijzigen.
- Eigenschap "Component wisselen": Bovenaan de rechter zijbalk.
- Teksteigenschap: Bovenaan de rechter zijbalk in het gedeelte Tekst.
- Booleaanse eigenschap: het gedeelte Vormgeving .
Klik op de paarse pil.
Selecteer een bestaande eigenschap van hetzelfde type.

Een componenteigenschap aanpassen

Standaardwaarde wijzigen

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

Selecteer een componentenset of hoofdcomponent.
Klik op naast de varianteigenschap om het modale venster "Eigenschappen bewerken" te openen.
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.

Opmerking: De standaardwaarde van een varianteigenschap wordt bepaald door de variant in de linker bovenhoek van een componentenset. Ontdek hoe je de standaardvariant van een componentenset kunt wijzigen.

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.

Als je een exemplaar op het hoogste niveau selecteert met blootgestelde geneste exemplaren, wordt een lijst met componenteigenschappen voor de exemplaren op het hoogste niveau en geneste exemplaren weergegeven in het rechter deelvenster.

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.

Opmerking: Als je een onthuld genest exemplaar hebt met de zichtbaarheid ingesteld op verborgen voor een booleaanse eigenschap, worden alle componenteigenschappen die aan het exemplaar zijn gekoppeld ook verborgen.

Geneste exemplaren kiezen om te tonen

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

Opmerking: De optie om geneste exemplaren te onthullen is alleen beschikbaar als een hoofdcomponent:

al een onthuld genest exemplaar heeft, of
geneste exemplaren bevat met toegepaste componenteigenschappen

Als je de optie Geneste exemplaren niet ziet, probeer dan eerst een componenteigenschap toe te passen op een geneste component.

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

In het rechterpaneel verschijnt een lijst met geselecteerde geneste instanties.

Om geneste instanties te verbergen, beweeg je de muis 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.

Let op: Vereenvoudigde exemplaren verbergen bepaalde laagnamen, maar iedereen met het toegangsrecht kan bewerken voor het bestand kan de lagen nog steeds bewerken.

Om een exemplaar te vereenvoudigen, selecteer je een hoofdcomponent of componentenset en klik je op Configuratie component in het rechterpaneel. In het pop-upvenster vink je het selectievakje alle exemplaren vereenvoudigen aan.

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.

Een componenteigenschap beheren

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

Opmerking: Om nieuwe of bijgewerkte componenten in verschillende bestanden te gebruiken, moet je ze publiceren naar de teambibliotheek. Zo kun je ze delen met anderen of gebruiken in andere bestanden of projecten. Ontdek hoe je naar de teambibliotheek publiceert.

Een eigenschap ontkoppelen

Ontkoppel tekst, exemplaarwissels of booleaanse eigenschappen van een laag.

Selecteer een geneste laag waarop een componenteigenschap is toegepast.
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.

Opmerking: Het is niet mogelijk om een variant-eigenschap los te koppelen van een geneste laag.

Hernoemen, opnieuw ordenen of verwijderen

Eigenschappen

Een bestaande componenteigenschap hernoemen, herschikken of verwijderen:

Selecteer de hoofdcomponent of componentenset.
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:

Selecteer een componentenset of hoofdcomponent.
Klik op naast de varianteigenschap om het modale venster "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:

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

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