Figma Bieb verdeling

[jeffreylauwers]

Beschrijving

We hebben 2 Figma bibliotheken.

• NLDS - Voorbeeld - Bibliotheek
• Local - Voorbeeld - Bibliotheek

Over tijd zijn er componenten bij gekomen. Maar nu staan er soms Help Wanted of Community componenten in de één of de ander. Tijd om dit recht te trekken.

Daarnaast willen we duidelijker maken in welk stadium een component in een bepaalde bibliotheek komt.

Acties

• Overwegingen doornemen met Rozerin, Robbert en Yolijn.
• Designers bevragen naar de nieuwe gewenste opzet.
• Keuze maken met het team.
• Designers informeren.
• Vervolgacties aanmaken als issue (denk aan documenteren van keuzes).

Acceptatiecriteria

• Er is een overwogen keuze gemaakt hoe componenten verdeeld worden.
• Designers uit de community zijn geïnformeerd over de keuze.
• Er zijn issues aangemaakt voor vervolgacties.

Voorstel

3 opties.

Optie A

NLDS - Voorbeeld - Bibliotheek

• Enkel componenten met de status 'Community' of hoger.

NLDS - Todo - Bibliotheek

• Componenten met de status 'Experimental' of 'Help Wanted' (todo).
• Uitbreidingen en voorstellen voor verbeteren van componenten (Community of hoger) die nog niet in code bestaan.

NLDS - Local - Bibliotheek

• Lokale componenten die specifiek voor een organisatie.
• Voor Gemeente Voorbeeld bijvoorbeeld de Page Header en Page Footer.
• Voor de NL Design System documentatie website bijvoorbeeld het Estafettemodel-voortgang-component.

Optie B

NLDS - Voorbeeld - Bibliotheek

• Componenten met de status 'Community' of hoger.

NLDS - Local - Bibliotheek

• Componenten met de status 'Experimental' of 'Help Wanted' (todo).
• Uitbreidingen en voorstellen voor verbeteren van componenten (Community of hoger) die nog niet in code bestaan.
• Lokale componenten die specifiek voor een organisatie.
• Voor Gemeente Voorbeeld bijvoorbeeld de Page Header en Page Footer.
• Voor de NL Design System documentatie website bijvoorbeeld het Estafettemodel-voortgang-component.

Optie C

NLDS - Voorbeeld - Bibliotheek

• Componenten met de status 'Help Wanted' (todo) of hoger.

NLDS - Local - Bibliotheek

• Componenten met de status 'Experimental'.
• Uitbreidingen en voorstellen voor verbeteren van componenten (Community of hoger) die nog niet in code bestaan.
• Lokale componenten die specifiek voor een organisatie.
• Voor Gemeente Voorbeeld bijvoorbeeld de Page Header en Page Footer.
• Voor de NL Design System documentatie website bijvoorbeeld het Estafettemodel-voortgang-component.

Overwegingen

Gaat het stuk?

Eerder vroegen we ons af of e.e.a. 'stuk' zou gaan als we componenten overhevelen van de een naar de andere bieb. Denk aan: Checkbox (community) in Checkbox group (help wanted), laten we deze eens bekijken. Of Icons in Icon Only Button in Modal dialog.

Ik heb een POC gedaan.

https://youtu.be/VGB4BkZdEeE

Het lijkt dus goed te gaan. Maar... als je de component vervolgens weer terug zet moet je Swap Library gebruiken.

https://youtu.be/aFe39hWjScU

Eventueel een handige link: https://help.figma.com/hc/en-us/articles/4404848314647-Move-published-components

todo. tokens

Er zijn ook 'Community' componenten met 'todo' tokens. Nogmaals excuus. In welke bieb komen deze?

Wat is momenteel de stand van zaken?

Ik ben de componenten in beide biebs langs gegaan en gaan turven. Daarbij heb ik elke keer de hoogst behaalde Estafette status genoteerd.

• Help Wanted: 19
• Community: 16
• Community (met todo tokens): 14
• Candidate: 19
• Experimental*: 14

Er zijn Experimental componenten zonder, met todo tokens, met community tokens...

Zijn componenten nog wel te vinden?

Als je meerdere bibliotheken koppelt aan een Figma bestand ziet dat er zo uit:

