Ga naar hoofdinhoud

Figma migratie-stappenplan

Figma migratie-stappenplan

Over dit migratie-stappenplan

Dit migratie-stappenplan noemen we ook wel de 'Big Bieb Sync'. Zoals aangegeven is er zoveel veranderd dat een verse installatie sneller is dan alles aan jouw kant stap voor stap aanpassen. Met dit stappenplan helpen we je stap voor stap te migreren.

Migratie informatie

Het migratie-stappenplan lijkt grotendeels op het algemene Figma stappenplan, maar is uitgebreid met extra uitleg voor iedereen die al eerder met Figma bibliotheken en Tokens Studio heeft gewerkt.

Onderaan deze pagina vind je extra secties voor migratie waarbij we met je meedenken over de volgende vraagstukken:

  • Wat doe ik met mijn huidige bibliotheken?
  • Wat doe ik met mijn lokale bibliotheek?
  • Wat doe ik met mijn prototypes?

Op naar 'Doel 3' en voorbereiding

In het algemene stappenplan spreken we over 3 doelen. Men kan stoppen zodra het eigen doel is behaald.

  1. Snel een prototype maken met componenten op basis van het Start-thema.
  2. Voor een langere periode met componenten werken op basis van het Start-thema.
  3. Voor een langere periode met componenten werken op basis van een eigen thema.

Elk doel bouwt voort op het vorige. We geven steeds aan wanneer je een doel hebt behaald, zodat je weet wanneer je verder kunt, of juist klaar bent.

Voor een complete migratie met een eigen thema zal je doel 3 willen behalen.

Voordat je begint, is het slim om de volgende documentatie te hebben gelezen:

Loop je ergens vast? Geen zorgen. Neem contact op met het kernteam en we denken graag met je mee.

Cover pagina's van Figma bibliotheek met Start-thema en Voorbeeld-thema.

OK. Aan de slag!

Figma bibliotheken

Migratie informatie

Voor de migratie plaats je de nieuwe bibliotheken naast je huidige bibliotheken.

🎥 Video: Nieuwe bibliotheken positioneren

Maak een Figma project aan

We adviseren je om binnen Figma een apart ‘Project’ voor je Design System aan te maken. Zo houd je een duidelijke scheiding tussen je Design System en overige design bestanden.

Meer informatie over Figma bestanden en projecten

Meer informatie over Figma kun je vinden op help.figma.com en forum.figma.com.

Figma bibliotheken dupliceren

De Figma bibliotheken zijn Open Source beschikbaar en te bereiken via Figma Community.

🎥 Video: Bibliotheken dupliceren

Het duplicaat staat nu in je 'Drafts'. Verplaats de bibliotheek naar het Figma project dat je hebt aangemaakt.

  • Klik op het chevron icoon naast de naam van 'NL Design System - Bibliotheek (Community)'.
  • Kies voor 'Move file...'.
  • Selecteer de gewenste locatie.

Herhaal deze stappen voor de 'NL Design System - ToDo Bibliotheek'.

Om duidelijk te maken dat deze bestanden nu binnen jouw organisatie staan, pas je de naam aan.

  • Hernoem NL Design System - Bibliotheek (Community) naar NL Design System - Bibliotheek - {naam-organisatie}.
  • Hernoem NL Design System - ToDo Bibliotheek (Community) naar NL Design System - ToDo Bibliotheek - {naam-organisatie}.

Figma bibliotheken publiceren

De Figma bestanden zijn nog geen bibliotheken. Om er bibliotheken van te maken die je vanuit andere bestanden kan aanroepen, moeten ze worden gepubliceerd.

🎥 Video: Bibliotheken publiceren

  • Klik op 'Assets'.
  • Klik op 'Publish...'.

Herhaal deze stappen voor de NL Design System - ToDo Bibliotheek.

Figma bibliotheken koppelen

Nadat de bestanden zijn gepubliceerd, moeten ze aan elkaar worden gekoppeld. Hierdoor wordt de connectie tussen componenten uit beide bibliotheken hersteld.

🎥 Video: Bibliotheken koppelen

  • Ga binnen NL Design System - Bibliotheek - {naam-organisatie} naar Assets.
  • Klik op 'Add more libraries'.
  • Zoek of browse naar de NL Design System - ToDo Bibliotheek - {naam-organisatie}.
  • Klik op 'Add to file'.

