• Expertises
  • Cases
  • About
  • Contact
  • Expertises
  • Cases
  • About
  • Contact
More pages
Studio Goldfizh Digital Change Careers Interim Blogs
Find us at

Tractieweg 41K

3534AP Utrecht

Follow us
Instagram LinkedIn
Skip to content

Let’s team up!

Stories

Ruby

2022-04-29
Leestijd 10 min

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).

Deel deze blog op:

Ruby

UX Lead

ruby@goldfizh.nl

Hungry for more?

bekijk de volgende story

Nieuwsgierig geworden? Laat een berichtje achter!

    Copywriting
    • SEO
    • Webteksten
    • Tone of voice
    • Nieuwsbrief
    Marketing
    • Campagneplan
    • Data analyse
    • Marketing Automation
    • Advertising
    Customer Experience
    • Kanaalstrategie
    • Tech
    • UX/UI Design
    • Voice Technology
    Design
    • Huisstijl
    • Illustratie
    • Social media content
    • Visual Design
    Video
    • Explainers
    • Interactieve video
    • Animatie/motion
    • Podcast
    Interim

    Tractieweg 41K, 3534 AP Utrecht | privacy statement & algemene voorwaarden

    Tractieweg 41K, 3534 AP Utrecht
    Privacy statement & Algemene voorwaarden

    We zijn een marketing agency dus natuurlijk zijn wij gek op cookies 🍪
    Pas instellingen aanHelemaal prima
    Pas instellingen aan

    Privacy Overview

    This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
    Necessary
    Altijd ingeschakeld
    Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
    CookieDuurOmschrijving
    cookielawinfo-checkbox-advertisement1 yearSet by the GDPR Cookie Consent plugin, this cookie is used to record the user consent for the cookies in the "Advertisement" category .
    cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
    cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
    cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
    cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
    cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
    CookieLawInfoConsent1 yearRecords the default button state of the corresponding category & the status of CCPA. It works only in coordination with the primary cookie.
    viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
    Functional
    Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
    Performance
    Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
    Analytics
    Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
    CookieDuurOmschrijving
    _ga2 yearsThe _ga cookie, installed by Google Analytics, calculates visitor, session and campaign data and also keeps track of site usage for the site's analytics report. The cookie stores information anonymously and assigns a randomly generated number to recognize unique visitors.
    _ga_LDYV63GPNN2 yearsThis cookie is installed by Google Analytics.
    _gat_UA-112673873-11 minuteA variation of the _gat cookie set by Google Analytics and Google Tag Manager to allow website owners to track visitor behaviour and measure site performance. The pattern element in the name contains the unique identity number of the account or website it relates to.
    _gid1 dayInstalled by Google Analytics, _gid cookie stores information on how visitors use a website, while also creating an analytics report of the website's performance. Some of the data that are collected include the number of visitors, their source, and the pages they visit anonymously.
    CONSENT2 yearsYouTube sets this cookie via embedded youtube-videos and registers anonymous statistical data.
    Advertisement
    Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
    CookieDuurOmschrijving
    VISITOR_INFO1_LIVE5 months 27 daysA cookie set by YouTube to measure bandwidth that determines whether the user gets the new or old player interface.
    YSCsessionYSC cookie is set by Youtube and is used to track the views of embedded videos on Youtube pages.
    yt-remote-connected-devicesneverYouTube sets this cookie to store the video preferences of the user using embedded YouTube video.
    yt-remote-device-idneverYouTube sets this cookie to store the video preferences of the user using embedded YouTube video.
    yt.innertube::nextIdneverThis cookie, set by YouTube, registers a unique ID to store data on what videos from YouTube the user has seen.
    yt.innertube::requestsneverThis cookie, set by YouTube, registers a unique ID to store data on what videos from YouTube the user has seen.
    Others
    Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
    CookieDuurOmschrijving
    613b1c436df40a9c6a6bac18bab59537sessionNo description
    OPSLAAN & ACCEPTEREN
    Aangedreven door CookieYes Logo