Zelf componenten maken

De Figma bibliotheek van het NL Design System bevat vast (nog) niet alle componenten die nodig zijn voor jouw organisatie. Je kunt zelf componenten gaan opbouwen of de bestaande componenten van jouw organisatie aanpassen. Hoe dan ook, het is het fijn als je dit doet op basis van de NL Design System structuur. Open-source en met design tokens, inclusief de juiste naamgeving. Zo kunnen componenten binnen de community met elkaar worden uitgewisseld.

Aan de hand van twee fictieve lokale componenten (Demo sticker en Demo card) laten we zien hoe je jouw componenten van design tokens voorziet volgens de NL Design System structuur.

Voordat je begint is het verstandig dat je het stappenplan hebt doorlopen. Heb je een vraag? Twijfel niet en neem contact op met het kernteam.

Demo sticker maken

In deze video laten we zien hoe je de 'Demo sticker' kan opbouwen met design tokens. Daaronder staat dit ook als tekst beschreven.

Pagina voorbereiden

Open jouw Local - [Organisatie] - Bibliotheek.
Voeg een nieuwe pagina toe en noem deze ‘Demo sticker’.
Plaats deze pagina in alfabetische volgorde.

Component maken

Verzamel de benodigde elementen (label en een icoon). Maak daarbij zo veel mogelijk gebruik van jouw [Organisatie] - Bibliotheek die je hebt gekoppeld aan je Local Bibliotheek.
Maak een component van de verzamelde elementen (Mac: ⌥ Option - ⌘ Command - K of Windows: Ctrl + Alt + K).
Noem de component ‘[organisatie]-demo-sticker’.

Component van huisstijl voorzien

Je kunt een component van huisstijl voorzien zoals je dat gewend bent (Shared Styles, Auto-layout, Variables). Zolang je deze designkeuzes uiteindelijk maar vastlegt via Token Studio. Hierdoor zijn je design tokens te koppelen met code. We vervolgen deze uitleg door direct te werken met de Tokens Studio plugin.

Tokens Studio plugin gebruiken

Open de Tokens Studio plugin.
Maak binnen ‘components’ een nieuwe set aan en noem deze ‘components/demo-sticker’.
Plaats dit component in alfabetische volgorde door het te slepen.
Zet de checkbox van demo-sticker aan.

Token naamgeving

Gebruik de documentatie over de naamgeving. Hierin staat hoe je naamgeving van component tokens op kan bouwen.

Kleur (color) tokens aanmaken

Voor een achtergrondkleur:
- Klik bij ‘Color’ op het plusje.
- Noem het nieuwe achtergrondkleur token ‘[organisatie].demo-sticker.background-color’.
- Kies bij ‘Color’ een kleur uit je common of brand niveau en klik op ‘Create’. We kiezen voor nu een kleur uit het brand niveau.
Voor een voorgrondkleur:
- Dupliceer het achtergrondkleur token. Op deze manier hoef je de naam niet in z’n geheel opnieuw te schrijven.
- Noem het nieuwe voorgrondkleur token ‘[organisatie].demo-sticker.color’.
- Kies opnieuw een kleur naar keuze en klik op ‘Create’.

Kleur tokens koppelen

Koppel de achtergrondkleur:
- Selecteer de juiste laag. In dit geval is dat het hele component.
- Klik op het aangemaakte achtergrondkleur token of gebruik rechtermuisklik en kies voor ‘Fill’.
Koppel de voorgrondkleur:
- Selecteer de lagen ‘Label’ en ‘Shape’ (gebruik diepe selectie: Mac: ⌘ Command of Windows: Control).
- Klik op het aangemaakte voorgrondkleur token.

Ruimte (spacing) tokens aanmaken

Gebruik de documentatie over de ruimte. Hierin staat informatie over de spacing scale en concepten.

Voor inline:
- Klik bij ‘Spacing’ op het plusje.
- Noem het nieuwe token ‘[organisatie].demo-sticker.padding-inline’.
- Kies bij ‘Value’ een waarde uit je common of brand laag en klik op ‘Create’. Tip: typ ‘{inline’ om gebruik te maken van autosuggestie.
Voor block:
- Dupliceer de inline token.
- Noem het nieuwe token ‘[organisatie].demo-sticker.padding-block’.
- Kies opnieuw een waarde naar keuze en klik op ‘Create’.

Ruimte tokens aan component koppelen

Selecteer de juiste laag. In dit geval is dat het hele component.
Gebruik rechtermuisklik bij de inline token en klik op ‘Left’ en ‘Right’.
Gebruik rechtermuisklik bij de block token en klik op ‘Top’ en ‘Bottom’.

Typografie tokens aanmaken

Voor font family:
- Klik bij ‘Font Family’ op het plusje.
- Noem het nieuwe typografie token ‘[organisatie].demo-sticker.font-family’.
- Kies bij ‘Font Family’ voor een typografie uit het common niveau en klik op ‘Create’.
Voor font weight:
- Om de dikte van het woord ‘Label’ te bepalen, klik je bij ‘Font Weight’ op het plusje.
- Noem het nieuwe typografie token ‘[organisatie].demo-sticker.font-weight’.
- Kies bij ‘Font Size’ een grootte uit het common niveau en klik op ‘Create’.
Voor font size en line height:
- Herhaal bovenstaande stappen met tokens uit het common niveau.

Typografie tokens aan component koppelen

Selecteer de laag ‘Label’ en klik op de aangemaakte typografie tokens.

Tokens aanpassen of nieuwe tokens maken

Voeg indien nodig tokens toe voor bijvoorbeeld de spacing tussen het icoon en het label, of voor de grootte van het icoon.

Varianten maken

Geef de achtergrondkleur van de component set de document.background-color uit het common niveau. Tip: dit is handig wanneer je ooit met dark-mode gaat werken. De achtergrondkleur kleurt dan mee.
Pas auto-layout toe de component met varianten. Kies 48px voor de vertical gap, horizontal padding en vertical padding.
Verander de naam van de property in overleg met je developer (bijv. ‘Appearance’). Tip: kijk hoe de properties worden genoemd bij andere componenten die ook meerdere varianten hebben.
Hernoem de varianten naar ‘Default’ en ‘Hyper’.

Border tokens aanmaken

Als voorbeeld voegen we enkel border tokens toe aan de 'hyper' variant.

Voor border kleur:
- Dupliceer het voorgrondkleur token.
- Noem het nieuwe border token ‘[organisatie].demo-sticker.hyper.border-color’.
- Kies bij ‘Color’ een kleur uit je common of brand niveau en klik op ‘Create’. We kiezen voor nu een kleur uit het brand niveau.
Voor border width:
- Klik bij ‘Border Width’ op het plusje.
- Noem het nieuwe border token ‘[organisatie].demo-sticker.hyper.border-width’.
- Kies bij ‘Border Width’ voor een dikte uit het brand of common niveau en klik op ‘Create’.

Border tokens aan component koppelen

Selecteer de variant ‘Hyper’.
Gebruik rechtermuisklik bij het border kleur token en klik op ‘Border’.
Gebruik rechtermuisklik bij het border width token en klik op ‘All’.

Afronden

Je bent klaar met het opbouwen van je component met design tokens!
De volgende stap is om de tokens inzichtelijk te maken voor anderen door ze te documenteren.

Demo sticker documenteren

In deze video laten we zien hoe je de design tokens van de 'Demo sticker' kan documenteren.

Demo card maken

In deze video laten we zien hoe je de 'Demo card' kan opbouwen met design tokens.

Demo card documenteren

In deze video laten we zien hoe je de design tokens van de 'Demo card' kan documenteren.

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.