Herhaal deze stappen, maar dan gezien vanuit de NL Design System - ToDo Bibliotheek.

Helaas komt het voor dat componenten ondanks het koppelen toch hun connectie met de andere bibliotheek verliezen. Daarom is het verstandig om dit te controleren.

  • Ga binnen NL Design System - Bibliotheek - {naam-organisatie} naar Assets.
  • Klik op het boek icoon.
  • Klik op 'View missing libraries'.
  • Kies voor NL Design System - ToDo Bibliotheek - {naam-organisatie}.
  • Klik op 'Swap library'.

Herhaal deze stappen, maar dan gezien vanuit de NL Design System - ToDo Bibliotheek.

Figma bibliotheken gebruiken

Nu kun je de bibliotheken gebruiken voor het maken van prototypes. Hiervoor moet je de bibliotheken koppelen aan een Figma bestand.

🎥 Video: Bibliotheken gebruiken

  • Maak een nieuw bestand aan.
  • Maak een eerste Frame aan.
  • Klik op 'Browse team libraries'.
  • Zoek op 'nl design system'. De bibliotheken verschijnen vanzelf.
  • Klik op 'Add to file' voor de NL Design System - Bibliotheek - {naam-organisatie}.
  • Klik op 'Add to file' voor de NL Design System - ToDo Bibliotheek - {naam-organisatie}.

Nu kun je componenten uit beide bibliotheken gebruiken voor het maken van een prototype.

Doel 1 behaald 🎉

Je kunt nu stoppen als je doel was om snel een prototype te maken met componenten op basis van het Start-thema. Wil je voor een langere periode met deze componenten werken? Ga dan verder met het stappenplan.

Tokens Studio

Design tokens staan buiten Figma opgeslagen in een JSON bestand. Of je nu het Start-thema blijft gebruiken of een eigen thema wilt doorvoeren: je wilt een connectie leggen met de design tokens. Dat doe je door gebruik te maken van Tokens Studio plugin.

De plugin wordt regelmatig bijgewerkt. Hierdoor kunnen onderstaande stappen, video's en screenshots verouderd raken. Voor de meest up-to-date documentatie van de plugin ga je naar docs.tokens.studio.

  • Wil je enkel van het Start-thema gebruik maken? Vervolg dan het stappenplan.
  • Wil je een eigen thema doorvoeren? Ga dan verder bij 'Zelf een thema doorvoeren'.
Migratie informatie

Voor de migratie ga je verder bij 'Zelf een thema doorvoeren'.

Tokens Studio gebruiken voor het Start-thema

🎥 Video: Tokens Studio gebruiken voor het Start-thema

  • Open NL Design System - Bibliotheek - {naam-organisatie}.
  • Klik op 'Actions' (Cmd+K).
  • Zoek op 'Tokens Studio'.
  • Open 'Tokens Studio'.

Het introductiescherm kan er anders uitzien, maar zorg ervoor dat je bij het tabblad ‘Settings’ terechtkomt.

  • Klik op 'Add new sync provider'.
  • Kies voor 'URL'.
  • Vul een naam in. Bijvoorbeeld: Start-thema.
  • Vul de volgende URL in:
https://raw.githubusercontent.com/nl-design-system/themes/refs/heads/main/packages/start-design-tokens/figma/start.tokens.json
  • Klik op 'Save'.
  • Klik vervolgens op de tab ‘Tokens’ en... voilà! Daar zal je de tokens hebben.
  • Vink de checkboxes 'brand', 'common' en 'components' aan.

De design tokens van het Start-thema zijn nu gekoppeld aan de Figma bibliotheek.

Herhaal deze stappen, maar dan gezien vanuit de NL Design System - ToDo Bibliotheek.

Tip

Wil je het Voorbeeld-thema inladen? Dat kan! Vul dan de volgende URL in bij ‘Sync provider’:

https://raw.githubusercontent.com/nl-design-system/themes/refs/heads/main/packages/voorbeeld-design-tokens/figma/voorbeeld.tokens.json

🎥 Video: Tokens Studio gebruiken voor het Voorbeeld-thema

Updates

Het kernteam zit natuurlijk niet stil. We voeren geregeld updates door in de Figma bibliotheken én het JSON bestand met design tokens. Omdat je via een URL gekoppeld bent aan het JSON bestand, ben je automatisch up-to-date. Je kunt de Figma bibliotheken 'in sync' houden door de updates die wij doen, ook aan jouw kant door te voeren.

