Hoe gebruik je bibliotheken 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 Stijlen pictogram 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 aan het maken bent 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-out raster – het maken van Lay-out raster 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 Stijlen pictogram 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 iconen, 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 in een speciaal kader ingebed en in paars gemarkeerd, zodat je ze gemakkelijk kunt onderscheiden van andere lagen in het Laagpaneel.

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

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 iconen,
  • 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

Hoe kan sociale media de zichtbaarheid van uw bedrijf vergroten?

Wat zijn de voordelen van sociale media? Kan het gerichte traffic naar je bedrijfswebsite brengen?…

16 minutes ago

Top tips om je Amazon verkooprang te verhogen

Als je verkoopt op 's werelds populairste marktplaats, maak je je zeker zorgen over de…

2 hours ago

Top 5 tools voor het maken van landingspagina’s

De maatstaf voor de effectiviteit van een marketeer is het aantal conversies, dat wil zeggen…

4 hours ago

De kracht van AI in muziekcreatie verkennen | AI in business #33

Als het gaat om AI in muziekproductie, is het het beste in co-creatie, en vooral…

6 hours ago

Scrum Gids | 12. Samenwerking tussen Product Owner en Scrum Master

In het artikel van vandaag zullen we het onderwerp van samenwerking tussen de Product Owner…

8 hours ago

Waarom zijn zelfbewustzijn en zelfregulatie belangrijk in leiderschap?

Elke leider heeft doelen zoals het opbouwen van een team dat op gepaste wijze hoge…

9 hours ago