You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Op deze pagina lees je hoe de bibliotheken zijn opgebouwd, waarom Figma een logische keuze is, en hoe de structuur werkt binnen je eigen Figma omgeving.
32
22
33
-
### Waarom Figma?
23
+
Je hoeft nu nog niets in te richten. Dit is vooral bedoeld om je op weg te helpen. In het [Figma stappenplan](/handboek/designer/figma-stappenplan) leggen we stap voor stap uit hoe je daadwerkelijk aan de slag gaat.
34
24
35
-
Figma sluit qua concept, architectuur en naamgeving goed aan bij de front-end implementatie. Daarnaast brengt Figma enkele voordelen met zich mee ten opzichte van andere ontwerptools.
- Platform onafhankelijk. Je kunt zelfs vanuit de browser werken.
40
-
- Samenwerken. Je kunt met meerdere personen tegelijk in dezelfde file werken.
41
-
- Prototypen. Je kan binnen Figma zelf prototypes opzetten.
42
-
- Inspecteren. Developers kunnen binnen Figma zelf ontwerpen inspecteren.
29
+
Figma sluit goed aan op hoe het NL Design System werkt met componenten, design tokens en code.
43
30
44
-
Meer informatie over Figma kun je vinden op [help.figma.com](https://help.figma.com/) en [forum.figma.com](https://forum.figma.com/).
31
+
### Voordelen van Figma
45
32
46
-
Het NL Design System zit echter net even anders in elkaar als andere Design Systems. Dat heeft ook invloed op de Figma structuur en het gebruik.
33
+
- Platformonafhankelijk: werkt vanuit de browser.
34
+
- Samenwerken in realtime: meerdere mensen in 1 bestand.
35
+
- Prototypen en inspecteren in 1 tool.
36
+
- Structuur en naamgeving sluiten aan op front-end structuur.
47
37
48
-
### Structuur
38
+
Dit maakt Figma ideaal voor het werken met een gedeeld design system. Meer informatie over Figma vind je op [help.figma.com](https://help.figma.com/) en [forum.figma.com](https://forum.figma.com/).
49
39
50
-
Een organisatie heeft vaak zijn eigen Figma omgeving. Binnen die omgeving wordt een bibliotheek beheerd met de huisstijl en componenten. Andere design bestanden kunnen zich ‘abonneren’ op die bibliotheek waardoor concepten, flows en/of prototypes snel en consistent kunnen worden uitgewerkt.
40
+
## Hoe is de structuur opgebouwd?
51
41
52
-
Wordt er een aanpassing gedaan in de bibliotheek? Dan is die aanpassing met een druk op de knop ook toegepast binnen alle design bestanden die op de bibliotheek geabonneerd zijn.
42
+
Organisaties hebben vaak een eigen Figma omgeving waarin een bibliotheek wordt beheerd. Vanuit die bibliotheek kunnen ontwerpers werken aan flows, concepten en prototypes. Ontwerpbestanden kunnen zich 'abonneren' op deze bibliotheek. Zodra de bibliotheek wordt bijgewerkt, worden deze aanpassingen automatisch doorgevoerd in alle gekoppelde bestanden.
53
43
54
44
55
45
56
-
Bevat een organisatie meerdere ‘huisstijlen’? Ook dan kunnen design bestanden gebruik maken van één of meerdere bibliotheken.
46
+
Sommige organisaties beheren meerdere merken of thema's, elk met een eigen huisstijl. In dat geval kunnen bestanden gebruik maken van 1 of meerdere bibliotheken.
57
47
58
48
59
49
60
-
Maar dan is daar het NL Design System. Waarbij we **wel** een bibliotheek aanbieden maar waar andere organisaties zich **niet** op kunnen abonneren. Dat komt omdat iedere organisatie binnen een eigen Figma omgeving werkt. Hoe je toch van deze bibliotheek gebruik kunt maken, en je eigen huisstijl kunt toepassen, leggen we graag aan je uit.
61
-
62
-
50
+
Maar het NL Design System werkt nét even anders. Omdat iedere organisatie een eigen Figma omgeving heeft, kun je je niet direct abonneren op een bibliotheek van het NL Design System.
63
51
64
-
### Gebruik
52
+
65
53
66
-
Om vanuit Figma met het NL Design System te werken heb je 2 dingen nodig. De ‘NL Design System bibliotheek' en de ‘Tokens Studio plugin'.
54
+
Gelukkig kun je wel direct aan de slag met onze Figma bibliotheek, of beter gezegd: bibliotheken. Hoe dat werkt? Dat leggen we je graag uit. Maar eerst vertellen we iets meer over de 2 bibliotheken.
67
55
68
-
56
+
## NL Design System bibliotheken
69
57
70
-
#### NL Design System Figma bibliotheek
58
+
Vanuit het NL Design System bieden we 2 Figma bibliotheken aan. De componenten in de bibliotheken worden ontwikkeld volgens het [estafettemodel](/handboek/estafettemodel).
71
59
72
-
Vanuit het NL Design System bieden we een Figma bibliotheek aan. Op dit moment zijn we druk bezig om deze Figma bibliotheek te vullen met 'Community' componenten. Deze community componenten zijn een-op-een in code beschikbaar.
60
+
### NL Design System - Bibliotheek
73
61
74
-
Zodra een community component in meerdere organisaties succesvol ingezet is zal deze volgens het [estafettemodel](../estafettemodel.mdx) door het kernteam opgenomen worden als 'Candidate' en later 'Hall of Fame' component.
62
+
In deze bibliotheek vind je componenten met de status ‘Community’ en ‘Candidate’. Samen werken we toe naar componenten met de status ‘Hall of Fame’.
75
63
76
-
64
+
[Neem een kijkje in de 'NL Design System - Bibliotheek' in Figma](https://www.figma.com/design/FqAr99wvrlHxTJYAHkFRQN/NL-Design-System---Bibliotheek?node-id=197-664&t=t25LHoMjEkUZyEi1-1)
77
65
78
-
**Al een eigen Figma bibliotheek?**
66
+
### NL Design System - ToDo Bibliotheek
79
67
80
-
Mooi! Die kun je gewoon blijven gebruiken.
68
+
In deze bibliotheek vind je componenten met de status ‘Help Wanted’ of ‘Experimental’. Deze componenten zijn nog niet in code beschikbaar. Maar daar kan jij met jouw organisatie verandering in brengen. Gaat jouw organisatie een Help Wanted component ontwikkelen? Laat dan een comment achter in de bijbehorende [GitHub Discussion](https://github.com/orgs/nl-design-system/discussions/categories/component-suggestions) van dat component. Of [neem contact op met het kernteam](/project/kernteam) om af te stemmen.
81
69
82
-
We adviseren je om de NL Design System bibliotheek naast de lokale bibliotheek van jouw organisatie te positioneren. Vervolgens kun je, geleidelijk aan, componenten die in beide bibliotheken aanwezig zijn uit de lokale bibliotheek van jouw organisatie inwisselen voor componenten uit de NL DesignSystem bibliotheek.
70
+
[Neem een kijkje in de 'NL Design System - ToDo Bibliotheek' in Figma](https://www.figma.com/design/42KfIBw43pwLxv2tE7oRzg/NL-Design-System---ToDo-Bibliotheek?node-id=3047-14&t=fpA32yYLXZpVB6tb-1)
83
71
84
-
Zo houd je uiteindelijk een lokale bibliotheek over met componenten die alleen voor jouw organisatie nodig zijn.
72
+
## Werken met de NL Design System bibliotheken
85
73
86
-
Trouwens… misschien zitten daar wel componenten tussen die andere organisaties goed kunnen gebruiken. In dat geval kun je die componenten altijd aan onze [backlog](https://github.com/nl-design-system/backlog) toevoegen.
74
+
Hoe je met de Figma bibliotheken kan werken, hangt af van je situatie.
87
75
88
-
**Nog geen eigen Figma bibliotheek?**
76
+
### Nog geen eigen bibliotheek?
89
77
90
-
Start dan met de componenten in de NL Design System bibliotheek. Maak daarnaast een lokale bibliotheek aan voor overige componenten. Denk bijvoorbeeld aan een ‘Pagina Header’ of ‘Pagina Footer’. Componenten die specifiek voor jouw organisatie zijn noemen wij ‘Snowflakes’.
78
+
Begin dan met de NL Design System bibliotheken. Voeg daarnaast een eigen 'lokale' bibliotheek toe voor organisatie-specifieke componenten. Denk aan componenten als een [Page Header](/page-header),[Page Footer](/page-footer)of een Button waar confetti uit knalt als je erop klikt. Zulke unieke componenten noemen we ook wel 'snowflakes'.
91
79
92
-
**Naamgeving Figma bibliotheken**
80
+
93
81
94
-
We houden de naamgeving van de Figma bibliotheken graag gelijk tussen de verschillende organisaties. Daarom hebben we als designers de volgende naamgeving afsproken:
82
+
### Heb je al een eigen bibliotheek?
95
83
96
-
- NLDS - [naam-organisatie] - Bibliotheek
97
-
- Local - [naam-organisatie] - Bibliotheek
84
+
Mooi! Je kunt je bestaande bibliotheek blijven gebruiken. Voeg de NL Design System bibliotheken toe als extra bron. Vervolgens kun je stap voor stap componenten vervangen die in beide bibliotheken staan. Zo houd je uiteindelijk een lokale bibliotheek over met alleen organisatie-specifieke componenten.
98
85
99
-
Hierdoor is het meest onderscheidende deel nog leesbaar als je in Figma meerdere tabjes open hebt staan.
86
+
100
87
101
-
88
+
:::tip[Tip]
102
89
103
-
#### Tokens Studio plugin
90
+
Misschien zijn die organisatie-specifieke componenten ook relevant voor andere organisaties. Deel ze gerust via onze [backlog](https://github.com/nl-design-system/backlog).
104
91
105
-
De componenten van het NL Design System hebben van zichzelf geen huisstijl. Iedere organisatie kan zijn eigen huisstijl op de componenten toepassen. Om dat voor elkaar te krijgen maken we gebruik van [design tokens](../design-tokens/README.mdx).
92
+
:::
106
93
107
-
94
+
## Naamgeving bibliotheken
108
95
109
-
Alleen biedt Figma, net als alle andere ontwerpprogramma’s, geen ondersteuning voor design tokens. Daarom maken we gebruik van de [Tokens Studio plugin](https://tokens.studio/).
96
+
We houden de naamgeving van de Figma bibliotheken graag gelijk tussen de verschillende organisaties. Daarom hebben we de volgende naamgeving afsproken:
-`NL Design System - Bibliotheek - {naam-organisatie}`
99
+
-`NL Design System - ToDo Bibliotheek - {naam-organisatie}`
100
+
-`Local - Bibliotheek - {naam-organisatie}`
112
101
113
-
Deze plugin zorgt ervoor dat je binnen Figma vanuit hetzelfde JSON bestand kunt werken als developers. Je put dus letterlijk uit dezelfde bron.
102
+
Zo blijft het herkenbaar, ook als je meerdere bestanden tegelijk open hebt in Figma.
114
103
115
-
104
+
## Tokens Studio
116
105
117
-
Binnen de NL Design System bibliotheek houden we de Brand, Common en Component [token niveaus](../design-tokens/README.mdx) aan. Dat betreft de plugin maar ook de pagina-indeling van de bibliotheek.
106
+
De componenten in de Figma bibliotheken van het NL Design System komen standaard met het 'Start-thema'. Iedere organisatie kan zelf zijn eigen kleuren, typografie en stijl toepassen. Dat doen we met design tokens.
118
107
119
-
##### Voorbeeld thema
108
+
Omdat Figma zelf geen ondersteuning biedt voor design tokens, gebruiken we Tokens Studio. Deze plugin maakt het mogelijk om design tokens in Figma te gebruiken én te synchroniseren met code (via een gedeeld JSON-bestand).
120
109
121
-
Het NL Design System heeft van zichzelf geen huisstijl. Maar om de werking en kracht van design tokens aan te tonen maken we wel gebruik van een [‘Voorbeeld’ thema](voorbeeld-thema.md).
110
+
-[Lees meer over design tokens](/handboek/huisstijl/design-tokens)
111
+
-[Lees meer het Start-thema](/handboek/huisstijl/themas/start-thema)
112
+
-[Lees meer over de Tokens Studio](https://tokens.studio/)
122
113
123
-
### Aan de slag
114
+
##Direct aan de slag
124
115
125
-
We hebben een [stappenplan](stappenplan.mdx) uitgeschreven om uit te leggen hoe je gebruik kunt maken van de NL Design System bibliotheek en de Token Studio plugin.
116
+
Wil je aan de slag? Volg dan het [Figma Stappenplan](/handboek/designer/figma-stappenplan). Daarin nemen we je stap voor stap mee in het gebruiken van de Figma bibliotheken en lees je hoe je de huisstijl van jouw organisatie kunt doorvoeren.
126
117
127
118
---
128
119
129
120
## Help deze documentatie te verbeteren
130
121
131
-
Om ervoor te zorgen dat deze documentatie nuttig, relevant en up-to-date is, kun je een wijziging voorstellen via [Github](https://github.com/nl-design-system/documentatie).
122
+
Om ervoor te zorgen dat deze documentatie nuttig, relevant en up-to-date is, kun je een wijziging voorstellen via [GitHub](https://github.com/nl-design-system/documentatie).
132
123
133
124
## Vragen
134
125
135
-
Heb je een vraag? Twijfel niet en [neem contact op met het kernteam](../../project/kernteam.mdx).
126
+
Heb je een vraag? Twijfel niet en [neem contact op met het kernteam](/project/kernteam).
0 commit comments