Op de pagina 'Figma changelog' zie je welke updates zijn doorgevoerd. Wanneer je deze updates doorvoert, bepaal je helemaal zelf. We raden wel aan om dit met enige regelmaat te doen, zodat je zeker weet dat je met de nieuwste versies werkt.

We sturen eens in de 2 maanden een reminder via Slack in het #nl-design-system-designers kanaal.

Doel 2 behaald 🎉

Je kunt nu stoppen als je doel was om voor een langere periode met componenten te werken op basis van het Start-thema.

Vervolg het stappenplan als je een eigen thema wilt doorvoeren.

Zelf een thema doorvoeren

Als je een eigen thema wilt doorvoeren, ga je werken met GitHub en Tokens Studio. GitHub gebruik je om het JSON-bestand met design tokens op te slaan. Met de Tokens Studio plugin importeer, bewerk en exporteer je tokens in Figma.

Bij elke stap vind je een video waarin we laten zien hoe we een thema doorvoeren voor de fictieve 'gemeente Voorbeeld'.

Laten we beginnen aan de kant van GitHub.

Eerlijk is eerlijk. Als je niet bekend bent met GitHub kunnen de volgende stappen lastig zijn. Loop je vast? Vraag dan een developer uit je team om hulp, of neem contact op met het kernteam.

GitHub account aanmaken

Maak een account aan bij github.com.

GitHub Repository

Een repository kan je zien als de hoofdmap van je project. Binnen deze repository plaats je het JSON bestand met design tokens.

Afhankelijk van de situatie van jouw organisatie zal worden bepaald waar het JSON bestand moet komen staan.

Situatie A
Jouw organisatie heeft al een map met design tokens binnen de NL Design System 'themes repository'.

  • Controleer wanneer de laatste wijziging op de design tokens heeft plaatsgevonden.
  • Bekijk wie deze wijzigingen heeft gedaan.

Screenshot van GitHub waarbij is af te lezen dat het JSON bestand 4 jaar geleden door ene Robbert voor het laatst is aangepast.

Zijn de wijzigingen recent? En ken je de persoon die ze heeft gedaan? Stem dan even met elkaar af. Kom je er niet uit? Stel je vraag gerust in Slack.

Situatie B
Jouw organisatie heeft nog géén map binnen de NL Design System 'themes repository'. En dat wil je wel.

Neem contact op met het kernteam.

Situatie C
Jouw organisatie werkt vanuit een eigen GitHub omgeving.

Inhoud JSON met Start-thema kopiëren

🎥 Video: Inhoud JSON kopieren

De Figma bibliotheken maken gebruik van het Start-thema. Het JSON bestand dat hierbij hoort staat in GitHub.

screenshot van GitHub waarbij er een cirkel om de functionaliteit van 'copy raw file' staat.

JSON bestand aanmaken

Migratie informatie

Voor de migratie plaats je het nieuwe JSON bestand naast het huidige JSON bestand.

🎥 Video: JSON inwisselen

🎥 Video: JSON bestand aanmaken

  • Ga naar de locatie waar het JSON bestand moet komen staan.
  • Klik op 'Add file'. Je vindt deze functie rechtsboven.
  • Kies voor 'Create new file'.
  • Geef het bestand een naam. Bijvoorbeeld: {naam-organisatie}.tokens.json.
  • Plak de inhoud van het JSON bestand met het Start-thema.
  • Klik op 'Commit changes'.
  • Als commit message kun je noteren: json met design tokens toegevoegd.
  • Als branch kun je noteren: add-tokens-json
  • Klik op 'Propose changes'.
  • Klik op 'Create pull request'.
  • Geef development een seintje en zorg dat je pull request wordt goedgekeurd.

Voor situatie A en B is dit een developer uit het kernteam. Neem contact op met het kernteam.

Voor situatie C is dit een developer van je eigen organisatie.

Personal access token aanmaken

Ondanks de naam heeft een personal access token niets met design tokens te maken. Je hebt een personal access token nodig met de benodigde rechten om via Tokens Studio design tokens te kunnen importeren, bewerken én exporteren.

🎥 Video: Personal access token aanmaken

