Ga naar hoofdinhoud

Figma hygiëne

Deze Figma hygiëne beschrijft richtlijnen voor het opzetten, structureren en onderhouden van Figma bestanden binnen NL Design System.

De richtlijnen zijn bedoeld als uitgangspunt, niet als strikte regels. Door deze hygiëne zoveel mogelijk te volgen, worden componenten, patronen en templates beter uitwisselbaar tussen teams en organisaties, en blijft de Figma omgeving overzichtelijk en voorspelbaar.

Gebruik deze documentatie als houvast bij het ontwerpen, onderhouden en delen van Figma bestanden.

1. Figma omgeving

De NL Design System Figma omgeving maakt gebruik van het 'Organization plan'.

1.1 Teams

De NL Design System Figma omgeving bestaat uit de volgende teams, die ieder een eigen doel en scope hebben:

1.2 Projecten

1.2.1 Bibliotheken

Hier staan Figma bestanden die als bibliotheek worden ingezet.

NL Design System - Bibliotheek

In deze bibliotheek staan componenten met de status 'Community' en 'Candidate'. Het doel is om via het estafettemodel toe te werken naar componenten met de status 'Hall of Fame'.

Bekijk 'NL Design System - Bibliotheek' in Figma

NL Design System - ToDo Bibliotheek

In deze bibliotheek staan componenten met de status 'Help Wanted' of 'Experimental'. Deze componenten zijn nog niet in code beschikbaar.

Bekijk 'NL Design System - ToDo Bibliotheek' in Figma

1.2.2 Werkbestanden

Hier staan Figma bestanden die dienen als werkbestanden voor het kernteam. Bijvoorbeeld:

Schetsboek

Een bestand om snel ideeën uit te werken, te delen of vast te leggen.

Bekijk 'NL Design System - Schetsboek' in Figma

Voorbeeld bibliotheken

Duplicaten van de Figma bibliotheken met het Voorbeeld-thema. Deze dienen als voorbeeld om te laten zien hoe organisaties de Figma bibliotheken kunnen gebruiken met een eigen thema. Het kernteam gebruikt deze ook om te ervaren hoe het voor organisaties is om wijzigingen aan hun kant over te nemen. Daarnaast worden ze ingezet ter ondersteuning van de changelog video’s.

Voorbeeld templates

Bestand met complete templates, opgebouwd uit componenten uit de 2 Figma bibliotheken met het Voorbeeld-thema. Het laat zien hoe organisaties de Figma bibliotheken kunnen gebruiken om prototypes te maken. Daarnaast gebruikt het kernteam dit om te ervaren hoe het is om als afnemer updates van bibliotheken over te nemen.

Bekijk 'NL Design System - Templates - Voorbeeld' in Figma

Tip: houd bibliotheken en bestanden overzichtelijk

Gebruik comments voor aantekeningen en vragen. Het voordeel is dat je op elkaar kunt reageren, naar een specifieke comment kunt linken en deze als opgelost kunt markeren. Comments die als opgelost zijn gemarkeerd, kun je altijd eenvoudig terugvinden.

Maak gebruik van versiebeheer. Op deze manier kun je eerdere versies bekijken of herstellen. Figma slaat automatisch versies op, maar het is aan te raden om af en toe zelf een versie aan te maken en deze een duidelijke naam te geven.

Plaats schetsen, losse ideeën, kladjes en experimenten op een aparte pagina of in een apart Figma bestand, zoals een 'Schetsboek'.

1.2.3 Archief

Hier staan Figma bestanden die niet langer nodig of relevant zijn.

2. Figma bestanden

De volgende punten gelden voor alle Figma bestanden.

2.1 Bestandsnaam

Binnen NL Design System worden bibliotheken benoemd als NL Design System - {type-bibliotheek} - {naam-organisatie}. Bijvoorbeeld:

  • NL Design System - Bibliotheek - Utrecht
  • NL Design System - Bibliotheek - Groningen
  • NL Design System - ToDo Bibliotheek - Voorbeeld

Gebruik deze naamgevingsconventie om duidelijkheid te geven over de herkomst en status van componenten.

2.2 Cover

Elk Figma bestand begint met een pagina ‘Cover’. Dit is de thumbnail die zichtbaar is in het Figma bestandenoverzicht. Je kunt de kleurstelling en titel aanpassen. Gebruik de functionaliteit ‘Set as thumbnail’ om deze cover te updaten.

