Figma Component en Variant: herbruikbare UI

Het geheim van goed interfaceontwerp is niet dezelfde knop honderd keer opnieuw tekenen; het is hem één keer goed bouwen en overal hergebruiken. Precies hier komt het systeem van Figma component en variant van pas. Maak van een element een single source of truth, groepeer de toestanden (hover, disabled, primary/secondary) als varianten, en je ontwerp wordt een consistente, snelle en goed onderhoudbare bibliotheek. In dit artikel neem ik je mee van een leeg canvas naar een echt schaalbaar componentsysteem.

Wat is een component en waarom is het belangrijk?

In Figma is een component de hoofdkopie van een ontwerpelement dat je wilt hergebruiken. Elke kopie die je ervan afleidt heet een instance. Wanneer je het hoofdcomponent wijzigt, vloeit die wijziging automatisch door naar elke instance. Pas één keer de hoekradius of de kleurtoken van een knop aan, en je hoeft niet handmatig honderden toepassingen in het bestand te corrigeren.

Om een element in een component te veranderen, selecteer je het, klik je met de rechtermuisknop en kies je Create component (sneltoets: ⌥⌘K op macOS, Ctrl+Alt+K op Windows). Het is nu gemarkeerd met een paars ruit-icoon en je kunt het overal naartoe slepen vanuit het tabblad Assets in het linkerpaneel.

• Consistentie: één bron, overal dezelfde uitstraling.
• Snelheid: je begint nooit vanaf nul aan een nieuw scherm.
• Onderhoud: merkkleur veranderd? Pas het één keer aan, het werkt overal door.

Toestanden combineren met varianten

Een knop heeft eigenlijk niet maar één toestand: standaard, hover, ingedrukt, disabled... In plaats van er elk een apart component van te maken, heet de structuur die ze allemaal in één component set verzamelt een variant. Varianten houden de verschillende toestanden van hetzelfde component logisch bij elkaar.

Selecteer meerdere componenten en klik op Combine as variants in het rechterpaneel; Figma omvat ze in een gestreept paars kader. Dat kader is nu een component set. Je geeft elke variant betekenisvolle eigenschapsnamen en -waarden via het gedeelte "Properties" van het paneel.

Varianteigenschappen correct benoemen

De kracht van het variantsysteem komt voort uit een degelijke eigenschapsstructuur. Beschouw een eigenschap als een as: voor een knop kun je bijvoorbeeld twee assen definiëren.

• Type = Primary, Secondary, Ghost
• State = Default, Hover, Pressed, Disabled

Combineer deze twee eigenschappen en je krijgt 3 × 4 = 12 mogelijke combinaties, allemaal binnen één component set. Wanneer een ontwerper een instance gebruikt, kiest hij Type: Primary en State: Hover uit dropdowns in het rechterpaneel, en de juiste variant verschijnt direct.

Wees consistent in de naamgeving. Schrijf eigenschapsnamen en -waarden identiek op elk component; als State vermengd raakt met state, of Disabled met disable, behandelt Figma ze als aparte eigenschappen en valt de set uiteen. Houd waarden kort, leesbaar en logisch.

Boolean- en instance swap-eigenschappen

Varianten zijn niet het enige eigenschapstype. Figma biedt verschillende types die een component flexibeler maken:

• Boolean-eigenschap: zet een laag aan of uit. Maak bijvoorbeeld een schakelaar met de naam Has icon om het icoon in een knop te tonen.
• Instance swap-eigenschap: hiermee vervang je een geneste instance door een ander component. Je kunt de avatar binnen een kaartcomponent op het moment van gebruik door een andere avatar wisselen.
• Text-eigenschap: hiermee bewerk je de inhoud van een tekstlaag vanuit het rechterpaneel, zonder in de laag te hoeven duiken om hem te vinden.

Combineer deze eigenschappen met varianten en één enkel kaart- of knopcomponent dekt in zijn eentje tientallen verschillende scenario's.

Stap voor stap: een knopcomponent bouwen

Laten we de theorie in praktijk brengen. Een knopcomponent met toestandsvarianten bouw je vanaf nul in deze volgorde:

• 1. Teken een frame met auto layout (sneltoets Shift+A): plaats er tekst en een optioneel icoon in. Laat auto layout de padding en uitlijning beheren zodat de knop meegroeit als de tekst langer wordt.
• 2. Maak van dit frame een component (⌥⌘K / Ctrl+Alt+K).
• 3. Dupliceer het component, maak de kleur donkerder en maak hiervan de "Hover"-toestand. Herhaal dit voor "Pressed" en "Disabled".
• 4. Selecteer ze allemaal en klik op Combine as variants.
• 5. Geef in het rechterpaneel de eigenschap de naam State; voer als waarden Default, Hover, Pressed, Disabled in.
• 6. Koppel in plaats van kleuren met de hand in te typen een color variable (kleurtoken). Zo werkt het wijzigen van de merkkleur door in elke variant.

Naarmate deze bibliotheek groeit, onthult het definiëren van kleuren en spacing als variabelen de echte waarde van componenten: je designsysteem wordt gevoed vanuit één bron.

Veelgemaakte fouten

Er zijn een paar valkuilen waar mensen in trappen bij het bouwen van een componentsysteem. Ze vermijden houdt je bestand op lange termijn schoon.

• Te veel varianten: maak niet van elk klein verschil een variant. Vijf assen en 60 combinaties worden onbeheersbaar; los sommige verschillen op met boolean of instance swap.
• De detach-gewoonte: een instance loskoppelen en met de hand bewerken verbreekt de link. Gebruik in plaats daarvan overrides (tekst, kleur, swap).
• Inconsistente naamgeving: inconsistentie in hoofd-/kleine letters in eigenschaps- en waardenamen splitst de set.
• Geen variabelen gebruiken: kleuren als vaste hex invoeren maakt latere bulkupdates onmogelijk.

Veelgestelde vragen

Wat is het verschil tussen een component en een variant?

Een component is één herbruikbaar hoofdontwerpelement. Een variant is de structuur die verschillende toestanden van hetzelfde component (bijvoorbeeld Default en Hover) groepeert in één component set. Elke variant is dus eigenlijk een component; het variantsysteem houdt ze logisch bij elkaar.

Schaden varianten de prestaties?

In de praktijk beïnvloedt een redelijk aantal varianten de prestaties niet. Problemen ontstaan bij onnodige multi-as-sets die honderden combinaties opleveren. Het aantal assen beperken en boolean-/instance swap-eigenschappen gebruiken houdt het bestand licht.

Kan ik varianten later wijzigen?

Ja. Je kunt een component set selecteren om nieuwe varianten toe te voegen, eigenschappen te hernoemen of waarden te bewerken. Wijzigingen werken door naar alle gekoppelde instances, en daarom is het belangrijk om de naamgeving vanaf het begin consistent op te zetten.

Wil je orde brengen in je designsysteem? Ik kan je helpen een herbruikbare, op varianten gebaseerde Figma-componentbibliotheek te bouwen of je bestaande bestand op te schonen. Neem contact op en laten we het over je project hebben.