Vul de gegevens in

  • Token name: Deze wordt enkel gebruikt voor GitHub zelf. Hier mag je van maken wat je wilt. Bijvoorbeeld: Tokens van {naam-organisatie}.
  • Resource owner: Staan je tokens in de NL Design System 'themes repository'? Kies dan voor 'nl-design-system'. Staan de tokens in de GitHub omgeving van jouw organisatie? Selecteer deze dan als resource owner.
  • Expiration: Bepaal wanneer je personal access token zou moeten verlopen. Bijvoorbeeld na een half jaar. Je krijgt vanzelf een email wanneer deze datum in zicht komt.
  • Kies bij 'Repository access' voor 'Only select repositories'.
  • Selecteer de repository waar de tokens van jouw organisatie staan.
  • Klik onder 'Permissions' op 'Repository permissions'.
  • Kies bij 'Contents' voor 'Access: Read and write'.

Genereren en noteren

  • Klik op 'Generate token'.
  • Kopieer je personal access token.
  • Bewaar je personal access token op een veilige plek waar je hem ook altijd terug kan vinden.

Let op!
Deel je token nooit met iemand die geen toegang zou moeten hebben tot je repository. Behandel de token als je persoonlijke wachtwoord.

Tokens Studio activeren

Nu je in GitHub alles hebt klaargezet, kunnen we in Figma via Tokens Studio een connectie leggen met de design tokens.

🎥 Video: Tokens Studio activeren

  • Open NL Design System - Bibliotheek - {naam-organisatie}.
  • Klik op 'Actions' (Cmd+K).
  • Zoek op 'Tokens Studio'.
  • Activeer Tokens Studio.

Het introductiescherm kan verschillen.

Screenshot van 2 verschillende introductieschermen van Tokens Studio. Op het linkerscherm staat een blauwe knop met de tekst 'Enter credentials'. Op het rechterscherm staat een knop met de tekst 'New empty file'.

Zie je een knop met de tekst 'Enter credentials' staan? Ga dan verder bij 'Tokens Studio koppelen aan JSON'.

Zie je een knop met de tekst 'New empty file' staan?

  • Klik op die knop.
  • Ga binnen Tokens Studio naar het tabblad 'Settings'.
  • Klik op 'Add new sync provider'.
  • Kies voor 'GitHub'.
  • Nu kun je de 'Credentials' gaan invullen.

Tokens Studio koppelen aan JSON

🎥 Video: Credentials invullen

Er staan standaard al gegevens ingevuld. Dat is prima. We passen aan wat nodig is.

Name

Deze naam wordt enkel gebruikt voor de plugin zelf. Hier mag je van maken wat je wilt. Bijvoorbeeld: {naam-organisatie} thema.

Personal access token

Vul je personal access token in.

Repository

Als jouw JSON bestand in de Themes repository van NL Design System staat, kun je laten staan wat er nu staat: nl-design-system/themes.

Staat het JSON bestand in een repository binnen de GitHub omgeving van jouw organisatie? Vul dan de gegevens van deze repository in.

Branch

Hier kun je main laten staan.

Token Storage location

Je kunt dit zien als het pad naar het JSON bestand binnen een repository. Dit pad kan per situatie verschillen.

Het makkelijkst is om in GitHub naar je JSON bestand te gaan. Boven het bestand zie je een kruimelpad. Achter het kruimelpad vind je een functionaliteit om het pad te kopiëren. Gebruik die om het pad eenvoudig over te nemen.

Base URL

Dit is optioneel. Hier hoef je niets mee te doen.

Opslaan

  • Klik op 'Save'.
  • De plugin zal aangeven dat er al tokens in de opgegeven ‘repo’ staan en vragen of je deze wilt binnenhalen.
  • Klik op ‘Yes’.

Design tokens bekijken

🎥 Video: Design tokens bekijken

  • Klik op het tabblad ‘Tokens’ en... Voila! Daar zul je de tokens hebben.
  • Zet de checkboxes voor 'brand', 'common' en 'components' aan.

De termen Brand, Common en Component vind je ook terug in de naamgeving van het pagina overzicht van Figma.

Zoals aangegeven bevatten de Figma bibliotheken het Start-thema. Voor deze 'stijl' zijn er al bepaalde waardes ingevuld voor typografie, kleur, spacing, etc. Deze waardes zijn 'hardcoded', oftewel direct ingevuld binnen de set van Basis-tokens die je vindt op het Common niveau.

