Componenten vinden
Stel je hebt een nieuwe wens voor een component of functionaliteit. Dan wil je natuurlijk weten hoe je NL Design System hiervoor kunt gebruiken.
We hebben het proces rondom het gebruiken, uitbreiden en verbeteren van componenten uitgeschreven in stappen en deze visueel aangevuld met flowcharts. Hierdoor kan de community zelfstandig en weloverwogen keuzes maken.
Deze processen helpen je antwoord te vinden op vragen zoals:
- Ik mis een component. Wat nu?
- Ik mis een functionaliteit. Bijvoorbeeld een sluit-optie in de Alert. Of de mogelijkheid om Form Field Label en Form Field Description dichter bij elkaar te kunnen plaatsen. Wat nu?
- Ik mis een design token. Wat nu?
- Ik wil een verbetering voorstellen voor een component. Wat nu?
- Ik wil een verbetering voorstellen voor een bestaande design token. Wat nu?
- Ik heb een component dat overeenkomt met een reeds bestaand community component. Wat nu?
:::info[Goed om te weten]
Het kernteam ziet het toevoegen van één of meerdere design tokens óók als het toevoegen van een functionaliteit.
:::
Ik wil een component uit NL Design System gebruiken.
Volg onderstaande stappen als je een component uit NL Design System wilt gebruiken.
Stappen
Stap 1: Bekijk het Componenten overzicht.
Stap 2: Kijk rond bij de aangesloten organisaties. Dit doe je door GitHub repositories en de GitHub Discussions te bekijken.
Hoe weet je of een organisatie is aangesloten? En of zij community componenten hebben?
Iets is een community component als deze in een repository binnen de NL Design System GitHub omgeving staat. Of als hier naar wordt verwezen (zoals bijvoorbeeld Amsterdam). In andere gevallen is de component bedoeld als input voor algemeen deskresearch.
Stap 3: Heb je de component gevonden?
- Ja: Ga verder bij stap 4.
- Nee: Ga verder bij: Ik mis een component. Wat nu?
Stap 4: Voldoet de component aan je wensen?
- Ja: Fijn! Vermeld in de GitHub Discussion dat jij dit component ook gebruikt.
- Nee: Ga verder bij stap 5.
Stap 5: Betreft het een Community component?
- Ja: Ga verder bij: Ik mis een functionaliteit binnen een Community component. Wat nu?
- Nee: Ga verder bij: Ik mis een functionaliteit binnen een Candidate of Hall of Fame component. Wat nu?
Flowchart
De stappen die je kunt nemen als je een component uit NL Design System wilt gebruiken zijn ook als flowchart gevisualiseerd.
Bekijk een vergroting van de flowchart: Ik wil een component uit NL Design System gebruiken
Ik mis een component. Wat nu?
Volg onderstaande stappen als je een component mist.
Stappen
Stap 1: Heb je het Componenten overzicht bekeken?
- Ja: Ga verder bij stap 2.
- Nee: Bekijk het Componenten overzicht om te zien of de component die je zoekt er toch tussen staat.
Stap 2: Heb je rondgekeken bij de aangesloten organisaties?
- Ja: Ga verder bij stap 3.
- Nee: Kijk rond bij de aangesloten organisaties. Dit doe je door GitHub repositories en de GitHub Discussions te bekijken.
Hoe weet je of een organisatie is aangesloten? En of zij community componenten hebben?
Iets is een community component als deze in een repository binnen de NL Design System GitHub omgeving staat. Of als hier naar wordt verwezen (zoals bijvoorbeeld Amsterdam). In andere gevallen is de component bedoeld als input voor algemeen deskresearch.
Stap 3: Maak je component zelf (code en/of design).
Gebruik de component in je prototype en doe onderzoek. Deel je onderzoek idealiter op gebruikersonderzoeken.nl. Pakt de component goed uit? Vervolg het proces.
Stap 4: Start met het Help Wanted stappenplan.
Stap 5: Wil je de component aanbieden aan de Community?
- Ja: Ga verder bij stap 6.
- Nee: OK. Veel plezier met je component.
Stap 6: Ontwikkel de component zelf volgens NL Design System architectuur.
Als designer kun je hiervoor de documentatie Zelf componenten maken bekijken.
Stap 7: Start met het Community stappenplan. Zodat jouw versie zichtbaar wordt voor anderen.
Breng het kernteam op de hoogte van je Community component.
Dit doe je door een link naar de component te delen op het Community Components projectbord van jouw organisatie. Deel deze link vervolgens via Slack in het kanaal
#nl-design-system-developersof#nl-design-system-designers.
Flowchart
De stappen die je kunt nemen als je een component mist zijn ook als flowchart gevisualiseerd.
Bekijk een vergroting de flowchart: Ik mis een component. Wat nu?
Ik mis een functionaliteit binnen een Community component. Wat nu?
Volg onderstaande stappen als je een functionaliteit mist binnen een Community component.
Stappen
Stap 1: Bekijk het Componenten overzicht.
Stap 2: Kijk rond bij de aangesloten organisaties. Dit doe je door GitHub repositories en de GitHub Discussions te bekijken.
Hoe weet je of een organisatie is aangesloten? En of zij community componenten hebben?
Iets is een community component als deze in een repository binnen de NL Design System GitHub omgeving staat. Of als hier naar wordt verwezen (zoals bijvoorbeeld Amsterdam). In andere gevallen is de component bedoeld als input voor algemeen deskresearch.
Stap 3: Is er een ander Community component die de functionaliteit wél heeft?
- Ja: Gebruik dat component uit de community.
- Nee: Ga verder bij stap 4.
Stap 4: Vraag de maintainers van de Community component of zij de functionaliteit willen toevoegen.
Hoe vraag je dit?
- Maak een issue aan in de betreffende repository.
- Maak een fork en een pull request aan.
- Breid de Figma component uit door een duplicaat onder de reeds bestaande Community component te plaatsen.
- Plaats een link naar het issue, de PR of ontwerp op Slack in het kanaal
#nl-design-system-developersof#nl-design-system-designersen noem hier de naam van de organisatie. Kernteamleden volgen deze kanalen ook. Zij kunnen eventueel specifieke personen op de hoogte brengen van de wens.- Bespreek je wens tijdens een Developer of Design Open Hour wanneer mensen van de betreffende organisatie aanwezig zijn.
Stap 5: Wordt de functionaliteit toegevoegd?
- Ja: Bedankt voor het vollediger maken van de Community component.
Deel je succes. Geef een shout-out aan de maintainer die de functionaliteit heeft toegevoegd via Slack in het kanaal
#nl-design-system-developersof#nl-design-system-designers.
- Nee: Ga verder bij stap 6.
Stap 6: Kun je zelf een ‘extensie’ (uitbreiding op de component) maken?
- Ja: Maak een ‘extensie’. Plaats de link naar je uitbreiding als reactie op je eerdere beschrijving in de GitHub Discussion.
- Nee: Ga verder bij stap 8.
Stap 7: Trots op je extensie? Plaats een link naar je beschrijving in de GitHub Discussion op Slack in het kanaal #nl-design-system-developers of #nl-design-system-designers.
Stap 8: Maak de component zelf.
Stap 9: Wil je de component aanbieden aan de Community?
- Ja: Ontwikkel de component zelf inclusief de functionaliteit volgens NL Design System architectuur.
Als designer kun je hiervoor de documentatie Zelf componenten maken bekijken.
- Nee: OK. Veel plezier met je component.
Stap 10: Start met het Community stappenplan. Zodat jouw versie zichtbaar wordt voor anderen.
Breng het kernteam op de hoogte van je Community component.
Dit doe je door een link naar de component te delen op het Community Components projectbord van jouw organisatie. Deel deze link vervolgens via Slack in het kanaal
#nl-design-system-developersof#nl-design-system-designers.
Flowchart
De stappen die je kunt nemen als je een functionaliteit binnen een Community component mist zijn ook als flowchart gevisualiseerd.
Ik mis een functionaliteit binnen een Candidate of Hall of Fame component. Wat nu?
Volg onderstaande stappen als je een functionaliteit mist binnen een Candidate of Hall of Fame component.
Stappen
Stap 1: Bekijk in de GitHub Discussion of iemand anders deze wens al eerder heeft uitgesproken.
Stap 2: Is er al een ‘extensie’ (uitbreiding op de component) gemaakt en kun je deze gebruiken?
- Ja: Gebruik de ‘extensie’. En geef in de GitHub Discussion aan dat jij deze uitbreiding ook gebruikt.
- Nee: Ga verder bij stap 3.
Stap 3: Beschrijf de wens voor het toevoegen van deze functionaliteit in de GitHub Discussion van de component.
Tip! Plaats een link naar je beschrijving op Slack in het kanaal
#nl-design-system-developersof#nl-design-system-designers.
Stap 4: Wordt de functionaliteit door het kernteam toegevoegd?
- Ja: Bedankt voor het vollediger maken van de Candidate component.
- Nee: Maak een ‘extensie’. Plaats de link naar je uitbreiding als antwoord op je eerdere beschrijving in de GitHub Discussion.
Stap 5: Trots op je extensie? Plaats een link naar je beschrijving in de GitHub Discussion op Slack in het kanaal #nl-design-system-developers of #nl-design-system-designers.
Flowchart
De stappen die je kunt nemen als je een functionaliteit binnen een Candidate of Hall of Fame component mist zijn ook als flowchart gevisualiseerd.
Ik heb een component dat overeenkomt met een reeds bestaand Community component. Wat nu?
Volg onderstaande stappen als je een component hebt dat overeenkomt met een reeds bestaand Community component.
Stappen
Stap 1: Is je component ontwikkeld volgens de NL Design System architectuur?
- Ja: Ga direct verder bij Stap 3.
- Nee: Ga verder bij Stap 2.
Stap 2: Ontwikkel de component volgens NL Design System architectuur.
Als designer kun je hiervoor de documentatie Zelf componenten maken bekijken.
Stap 3: Start met het Community stappenplan. Zodat jouw versie zichtbaar wordt voor anderen.
Breng het kernteam op de hoogte van je Community component.
Dit doe je door een link naar de component te delen op het Community Components projectbord van jouw organisatie. Deel deze link vervolgens via Slack in het kanaal
#nl-design-system-developersof#nl-design-system-designers.
Flowchart
De stappen die je kunt nemen als je een component hebt dat overeenkomt met een reeds bestaand Community component zijn ook als flowchart gevisualiseerd.
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. Daarnaast zijn we specifiek voor deze processen een GitHub Discussion gestart waar je feedback kunt geven.
Vragen
Heb je een vraag? Twijfel niet en neem contact op met het kernteam.