2.3 Read me

Elk Figma bestand heeft als tweede pagina een 'Read me' frame waar wordt beschreven waar het bestand voor dient.

2.4 Open source

Standaard zijn Figma bestanden niet door iedereen te bekijken. Omdat er binnen NL Design System open source wordt gewerkt, is het belangrijk dat het bestand voor iedereen zichtbaar is. Dit doe je door bij 'Share' te kiezen voor de optie 'Anyone can view'.

3. Component bibliotheken

De volgende punten gelden specifiek voor de Figma bibliotheken.

3.1 Bibliotheek indeling

Per component wordt er 1 pagina gehanteerd, gerangschikt in alfabetische volgorde. Dit biedt de volgende voordelen:

  • Relevante context per pagina. Door op elke pagina specifieke documentatie en context over de component toe te voegen, krijgen designers en developers direct inzicht in het gebruik en de richtlijnen, zonder afleiding van andere elementen.
  • Snellere en eenvoudigere navigatie. Het terugvinden van specifieke componenten wordt een stuk makkelijker doordat elke component een eigen, goed vindbare pagina heeft.
  • Betere versiebeheer en overzicht van wijzigingen. Alle opmerkingen en wijzigingen over een component blijven op 1 plek. Dit zorgt voor duidelijkheid en voorkomt verwarring bij het doorvoeren van updates.
  • Kortere laadtijden. Door componenten te verdelen over meerdere pagina’s, verbetert de laadtijd per pagina. Dit voorkomt dat Figma traag wordt, met name bij grotere bibliotheken.

3.2 Schrijfwijze

3.2.1 Pages, Headings, Frames, Properties en Property values

Pages, Headings, Frames, Properties én Property values worden geschreven met een hoofdletter aan het begin van elk woord. Bijvoorbeeld:

  • Button
  • Action Group
  • Icon Start
  • Tokens - Button
  • Documentatie - Button
  • Documentatie - Icon Size
  • Demo - Accordion

3.2.2 Layers

Layers worden geschreven in kleine letters. Bijvoorbeeld:

  • text
  • content

3.2.3 Componenten

De componenten, zoals deze vanuit de bibliotheek worden gepubliceerd, worden altijd geschreven in 'kebab-case', inclusief een prefix. Bijvoorbeeld:

  • utrecht-button
  • denhaag-side-navigation
  • nl-link

3.2.4 Sub-componenten

Soms zijn componenten opgesplitst in sub-componenten. Deze sub-componenten krijger een kortere naam, zodat lagen beter leesbaar blijven.

Sub-componenten worden altijd geschreven in 'kebab-case', met 2 underscores voor de naam van het element. De naam van de component wordt weggelaten.

Hierdoor blijven sub-componenten verborgen bij het gebruik van de bibliotheek en sluit de naamgeving aan bij de BEM-conventie, die ook in code wordt toegepast. Bijvoorbeeld:

  • .denhaag-contact-timeline__step-header wordt __step-header
  • .denhaag-contact-timeline__step wordt __step
  • .utrecht-accordion__button wordt __button

3.3 Sub-componenten

Door gebruik te maken van sub-componenten, blijft de component overzichtelijk, beheersbaar en herbruikbaar. Maak sub-componenten aan wanneer:

  • de component te complex is, bijvoorbeeld bij Calendar, Progress List of Table;
  • de sub-component meerdere states bevat;
  • de component herhalende onderdelen bevat, zoals 'Items' in een 'List'.

3.4 Properties

3.4.1 Volgorde van properties

De volgorde van properties kan per component verschillen. Over het algemeen geldt: de meest impactvolle of vaak gebruikte properties staan bovenaan. Zie deze lijst als uitgangspunt, niet als een strikte regel.

  1. Appearance / Purpose / Type
  2. Position / Level / Size
  3. State
  4. Checked
  5. Current
  6. Disabled
  7. Expanded
  8. Indeterminate
  9. Invalid
  10. Pressed
  11. Read-only
  12. Nested
  13. Container
  14. Text
  15. Show Icon Start
  16. ↳ Icon Start
  17. Show Icon End
  18. ↳ Icon End
  19. Show {naam-optie}