Als je vervolgens een bibliotheek aanklikt ziet dat er zo uit:

Als je over bibliotheken heen zoekt op een component ziet dat er zo uit:

Dit heeft invloed op puntje 'Uitbreidingen en voorstellen voor verbeteren van componenten (Community of hoger) die nog niet in code bestaan.'.

Aanvullend scenario: Stel component X van Utrecht mist een token of feature. En deze is wel gewenst (bijvoorbeeld door eigenwijze Jef). Dus die wordt toegevoegd en gebruikt in Voorbeeld templates. Men is enthousiast over de voorbeeld templates. Klikt op component X. Kiest voor 'Go to main component'. En komt in de Local bieb uit...

Experimental, Help Wanted en Local

• Wanneer plaats je de sticker 'Experimental'? En wanneer ' Help Wanted'? Is een 'Local' sticker handig?
• Help Wanted componenten prefix todo.? Idem voor tokens.
• Local componenten prefix voorbeeld.? Idem voor tokens?
• Experimental componenten prefix? --> Misschien zijn er wel alleen Estafette en Local stickers nodig? Zou Experimental alleen een aanvullende sticker kunnen zijn? We zouden deze dan ook icm een Community sticker kunnen gebruiken als een Community component todo tokens of features (icon in button) heeft.

Alle tokens zitten in 1 JSON.

Componenten hebben nu een connectie met 1 JSON. Het is ook lastig om 2 JSON te maken ivm verwijzingen naar Brand en Common tokens.

En verder

• Het lijkt me fijn om over 'dé Figma bibliotheek' te kunnen spreken in communicatie met designers.
• 1 Bibliotheek om te dupliceren en om over te spreken in het Stappenplan.
• Brand en Common tokens in de ene bieb (Common tokens ook niet allemaal community...).
• 1 Bibliotheek is handiger voor Bieb Sync video's
• 1 Bibliotheek geeft een duidelijker beeld van het aantal componenten dat je direct zou kunnen gebruiken in een prototype.
• Op https://www.nldesignsystem.nl/componenten/ staan componenten van verschillende Estafettemodel niveaus naast elkaar (overzicht).
• De Help Wanted componenten hebben een opzet zoals wij deze graag zien. Naamgeving, Tokens, States etc. Mijn vermoedde is dat we het organisaties ook makkelijker maken om te zeggen 'Ok, deze gaan wij wel ontwikkelen'.

Gerelateerde issues

• Evalueren en beslissen over gebruik van stickers in Figma bibliotheek #1877
• Update 'voor designers' documentatie: Figma structuur #1905

[Rozerinay]

Mijn gedachtewolk

Overwegingen

Impact op toekomstige schaalbaarheid

Zijn de gekozen bibliotheken toekomstbestendig? Wat gebeurt er als het aantal componenten groeit of als er nieuwe categorieën ontstaan of verdwijnen? Kan de structuur gemakkelijk worden aangepast?

Ondersteuning voor verschillende niveaus van gebruikers

Designers met minder ervaring of nieuwe leden in de community kunnen moeite hebben om de nuances van verschillende bibliotheken te begrijpen. Hoe kunnen we ervoor zorgen dat dit proces intuïtief blijft?

Documentatie

Wanneer plaatsen we documentatie over de tokens? En wanneer plaatsen we documentatie over de component zelf?

Bijvoorbeeld: Hebben Experimental componenten geen documentatie, terwijl Help Wanted componenten dat wel hebben?

Vindbaarheid component

We moeten ervoor zorgen dat de structuur van bibliotheken het gemakkelijk maakt voor designers om de juiste componenten te vinden, ongeacht hun status. Dit kan betekenen dat consistentie in naamgeving en labeling extra belangrijk is.

Specifieke punten voor optieoverwegingen

• Optie A: Duidelijke scheiding van stadia, maar vereist meer schakelen tussen bibliotheken voor lokale componenten.
• Optie B: Voegt meer samen in één bibliotheek, maar kan minder intuïtief zijn voor gebruikers die onderscheid willen maken tussen stadia.
• Optie C: Zorgt ervoor dat Experimental componenten een duidelijke plaats hebben, maar kan complexiteit toevoegen voor nieuwe gebruikers.