Hoe bibliotheken te gebruiken in Figma? | Figma voor beginners #6

Hoe maak je stijlen en componentbibliotheken in Figma? Hoe gebruik je ze in je bestanden en deel je ze met andere teamleden? Je vindt het antwoord in het volgende artikel. Door stijlen te gebruiken, is het gemakkelijker om dingen consistent te houden in teamprojecten. Lees verder.

Bibliotheken in Figma – inhoudsopgave:

  1. Stijlen
  2. Componenten
  3. Stijlen en componenten publiceren in een bibliotheek

Stijlen

Dit zijn sets van eigenschappen die kunnen worden toegepast op lagen in projecten. Om een stijl te maken, moet je eerst het object selecteren waarvan je de eigenschappen wilt opslaan. Klik vervolgens op het Stijlenpictogram in het Eigenschappenpaneel naast de geselecteerde eigenschap en klik dan op het + pictogram.

Er opent een venster waarin je de naam van de stijl die je aanmaakt moet invoeren. Klik op Stijl maken.

Je ziet de gemaakte stijlen in het Eigenschappenpaneel wanneer er geen objecten zijn geselecteerd.

In het Stijlen bewerken paneel kun je een beschrijving toevoegen en de eigenschappen van elke stijl bewerken. Wanneer je wijzigingen aanbrengt in de eigenschappen van de geselecteerde stijl, worden die wijzigingen toegepast op alle objecten die deze gebruiken.

Je kunt de volgende stijlen maken:

Kleur (verf) stijlen – voor vullingen en lijnen, tekst en achtergronden, en zelfs voor afbeeldingen en verlopen.

Tekststijlen – dankzij tekststijlen kun je stijlen definiëren voor koppen en hoofdtekst. Je kunt tekststijlen toepassen op een hele tekstblok of alleen op een deel van de tekst in het blok. Je kunt definiëren: lettertype, grootte, regelhoogte, spatiëring.

Opmerking: met tekststijlen kun je de tekstuitlijning niet instellen.

Effecten – hier kun je schaduw- en vervagingseigenschappen definiëren.

Lay-outroosters – het maken van Lay-outrooster stijlen is nuttig als je een bepaalde structuur in meerdere projecten wilt dupliceren.

Om een stijl toe te passen op de actieve laag, klik je op het Stijlenpictogram in het Eigenschappenpaneel naast de geselecteerde eigenschap en selecteer je de stijl uit de lijst.

Om een stijl van de actieve laag te verwijderen, klik je op Stijlen loskoppelen. Dit is nuttig wanneer je wijzigingen aan een object wilt aanbrengen zonder de stijl te beïnvloeden.

Taak 6.1. Oefen met het maken van stijlen in Figma. Maak stijlen voor sectiekoppen op de startpagina, productnamen en prijzen.

Componenten

Dit zijn de bouwstenen van je ontwerpen die je kunt hergebruiken. Het kunnen pictogrammen, knoppen of complexere elementen zijn. Componenten helpen je ontwerpen consistent te houden en stellen je in staat om snel wijzigingen aan te brengen in meerdere bestanden en projecten.

Om een component te maken, moet je eerst de lagen selecteren die de component zullen vormen en vervolgens op Component maken in de Werkbalk klikken.

De componentlagen worden ingebed in een speciaal kader en gemarkeerd in paars, zodat je ze gemakkelijk kunt onderscheiden van andere lagen in het Lagenpaneel.

Componenten krijgen automatische namen. Je kunt componenten hernoemen in het Lagen-tabblad. Net als bij andere lagen, dubbelklik je op de naam. Nadat je een component in het Eigenschappenpaneel hebt geselecteerd, kun je een componentbeschrijving en een Documentatielink voor teamleden toevoegen.

Je kunt de componenten bekijken in het Assets-tabblad in het Lagenpaneel.

Taak 6.2. Oefen met het maken van componenten in Figma. Maak de volgende componenten:

  • een zoekbalk – bestaande uit een placeholder, vergrootglas pictogram en “Zoeken” tekst,
  • een onderbalk – bestaande uit een rechthoek en pictogrammen,
  • CTA-knoppen – bestaande uit een rechthoek en tekst.

Stijlen en componenten publiceren in een bibliotheek

Wanneer je stijlen en componenten maakt, heb je alleen toegang tot hen in het huidige bestand. Om stijlen en componenten in andere bestanden te gebruiken, kun je ze in de bibliotheek publiceren. De optie om stijlen te delen is beschikbaar in de Werkbalk – vouw het menu naast de bestandsnaam uit en klik op Stijlen en componenten publiceren.

Je hebt net geleerd hoe je bibliotheken in Figma gebruikt. Lees ook: Wat doet een UX-ontwerper?

Als je onze inhoud leuk vindt, sluit je dan aan bij onze drukke bijengemeenschap op Facebook, Twitter, LinkedIn, Instagram, YouTube, Pinterest.

Klaudia Kowalczyk

Een grafisch en UX-ontwerper die in zijn ontwerpen overbrengt wat niet in woorden kan worden uitgedrukt. Voor hem heeft elke gebruikte kleur, lijn of lettertype een betekenis. Gepassioneerd in grafisch en webdesign.

View all posts →

Klaudia Kowalczyk

Een grafisch en UX-ontwerper die in zijn ontwerpen overbrengt wat niet in woorden kan worden uitgedrukt. Voor hem heeft elke gebruikte kleur, lijn of lettertype een betekenis. Gepassioneerd in grafisch en webdesign.

Share
Published by
Klaudia Kowalczyk

Recent Posts

De rol van AI in contentmoderatie | AI in business #129

Bedrijven worstelen met het beheren van een enorme hoeveelheid inhoud die online wordt gepubliceerd, van…

2 weeks ago

Sentimentanalyse met AI. Hoe helpt het om verandering in bedrijven te stimuleren? | AI in het bedrijfsleven #128

In het tijdperk van digitale transformatie hebben bedrijven toegang tot een ongekende hoeveelheid gegevens over…

2 weeks ago

Beste AI-transcriptietools. Hoe lange opnames om te zetten in beknopte samenvattingen? | AI in het bedrijfsleven #127

Wist je dat je de essentie van een meeruurs opname van een vergadering of gesprek…

3 weeks ago

AI video-generatie. Nieuwe horizonten in videoinhoudproductie voor bedrijven | AI in het bedrijfsleven #126

Stel je een wereld voor waarin jouw bedrijf boeiende, gepersonaliseerde video's kan maken voor elke…

3 weeks ago

LLMOps, of hoe taalmodellen effectief te beheren in een organisatie | AI in het bedrijfsleven #125

Om het potentieel van grote taalmodellen (LLM's) volledig te benutten, moeten bedrijven een effectieve aanpak…

3 weeks ago

Automatisering of augmentatie? Twee benaderingen van AI in een bedrijf | AI in het bedrijfsleven #124

In 2018 was Unilever al begonnen aan een bewuste reis om automatisering en augmentatie in…

3 weeks ago