Componenteigenschappen in Figma maken het mogelijk om aanpasbare elementen binnen componenten te creëren, waardoor het eenvoudiger wordt om ontwerpen opnieuw te gebruiken en aan te passen in verschillende projecten. Er zijn drie hoofdtypen componenteigenschappen:

1. Instance Swap-eigenschap

Met deze eigenschap kun je geneste componenten, zoals iconen, binnen het hoofdcomponent verwisselen. Vooraf geselecteerde iconen of waarden kunnen worden toegevoegd voor eenvoudige aanpassing.

Om deze eigenschap te maken:

• Selecteer de instanties die je wilt verwisselen.
• Gebruik de optie Create Instance Swap Property in het Design-paneel.

2. Booleaanse eigenschap

De booleaanse eigenschap maakt het mogelijk om elementen aan of uit te zetten, zoals het tonen of verbergen van iconen of tekst.
Een eigenschap met de naam "Has Left Icon?" kan bijvoorbeeld de zichtbaarheid van een icoon aan de linkerkant van een knop regelen. Deze eigenschap wordt toegevoegd onder de sectie Appearance.

3. Texteigenschap

Met de texteigenschap kun je tekst binnen een component direct vanuit het Design-paneel wijzigen.

Om deze eigenschap te maken:

• Selecteer het textelement.
• Gebruik het pictogram Apply Property or Variant in de rechterbovenhoek van het Design-paneel om de eigenschap te creëren.

Deze eigenschappen kunnen worden herschikt in het Design-paneel voor een betere organisatie. Wijzigingen aan de eigenschappen, zoals het schakelen van een booleaanse eigenschap, passen automatisch andere gerelateerde eigenschappen aan voor een naadloze functionaliteit. Door alle eigenschappen te testen via het aanmaken van een instantie van het component, wordt de aanpasbaarheid voor toekomstige projecten gegarandeerd.

Componenteigenschappen verbeteren de efficiëntie aanzienlijk bij het bouwen en beheren van herbruikbare componenten, zoals knoppenbibliotheken, waardoor tijd wordt bespaard en ontwerpconsistentie wordt gewaarborgd.