Component libraries bouwen in Figma: een handleiding voor UX-designers

Voor het eerst aan de slag met het opbouwen van een component library in Figma? We got your back! In deze blog leg ik je precies uit wat een component library is en hoe je met een component library als UX-designer een goede basis legt voor al jouw projecten.

Ga snel naar:

• Wat is een component library?
• Componenten ontwikkelen met atomic design?
• Een component library opbouwen in 5 stappen
• Meer weten over component libraries?

Wat is een component library?

Een component library is een digitale bibliotheek waarin je UI-componenten kunt aanmaken. Denk hierbij aan text styles, buttons, icons, formulieren; noem maar op. Als je je component library goed opzet, kun je al  deze componenten heel gemakkelijk hergebruiken in jouw design projecten. Het grote voordeel? Je werkt met one single source of truth: de componenten uit je component library zijn de bron en als je deze aanpast in je library, zullen deze wijzigingen in alle hergebruikte componenten worden doorgevoerd. Handig!

Componenten ontwikkelen met atomic design

Eh, atomic wat? Ik leg het je uit! Atomic design is een designmethode die is geïnspireerd op de scheikunde. Deze methode gaat ervan uit dat interfaces volledig afgebroken en opgebouwd kunnen worden vanuit kleine stukjes: atomen. Met deze atomen kun je steeds grotere componenten vormen: van atomen maak je moleculen en van moleculen maak je organismes. Zo bouw je heel consistent een soort bibliotheek met componenten op. Handig! Kortom, atomic design gebruik je op deze manier om complexe interfaces voor websites en apps op te bouwen. 

Een component library opbouwen in 5 stappen

Allemaal leuk en aardig, maar hoe máák je nou een component library? Ik neem je mee in een stappenplan dat gebaseerd is op het atomic design-principe. Persoonlijk werk ik graag in Figma: wat mij betreft dé ideale design software om mee te werken als je aan de slag wil met UX/UI-design en het opbouwen van een strakke component library. De volgende stappen zijn dus gebaseerd op Figma als tool met een premium account.

1. Zet jouw Figma file structure op
   Als je helemaal from scratch start, begin je met het aanmaken van een team. Hierin kun je je collega-designers toevoegen. Binnen dat team start je een project met daarin twee bestanden: één bestand waarin je je product gaat ontwerpen en één bestand waar je je component library in opzet. Het idee is dat je dit laatste bestand publiceert en koppelt aan je werkbestanden.
   
   Tip 1: Heb je nou geen premium account? Dan kun je dit niet doen. Een alternatief is dan om een aparte pagina aan te maken binnen je werkbestand en hierin je componenten op te bouwen.
   
   
2. Starten met het bouwen van componenten
   Ik start mijn component library altijd met kleur en typografie. Voeg de primaire kleuren toe en vul deze eventueel aan met secundaire kleuren en neutrale grijstinten. Geef text-styles alvast de juiste benaming (H1 t/m H6 + body tekst) zodat developers direct snappen hoe jouw designs zijn opgebouwd.
   
   Daarna kun je aan de slag met de ‘atoms’, zoals buttons, tags en cards. Ik begin vaak met veelgebruikte componenten als formuliervelden, dialog boxes, list items of notificaties. Kijk goed naar het type product dat je wil opbouwen en bedenk welke componenten daarvoor nodig zijn.
   
   Ben je tevreden met hoe je component eruit ziet? Tijd voor het echte werk! Door je design te selecteren en op je rechtermuisknop te klikken, maak je er met “create component” van een werkbaar component van.
   
   Heb je de basics vastgelegd? Dan kun je met deze ‘moleculen’ ‘organismen’ gaan opbouwen, geheel volgens het atomic design principe. Zo werk je bijvoorbeeld een heel formulier of een complete top-bar navigatie met drop-down menu uit.
   
   Tip 2: Wil je gebruik maken van een standaard design system zoals Material Design van Google? Dan is dit hét moment om hier alvast een template voor te downloaden. In de Figma community vind je talloze templates die je gratis kan gebruiken.
   
   
3. Voeg interactie toe aan je componenten
   Figma biedt een aantal handige mogelijkheden om interactie toe te voegen. Zo kun je bijvoorbeeld met ‘variants’ verschillende versies van jouw buttons uitwerken en laten zien wat hover- en active states doen. Met deze interactieve componenten komen jouw prototypes ook tot leven!
   
   Tip 3: Zorg ervoor dat jouw component library er net en overzichtelijk uitziet: alle betrokken collega’s moeten er namelijk lekker in kunnen werken. Geef alle componenten een duidelijke naam, dat helpt om de boel overzichtelijk te houden.
   
   
4. Koppelen van jouw component library
   Heb je je eerste componenten af? Dan is je component library ready to publish! Dit doe je door links in je menu op het icoon van het boekje te klikken. Een pop-up venster verschijnt waarin je je components library kunt publiceren.
   
   Vervolgens koppel jouw component library aan je werkbestand door in je werkbestand wederom in het linkermenu naar ‘assets’ te gaan, en vervolgens op het icoon van het boekje te klikken. Je krijgt dan een overzicht te zien waarin je jouw components library kunt activeren. Als je dat gedaan hebt, verschijnen jouw gemaakte componenten in de assets links in je Figma menu.
   
   
5. Design & improve
   Een component library is een dynamisch document en eigenlijk nooit echt af. Heb je bijvoorbeeld midden in een designproces toch een extra button nodig, of moet alle tekst in een ander font? Als je je component library netjes hebt gekoppeld, worden je aanpassingen met één klik op de knop in al je designs doorgevoerd.

Meer weten over component libraries?

Alle stappen gevolgd? Lekker bezig! Doe dit een paar keer en in no-time ben jij echte Figma pro. Wil je nou meer weten over dit onderwerp of wil je jouw component library naar het volgende level tillen? Lees dan verder in de blog: “Design systems: alles wat je als UX-designer moet weten”. Vragen of opmerkingen? Stuur ze naar UX lead Ruby (ruby@goldfizh.nl).