Een prima 'Startpunt', maar jij wilt de huisstijl van jouw organisatie als thema doorvoeren.

Omdat huisstijlen verschillen, verschillen ook de vervolgstappen. In plaats van dat we alle mogelijkheden uitschrijven, begeleiden we je via video’s stap voor stap terwijl we als voorbeeld de huisstijl van gemeente Voorbeeld toepassen.

Uiteraard is het ook slim om de documentatie van de Tokens Studio plugin bij de hand te houden. Deze vind je op docs.tokens.studio.

Brand tokens aanmaken

Je kunt de huisstijl-opties van jouw organisatie direct doorvoeren als waarde op het Common niveau. Maar je kunt ook eerst Brand tokens aanmaken, en daar vervolgens vanuit het Common niveau naar verwijzen. Laten we daarmee beginnen.

In deze video bekijken we de huisstijl-opties van gemeente Voorbeeld en laten we zien hoe je hiervoor Brand tokens aanmaakt in Tokens Studio.

🎥 Video: Brand tokens aanmaken

Migratie informatie

Als je migreert, heb je eerder Brand tokens voor jouw organisatie vastgelegd in Tokens Studio. Het is niet nodig om al die Brand tokens opnieuw aan te maken.

  • Open Tokens Studio in een ander bestand, zodat je je 'oude' JSON kunt bekijken.
  • Maak de afweging welke Brand tokens je nodig hebt voor jouw organisatie.
  • Kopieer en plak deze Brand tokens vervolgens naar de 'brand' set in de nieuwe JSON.

Omdat het Start-thema vrij algemene waardes bevat binnen de basis-tokens, is de kans groot dat je met kleur en typografie tokens al voldoende hebt. Daarnaast is het goed om te weten dat je huisstijl-opties ook direct op het Common niveau kunt doorvoeren. Verderop in het stappenplan lees je daar meer over.

🎥 Video: Brand tokens overzetten

Naar Brand tokens verwijzen

Nadat je Brand tokens hebt aangemaakt, kun je hier naar gaan verwijzen vanuit het Common niveau. In deze video laten we zien hoe je dat doet.

🎥 Video: Naar Brand tokens verwijzen - deel 1

Het instellen van de kleuren kost even wat tijd, maar daarna heb je er geen omkijken meer naar. Het kleurcontrast staat dan al goed ingesteld op het Common niveau, waardoor je hier bij het ontwerpen of ontwikkelen van nieuwe componenten geen extra werk aan hebt. Heeft jouw organisatie voor bepaalde onderdelen geen eigen richtlijnen? Dan kun je gerust de waarden uit het Start-thema laten staan.

In de volgende video zien we het resultaat van het verwijzen naar Brand tokens.

🎥 Video: Naar Brand tokens verwijzen - deel 2

Brand tokens documenteren

De Brand tokens zijn alleen nog zichtbaar in Tokens Studio. Voor mensen zonder Tokens Studio kan het fijn zijn om de Brand tokens ook te kunnen bekijken in Figma. In de volgende video laten we zien hoe je Brand tokens kunt documenteren via een handig documentatie-component.

🎥 Video: Brand tokens documenteren

Tip

Als je een token naam of waarde aanpast in Tokens Studio, wordt deze wijziging automatisch bijgewerkt in je documentatie nadat je op de 'Apply to...' knop hebt geklikt.

Common tokens aanpassen

De huisstijlkleuren zijn vastgelegd als Brand tokens, gekoppeld aan Common tokens én gedocumenteerd. Nu is het tijd om ook een ander lettertype door te voeren. Ook hier kun je Brand tokens voor aanmaken. Maar als 'voorbeeld' laten we zien hoe je huisstijl-opties ook direct op het Common niveau kan doorvoeren.

🎥 Video: Common tokens aanpassen

Let op!
Tokens voor Font Family en Font Weight kunnen afzonderlijk van elkaar op tekst worden toegepast. Het is daarbij belangrijk om de naam van de gewicht aan te houden zoals deze in Figma is aangegeven. Bij een Font Family als Roboto is dat bijvoorbeeld Bold, en niet een waarde als 700.

Huisstijlkeuzes op componenten

