Zelf componenten uitbreiden
De Figma bibliotheken van NL Design System bevatten veel componenten en worden regelmatig aangevuld. Toch zijn er situaties waarin je zelf componenten wilt uitbreiden.
Community component mist functionaliteit
Er is wel een Community component, maar die sluit niet goed aan bij de behoeften van jouw organisatie. Gebruik dan het bestaande ontwerp (of de code) als basis om daar verder op door te ontwikkelen. Neem daarbij zoveel mogelijk elementen uit de bestaande component over. Het is helemaal super om hierbij samen te werken met de organisatie die de oorspronkelijke component heeft ontwikkeld. Zo kan de uitbreiding eventueel direct worden doorgevoerd bij die organisatie.
Candidate (of Hall of Fame) component mist functionaliteit
Net als bij een Community component kan een Candidate (of Hall of Fame) component een functionaliteit missen die jouw organisatie nodig heeft. Ook dan neem je zoveel mogelijk elementen uit de bestaande component over en deel je de wens voor deze uitbreiding met het kernteam.
Demo's
Het is fijn om componenten uit te breiden volgens de afspraken van NL Design System: open source, met design tokens en de juiste naamgeving. Zo blijven componenten onderling uitwisselbaar.
We hebben twee fictieve situaties uitgewerkt om te laten zien hoe je als designer zelf een component kunt uitbreiden.
Is de uitbreiding alleen bedoeld om een idee uit te werken? Of om door middel van gebruikersonderzoek te achterhalen of deze uitbreiding goed werkt? Dan kun je een component natuurlijk ook simpelweg 'detachen' voordat je de uitbreiding 'officieel' doorvoerd.
Community component Button uitbreiden
In deze video laten we zien hoe Community component 'Button' wordt uitgebreid met design tokens voor schaduw.
Candidate component Paragraph uitbreiden
In deze video laten we zien hoe Candidate component 'Paragraph' wordt uitgebreid met een aanvullende 'Purpose'.
Handige links
- Definition of Done (Estafettemodel)
- Componenten gebruiken
- Design tokens
- Figma hygiëne
- help.figma.com
- forum.figma.com
- tokenstudio.com
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.