TODO: PageHeader

Hoofdmenu

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[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:

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:

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:

3.2.2 Layers

Layers worden geschreven in kleine letters. Bijvoorbeeld:

3.2.3 Componenten

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

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:

3.3 Sub-componenten

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

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[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[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

Checked

Disabled

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:

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:

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:

3.6.2 Positionering en witruimte

Buiten frames

Binnen frames

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

(Sub)component dat uit minstens 2 varianten bestaat:

Tokens - {naam-component}

Documentatie - {naam-component}

Demo - {naam-component}

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.

:::info[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

Experimental

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:

:::tip[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:

4.3.2 Positionering en witruimte

Buiten sections

Binnen sections

:::info[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[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:

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.