Nu de kleuren en het lettertype zijn doorgevoerd, kunnen we gaan kijken hoe dit uitpakt op de componenten. Gebruik de pagina 'Component collage' als visuele check. Hier zie je direct hoe je keuzes uitpakken in de praktijk.

Ben je tevreden? Dan kun je je huisstijlkeuzes doorvoeren op de gehele bibliotheek. In deze video laten we zien hoe je dit kan aanpakken.

🎥 Video: Componenten collage

Componenten nalopen

Nadat je huisstijl over de gehele bibliotheek is doorgevoerd, raden we aan om alle componenten na te lopen. Zo kun je controleren of er toch iets minder goed heeft uitgepakt dan gedacht. Het geeft je ook de mogelijkheid om op Component niveau de waarde van een token aan te passen. Denk aan het veranderen van de border-radius van knoppen, of het instellen van een groene kleur specifiek voor de primaire knop.

🎥 Video: Componenten nalopen

Tip

We hebben gemerkt dat je soms nogmaals op 'Apply to Page' moet klikken om de aanpassingen doorgevoerd te zien worden.

Pushen naar GitHub en een pull request aanmaken

Wanneer je de tokens naar wens hebt aangepast kun je deze wijzigingen in de bron doorvoeren.

🎥 Video: Pushen naar GitHub en een pull request aanmaken

Bespreek met een developer uit je team hoe jullie omgaan met pull requests. Vraag ook of er afspraken zijn over 'commit messages' of over de naamgeving van 'branches'.

  • Klik op ‘Push to Github’ binnen Tokens Studio.

Screenshot toont de Studio Token plugin. Er staat een cirkel om een knop met een omhoog wijzende pijl als icoon.

  • Vul als 'commit message' kort en bondig in wat je hebt aangepast. Bij deze eerste ronde van huisstijl doorvoeren bijvoorbeeld iets als: Eerste ronde huisstijl doorvoeren.
  • Bij 'branch' staat standaard 'main' al ingevuld. Het is echter verstandig om bij elke push met wijzigingen een aparte branch aan te maken. Bijvoorbeeld: style/eerste-ronde-huisstijl.
Tip

Gebruik elke keer een andere naam voor de branch en zorg ervoor dat je geen spaties gebruikt.

  • Klik op ‘Push changes’.
  • Klik op ‘Create pull request’.

Vervolgens word je automatisch naar GitHub geleid waar je een pull request kunt maken.

Huisstijl doorvoeren in ToDo bibliotheek

Nadat je pull request is gemerged is het tijd om de aanpassingen voor de huisstijl van jouw organisatie ook door te voeren in de Todo bibliotheek.

🎥 Video: Huisstijl doorvoeren in ToDo bibliotheek

  • Open de ToDo bibliotheek.
  • Open Tokens Studio.
  • Zorg dat je hier ook de connectie met je JSON bestand hebt.
  • Vink de checkboxes brand, common en component opnieuw aan.

Vervolgens voert Tokens Studio de huisstijl zoals jij hem hebt ingesteld door op alle componenten in deze bibliotheek.

ToDo componenten nalopen

Nadat Tokens Studio klaar is met het doorvoeren, is het verstandig om de componenten in je bibliotheek nog eens langs te lopen.

Zo kun je op componentniveau alsnog andere keuzes maken. In de video zie je daar een voorbeeld van. Breng je wijzigingen aan? Push ze dan opnieuw naar GitHub en maak een nieuwe pull request aan.

🎥 Video: ToDo componenten nalopen

Tip

We hebben gemerkt dat je soms nogmaals op 'Apply to Page' moet klikken om de aanpassingen doorgevoerd te zien worden.

Covers aanpassen

Beide bibliotheken hebben een 'Cover' pagina. Daar staat nu nog 'Start'. Pas dit aan naar de naam van jouw organisatie.

Wijzigingen in thumbnails worden niet altijd direct door Figma opgepikt. Doorloop daarom de volgende stappen.

  • Selecteer het gehele Frame en klik op de rechtermuisknop voor het contextuele menu.
  • Kies voor 'Restore default thumbnail'.
  • Selecteer nogmaals het frame en klik nogmaals op de rechtermuisknop.
  • Kies nu voor 'Set as thumbnail'.

🎥 Video: Covers aanpassen

Readme's aanpassen