Tip: tekst property gelijk houden

Trek de Figma property voor tekst zoveel mogelijk gelijk tussen componenten. Gebruik hiervoor consequent de propertynaam 'Text'. Zo blijven teksten behouden bij het inwisselen van componenten via Swap Instance.

Tip: wanneer Small en Large Container uitwerken

Werk varianten 'Small' en 'Large' alleen uit wanneer het gedrag of de opbouw van een component verandert. Denk aan content die in een Small Container wordt gestapeld, terwijl deze in Large Container naast elkaar staat. Zo blijft het aantal varianten beperkt.

3.4.2 Volgorde van property values

Over het algemeen geldt: de meest gebruikte waarde staat bovenaan. Zie deze lijst als uitgangspunt, niet als een strikte regel.

State

  • Default
  • Active
  • Hover
  • Focus-visible
  • Visited

Checked

  • False
  • True

Disabled

  • False
  • True

3.4.3 Exposed properties

Wanneer je een nested instance gebruikt binnen een component (bijvoorbeeld een Paragraph in een Alert), vermijd dan exposed properties om de volgende redenen:

  • Te veel opties in het component-panel kunnen verwarrend zijn.
  • Exposed properties geven geen controle over de volgorde van properties in het component-panel.
  • Het risico bestaat dat een ongewenste variant wordt gekozen (bijvoorbeeld bij de Paragraph purpose 'Lead' in plaats van 'Default').
  • Er kan altijd worden doorgeklikt naar de (sub-)component om tekst of andere eigenschappen handmatig aan te passen.

3.5 Iconen

Iconen worden, waar mogelijk, samengevoegd tot 1 vorm door gebruik te maken van de 'Flatten' functialiteit.

Iconen hebben de volgende opbouw van lagen:

  • {naam-icoon}
    • Group
      • Shape

Bekijk de opbouw van iconen in 'NL Design System - Bibliotheek' in Figma

3.6 Structuur en positionering

3.6.1 Volgorde van frames

De volgorde van frames is als volgt:

  1. Tokens
  2. Sub-componenten (indien van toepassing)
  3. De component
  4. Documentatie
  5. Demo (indien van toepassing)

Bijvoorbeeld:

  • Tokens - Accordion
  • __button
  • __panel
  • __section
  • utrecht-accordion
  • Documentatie - Accordion
  • Demo - Accordion

3.6.2 Positionering en witruimte

Buiten frames

  • De 'Page Heading' is gepositioneerd op X:0 en Y:0.
  • De 'Estafette Badge' staat 80px onder de Page Heading.
  • Het eerste frame, vrijwel altijd Tokens - {naam-component}, staat 80px onder de Estafette Badge.
  • Als een pagina geen Estafette badge heeft, staat het frame 160px onder de Page Heading.
  • Elke implementatie van een component bestaat uit de frames Tokens - {naam-component}, de component zelf en Documentatie - {naam-component}. Tussen deze frames zit horizontaal 80px.

Binnen frames

Er wordt gebruik gemaakt van auto-layout om de witruimte binnen frames te bepalen.

(Sub)component dat uit minstens 2 varianten bestaat:

  • Verticale gap: 48px
  • Horizontale padding: 48px
  • Verticale padding: 48px

Tokens - {naam-component}

  • Verticale gap: 48px
  • Horizontale padding: 48px
  • Verticale padding: 64px

Documentatie - {naam-component}

  • Verticale gap: 48px
  • Horizontale padding: 48px
  • Verticale padding: 64px

Demo - {naam-component}

  • Verticale gap: 48px
  • Horizontale padding: 16px
  • Verticale padding: 64px

3.7 Estafette Badges

De Estafette Badge bij een component geeft aan welke status de component heeft binnen het estafettemodel. Deze status komt overeen met de status zoals aangegeven op de documentatiewebsite.

Verschil in status

Omdat de Figma bibliotheken en de documentatie website in ontwikkeling zijn, kan het voorkomen dat de estafettemodel status niet overeenkomt. Gebruik de documentatiewebsite als leidend voor de officiële status.

3.7.1 Speciale statussen: Help Wanted en Experimental

