Figma structuur
Wil je als designer werken met NL Design System in Figma? Dan is het handig om eerst te begrijpen hoe de Figma structuur in elkaar zit.
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.
Je hoeft nu nog niets in te richten. Dit is vooral bedoeld om je op weg te helpen. In het Figma stappenplan leggen we stap voor stap uit hoe je daadwerkelijk aan de slag gaat.
Waarom Figma?
Figma sluit goed aan op hoe NL Design System werkt met componenten, design tokens en code.
Voordelen van Figma
- Platformonafhankelijk: werkt vanuit de browser.
- Samenwerken in realtime: meerdere mensen in 1 bestand.
- Prototypen en inspecteren in 1 tool.
- Structuur en naamgeving sluiten aan op front-end structuur.
Dit maakt Figma ideaal voor het werken met een gedeeld design system. Meer informatie over Figma vind je op help.figma.com en forum.figma.com.
Hoe is de structuur opgebouwd?
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.
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.
Maar 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 NL Design System.
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.
NL Design System bibliotheken
Vanuit NL Design System bieden we 2 Figma bibliotheken aan. De componenten in de bibliotheken worden ontwikkeld volgens het estafettemodel.
NL Design System - Bibliotheek
In deze bibliotheek vind je componenten met de status ‘Community’ en ‘Candidate’. Samen werken we toe naar componenten met de status ‘Hall of Fame’.
Neem een kijkje in de 'NL Design System - Bibliotheek' in Figma
NL Design System - ToDo Bibliotheek
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 van dat component. Of neem contact op met het kernteam om af te stemmen.
Neem een kijkje in de 'NL Design System - ToDo Bibliotheek' in Figma
Werken met de NL Design System bibliotheken
Hoe je met de Figma bibliotheken kan werken, hangt af van je situatie.
Nog geen eigen bibliotheek?
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 Footer of een Button waar confetti uit knalt als je erop klikt. Zulke unieke componenten noemen we ook wel 'snowflakes'.
Heb je al een eigen bibliotheek?
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.
Misschien zijn die organisatie-specifieke componenten ook relevant voor andere organisaties. Deel ze gerust via onze backlog.
Werk je samen binnen een community?
In de Community Sprints wordt samengewerkt in gedeelde Figma-projecten. Om dat makkelijker te maken, wordt binnen de Rijkshuisstijl Community en de MijnServices Community geëxperimenteerd met Connected Projects in Figma.
Wat zijn Connected Projects?
Connected Projects maken het mogelijk voor verschillende organisaties om samen te werken in een gedeelde Figma omgeving die automatisch is verbonden met één of meerdere bibliotheken.
Wanneer een bibliotheek wordt bijgewerkt, worden de wijzigingen zichtbaar in alle gekoppelde projecten. Na het accepteren van de updates werken ontwerpers direct met de nieuwste versies, zonder zelf bibliotheken te hoeven beheren of dupliceren.
Meer achtergrondinformatie vind je in de Figma handleiding over Connected Projects.
Waarom werken communities hiermee?
- Sneller up-to-date: ontwerpers werken direct met de nieuwste versies van bibliotheken, zonder handmatig te hoeven updaten.
- Consistentie in stijl: iedereen werkt vanuit dezelfde bron, waardoor componenten gelijk blijven in verschillende ontwerpen.
- Eenvoudiger beheer: één centrale bibliotheek wordt onderhouden, die automatisch doorwerkt in alle gekoppelde projecten.
Connected Projects zijn vooral geschikt wanneer meerdere organisaties samenwerken vanuit éénzelfde huisstijl, zoals bij de Rijkshuisstijl Community of MijnServices Community.
Tijdelijke werkwijze
Connected Projects zijn een experimentele manier van samenwerken binnen de Community Sprints. We verwachten dat deze aanpak helpt om eenvoudiger samen te werken en bibliotheken te beheren, vooral bij projecten waar meerdere organisaties actief samenwerken.
Onze Figma omgeving ondersteunt momenteel maximaal 6 Connected Projects. Wil je actief componenten bijdragen en meedoen aan deze pilotfase? Neem dan contact op met het kernteam om tijdelijk aan te sluiten met een Connected Project.
Naamgeving bibliotheken
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}NL Design System - ToDo Bibliotheek - {naam-organisatie}Local - Bibliotheek - {naam-organisatie}
Zo blijft het herkenbaar, ook als je meerdere bestanden tegelijk open hebt in Figma.
Tokens Studio
De componenten in de Figma bibliotheken van 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.
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).
Direct aan de slag
Wil je aan de slag? Volg dan het 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.
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.