In beide bibliotheken staan 'Readme' pagina's. Pas de inhoud aan zodat deze past bij jouw organisatie. Zo houd je de documentatie relevant voor jouw team.

🎥 Video: Readme's aanpassen

Publiceren

Lekker bezig geweest! Je hebt nu de huisstijl doorgevoerd, Covers en Readme's aangepast.

Tijd om de bibliotheken opnieuw te publiceren. Heb je eerder in dit proces al een prototype opgezet met deze bibliotheken? Dan kun je de updates daarin accepteren en je huisstijl tot leven zien komen in die prototypes.

Updates

Het kernteam zit natuurlijk niet stil. We voeren geregeld updates door in de Figma bibliotheken én het JSON bestand met design tokens. Je kunt de Figma bibliotheken 'in sync' houden door de updates die wij doen, ook aan jouw kant door te voeren.

Op de pagina 'Figma changelog' zie je welke updates zijn doorgevoerd. Wanneer je deze updates doorvoert, bepaal je helemaal zelf. We raden wel aan om dit met enige regelmaat te doen, zodat je zeker weet dat je met de nieuwste versies werkt.

We sturen eens in de 2 maanden een reminder via Slack in het #nl-design-system-designers kanaal.

Doel 3 behaald 🎉

Je kunt nu met NL Design System componenten werken op basis van een eigen thema. Veel plezier!

Migratie informatie

In principe ben je nu gemigreerd, maar misschien zit je nog met de volgende vraagstukken:

  • Wat doe ik met mijn huidige bibliotheken?
  • Wat doe ik met mijn lokale bibliotheek?
  • Wat doe ik met mijn prototypes?

Daarover vind je meer informatie in de onderstaande extra secties voor migratie.

Extra secties voor migratie

Wat doe ik met mijn huidige bibliotheken?

Je doorloopt dit migratie-stappenplan omdat je eerder NL Design System bibliotheken hebt gedupliceerd. Maar wat doe je nu met deze ‘oude’ bibliotheken? Die gaan we stap voor stap uitfaseren. In het Engels noemen we dat ‘Deprecation’. Doorloop de volgende stappen.

🎥 Video: 'Oude' bibliotheken uitfaseren

  • Open de 'oude' bibliotheek of bibliotheken.
  • Hernoem deze bestanden naar deprecated-{naam-van-biblitoheek}. Zo herken je componenten met een connectie hebben met deze verouderde versie.
  • Plak een grote 'Depricated' sticker op de Cover.
  • Publiceer deze versie.
  • 'Unpublish' nu de bibliotheek of bibliotheken.

Wat doe ik met mijn lokale bibliotheek?

Heb je een lokale bibliotheek? Dan kunnen de stappen die je moet nemen verschillen. Zie onderstaande stappen dan ook als een leidraad, en voer door wat voor jou van toepassing is.

Nieuwe bibliotheken

Je zult sowieso de nieuwe bibliotheken willen koppelen.

  • Open je lokale bibliotheek.
  • Koppel de nieuwe bibliotheken.

Componenten binnen lokale componenten

Misschien maak je binnen de lokale componenten gebruik van componenten uit een 'oude' bibliotheek. Denk bijvoorbeeld aan een Button, Paragraph of icoon. Je herkent deze componenten aan de verwijzing naar de oude bibliotheek, die door de naamswijziging nu begint met deprecated-*.

Screenshot toont Figma waarbij het zichtbaar is dat een component verwijst naar 'oude' bibliotheek.

Via de 'Swap instance' functionaliteit kun je deze componenten verwijzen naar de nieuwe bibliotheek.

Screenshot toont Figma waarbij gebruik wordt gemaakt van de 'swap instance' funtionaliteit.

Design tokens

Ook in je lokale bibliotheek wil je verwijzen naar het 'nieuwe' JSON bestand met design tokens.

Maak via Tokens Studio connectie met het nieuwe JSON bestand.

Heb je voor lokale componenten design tokens vastgelegd? Dan leven deze nog in het 'oude' JSON bestand en ontbreken ze in het 'nieuwe'. Laten we ze toevoegen.

🎥 Video: Design tokens van lokale componenten overzetten

  • Open Tokens Studio in een ander bestand, zodat je je 'oude' JSON kunt bekijken.
  • Kopieer de design tokens van je lokale componenten.
  • Ga terug naar je lokale bibliotheek en voeg de design tokens van je lokale componenten toe.
  • Verwijs deze design tokens naar de juiste Common tokens.
  • Push de wijzigingen naar GitHub en maak een Pull Request aan.