Help Wanted

  • Deze componenten hebben de Help Wanted status op de documentatiewebsite.
  • In de Figma bibliotheek bevatten ze een verwijzing naar de documentatiewebsite en vaak al tokens (met als prefix 'todo').
  • Dit maakt verdere ontwikkeling richting de Community status eenvoudiger.

Experimental

  • Deze componenten hebben nog geen enkele stap binnen het estafettemodel gezet.
  • Ze hebben geen verwijzing naar de documentatiewebsite en bevatten geen tokens.
  • Dit zijn vroege experimenten die nog geen officiële status hebben.

3.8 Annotaties

Annotatie stickers kunnen in templates worden gebruikt om aanvullende informatie te geven aan developers. Denk aan teksten die visueel verborgen zijn, maar wel in de code aanwezig moeten zijn.

3.9 Zelf componenten maken

Soms ontbreekt de component die je nodig hebt in de bibliotheken. Ontwikkel deze in dat geval volgens de NL Design System architectuur.

Bekijk hoe je als designer een component kunt maken in Figma

4. Templates en prototypes

De volgende punten gelden voor templates of bestanden waar je prototypes in maakt.

4.1 Bestand indeling

De volgende indeling wordt gehanteerd voor bestanden waarin templates en prototypes staan:

Cover
Read me
---
# Sectie A
Sub-sectie A-1
Sub-sectie A-2
Sub-sectie A-3
---
# Sectie B
Sub-sectie B-1
Sub-sectie B-2
Sub-sectie B-3

4.2 Schrijfwijze

4.2.1 Frames

Voor frames wordt de volgende structuur gehanteerd voor de schrijfwijze: Viewport_Naam-van-pagina_Aanvulling--state. 'SV' staat voor 'Small Viewport' en 'LV' staat voor 'Large Viewport'. Bijvoorbeeld:

  • SV_Detailpagina
  • LV_Detailpagina
  • SV_Titel-van-stap--invalid
  • SV_Titel-van-stap_Opslaan
  • SV_Titel-van-stap_Opslaan--invalid
  • SV_Inloggen_Ja
  • SV_Inloggen_Nee
  • SV_Uw-gegevens--logged-in
Tip: vermijd termen zoals 'Mobile' en 'Desktop'

Door de grote variatie aan devices, resoluties en scherminstellingen is niet vast te stellen of iemand een smartphone, tablet of laptop gebruikt.

4.3 Structuur en positionering

4.3.1 Pages

Per patroon, template of prototype wordt er een aparte 'Page' aangemaakt. Denk hierbij aan:

  • Homepage
  • Detailpagina
  • Zoeken
  • Meerstappenformulier
  • Mijn omgeving

4.3.2 Positionering en witruimte

Buiten sections

  • De 'Page 'Heading' is gepositioneerd op X:0 en Y:0.
  • De eerste 'section' staat 800px onder de Page Heading.
  • Tussen meerdere Sections zit verticaal 800px.

Binnen sections

  • In de section staat de 'Section Heading' gepositioneerd op X:800 en Y:400.
  • De 'Page Title' annotatie staat 80px onder de Section Heading.
  • Het eerste scherm staat 80px onder de Page Title.
  • Tussen de Small Viewport en Large Viewport van één scherm zit 80px.
  • Tussen verschillende schermen zit horizontaal 800px.
Sections in templates

Gebruik 'Sections', ook wanneer er slechts 1 scherm is. Sections zorgen voor een consistente opbouw van de pagina, een opgeruimd overzicht en betere leesbaarheid bij het uitzoomen.

4.4 Annotaties

Annotatie stickers kunnen in schermen worden gebruikt om aanvullende informatie te geven aan developers. Denk aan een voorstel voor de titel van een pagina.

4.5 Breedte van frames

Tip: ontwerp mobile-first

Begin bij het ontwerpen van schermen, templates en componenten vanuit het mobile-first principe. Dit zorgt ervoor dat je direct duidelijke keuzes maakt in volgorde en prioriteit, omdat de ruimte is beperkt.

Het kernteam gebruikt de volgende breedte van frames:

  • Small Viewport: 360px
  • Large Viewport: 1440px

Help deze documentatie te verbeteren

Om ervoor te zorgen dat deze documentatie nuttig, relevant en up-to-date is, kun je een wijziging voorstellen via Github.

Vragen

Heb je een vraag? Twijfel niet en neem contact op met het kernteam.