Een gedeelde Figma-bibliotheek als design toolkit

Dit noemen ze in Figma ook wel gedeelde bibliotheken. Een gedeelde bibliotheek bestaande uit UI elementen voor digitale producten kan een onderdeel zijn van een design system. Hierdoor kun je een gedeelde bibliotheek zien als een opstap naar een design system. De bibliotheek heeft als doel om efficiënter, consistenter en beter te ontwerpen.

Wij hebben Figma ingezet om een gedeelde componentenbibliotheek in te richten als design toolkit voor onze collega’s bij Informaat. Deze toolkit bestaat uit een verzameling templates die onze best practices voor het digitaal ontwerpproces ondersteunt. Over wat voor templates hebben we het dan? In ons werk zijn er een heleboel methodes die ons kunnen helpen in het ontwerpproces. Een methode correct toepassen en goed documenteren is altijd een uitdaging. Om dit eenvoudiger te maken hebben we een aantal handige templates die hierin kunnen helpen. Voorbeelden van methodes met templates zijn een Concurrentieanalyse, Persona, Customer Journey en Storyboard.

Hoe fijn zou het zijn als we ons design toolkit zo kunnen inrichten dat collega-ontwerpers altijd heel eenvoudig de meest up-to-date versie van een best practice template in gebruik kunnen nemen? Wij hebben Figma hiervoor gebruikt en in deze blog laten we zien hoe we dit hebben aangepakt.

Om onze design-toolkit zo eenvoudig mogelijk in te richten voor collega-ontwerpers hebben we de Atomic-design principes toegepast. Hierdoor kunnen de templates ook nog voor verschillende doeleinden gebruikt worden.

Volgens de principes van Atomic design bestaan templates uit kleinere componenten - fundamentele bouwstenen waarmee een template opgebouwd is. We spreken over atomen, moleculen, organismes en volledige pagina’s. Als we de Customer Journey als voorbeeld nemen, zijn de atomen de timeline, stap, touchpoint en emotiecurve. Deze vormen samen een molecuul: een stap in de tijdlijn van de Customer Journey. Door deze moleculen samen te brengen, ontstaat een organisme. Dit zijn groepen moleculen die samen een sectie vormen in het template.

Door die secties vervolgens samen te brengen, krijg je een compleet template van de Customer Journey.

Figma maakt het mogelijk om van ieder bestand een gedeelde bibliotheek te maken, die vervolgens heel eenvoudig aan te passen is. Deze aanpassingen worden door Figma direct doorgevoerd bij iedereen waar de bibliotheek mee gedeeld is, waardoor altijd eenvoudig de meest up-to-date versie gebruikt kan worden.

TIP: Houd er wel rekening mee dat Figma-bibliotheken op team niveau werken en er dus een betaalde licentie vereist is.

Om onze design toolkit zo eenvoudig mogelijk in te richten in Figma hebben we twee gedeelde bibliotheken opgemaakt. Een bibliotheek met alleen de volledige templates en een bibliotheek met alle ondersteunende componenten die in de templates gebruikt worden, de ‘foundation’.

Voor onze collega-ontwerpers willen we alleen de volledige templates in beeld hebben, dat is immers wat zij nodig hebben voor hun werk. Om dit te realiseren hebben we voor twee gedeelde bibliotheken gekozen. De foundation biedt een kijkje achter de schermen en is voor ons (de beheerders) om te onderhouden. Bovendien maken twee bibliotheken het mogelijk om in de toekomst op te schalen.

Waar begin je? Bij het inrichten van een gedeelde componentenbibliotheek moet je eerst de basis leggen. De basis bestaat uit kernelementen zoals kleuren, typografie en iconen. Hier een paar tips:

1. Begin met een kleurenpalet en houd de basiskleuren beperkt tot een minimum d.w.z. primair, secundair en tertiair.
2. Houd de naamconventies simpel en maak gebruik van slashes, bijvoorbeeld Gray/Black, Gray/Nearly Black & Gray/60.
3. Voeg de kleuren toe aan de Styles in het rechterpaneel.
4. Begin met twee lettertype families voor de typografie.
5. Maak vervolgens onderscheid in Heading en Body.
6. Houd ook hier de naamconventies simpel en maak gebruik van slashes. Bijv. Heading/Heading 1 Large, Heading/ Heading 1 Small, Heading/ Heading 2 Bold, Heading/ Heading 2 Regular
7. Voeg de typografie toe aan de Styles in het rechterpaneel.

Als je de basis hebt ingericht kun je deze kernelementen toepassen op de componenten en zo volgens de Atomic design principes de templates van je bibliotheek verder opbouwen.

Figma maakt het mogelijk om volgens de Atomic-designprincipes te bouwen, eenvoudig te hergebruiken en te delen over meerdere projecten en bestanden. Door de designtoolkit als een gedeelde bibliotheek in Figma aan te bieden, kunnen collega-ontwerpers nu eenvoudig vanuit de gedeelde bibliotheek templates in hun eigen projectbestanden gebruiken. De templates zijn meteen up-to-date en aan te passen naar je eigen wensen en behoeften. Bijvoorbeeld wanneer je het template in de visuele stijl van de klant wil gieten. Dat is in een paar handelingen gedaan.

Daarnaast kunnen collega-ontwerpers zich tijdens het gebruik focussen op de inhoud en niet op de onderliggende structuur van een Customer Journey, zoals de lay-out en de soorten rijen. Dat regelen wij juist voor ze. Wij zorgen dat de design toolkit up-to-date, toegankelijk en zo inzetbaar mogelijk is en blijft binnen Figma.

Zelf aan de slag met een gedeelde Figma bibliotheek? We hopen dat onze tips je helpen. We zijn benieuwd naar je ervaringen!

Dit artikel is tot stand gekomen in nauwe samenwerking met mijn collega Hannah Pak.