Wat doe ik met mijn prototypes?

Heb je prototypes gemaakt, dan zijn die gebaseerd op de 'oude' Figma bibliotheken. Wat je met deze prototypes doet, hangt af van het gebruik:

  • Is het een prototype dat je niet meer gebruikt? Laat het dan gewoon staan zoals het is.
  • Ga je het prototype nog gebruiken of werk je er actief aan? Koppel het dan aan de nieuwe bibliotheken.

Gebruik hiervoor Figma's Swap Library functionaliteit.

🎥 Video: Prototype koppelen aan nieuwe bibliotheken

Het kan gebeuren dat eventuele 'overwrites', bijvoorbeeld een tekstaanpassing op een Button, worden teruggezet naar de oorspronkelijke tekst die meekomt uit de bibliotheek. Daarom is het verstandig om 2 dingen te doen.

Laten we er eerst voor zorgen dat je sowieso niks kwijtraakt.

  1. Open het prototype en voeg de huidige versie toe aan Figma's Version History. Geef deze versie een herkenbare naam, bijvoorbeeld 'Swap Library'. Zo kun je het prototype altijd terugzetten naar deze huidige versie.
  2. Maak ook een kopie van het prototype. Dan heb je altijd nog een back-up en kun je 'overwrites' zoals teksten gemakkelijk kopiëren en plakken.

Ok laten we er nu voor zorgen dat je prototype gekoppeld wordt aan de 'nieuwe' bibliotheken.

  • Open het prototype.
  • Voeg de nieuwe bibliotheken toe.
  • Omdat de 'oude' bibliotheken niet langer beschikbaar zijn, worden deze als 'gemist' weergegeven.
  • Klik op 'View missing libraries'.

Screenshot toont venster binnen Figma waarmee je je bibliotheken kan beheren. Er staat een cirkel om de knop met de tekst 'View missing libraries'.

  • Selecteer de bibliotheek die wordt gemist.

Screenshot toont venster binnen Figma waarmee je een overzicht krijgt van de bibliotheken die ontbreken. Er staat een cirkel om de bibliotheek met de tekst 'deprecated--NL Design System - Bibliotheek - Voorbeeld'.

  • Maak gebruik van de Swap Library functionaliteit.

Screenshot toont venster binnen Figma waarmee je de gebruikte componenten uit de ontbrekende bibliotheek ziet. Er staat een cirkel om een select met de tekst 'Choose library'.

Loop voor de zekerheid de componenten steekproefsgewijs na om te controleren of er geen connectie meer is met een 'oude' bibliotheek. Je herkent deze componenten aan de verwijzing naar de oude bibliotheek die begint met deprecated-*.

Van Figma naar code

Zijn je tokens compleet genoeg om gebruikt te worden in een website? Dan heb je een developer nodig om de tokens te publiceren als CSS thema. Dat kan op twee manieren:

Optie 1
Je krijgt een eigen directory in de NL Design System themes repository. Hierin kun je een thema beheren, maar niet zelf nieuwe componenten ontwikkelen. Neem contact op met het kernteam, zodat je een uitnodiging kunt krijgen. Als je eenmaal een eigen directory hebt, dan kun je design tokens JSON die je nu hebt verhuizen naar de themes repository. Het CSS thema wordt vanuit de themes repository automatisch gepubliceerd als NPM pakketje, die je in de code van de website kan inladen.

Optie 2
Wil je nieuwe front-end componenten ontwikkelen? Een developer uit jouw team kan dan op basis van de NL Design System example repository een nieuwe repository beginnen. In onze template zitten alle onderdelen om je eigen thema te publiceren als NPM pakketje. Neem contact op met het kernteam om hulp te vragen als je dit wilt doen.

Wat is je volgende stap?

Ga je een prototype maken en onderzoek doen? Super! Deel je vragen, inzichten en ervaringen vooral met anderen in de community. Zo leren we van elkaar. Dat kan via Slack of tijdens een Design Open Hour, Design Open Dag of Heartbeat.

Wil je zelf componenten bijdragen? Vet! Lees hier hoe je zelf componenten kunt ontwikkelen

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.