Design systems in code
Eén bron van waarheid voor kleuren, letters en componenten, vastgelegd in code: elk volgend scherm klopt vanzelf.
Waar het om gaat
Het tweede scherm is waar het misgaat. We leggen kleuren, typografie, spacing en componenten vast als tokens en herbruikbare bouwstenen, direct in code, zodat scherm twintig er nog steeds bij hoort.
Daardoor is er geen vertaalslag meer tussen ontwerp en bouw: wat de ontwerper bedoelt, is letterlijk wat de code doet. Elk volgend scherm erft de regels, en een huisstijlwijziging is één plek aanpassen in plaats van veertig schermen nalopen.
Het is een onderwerp waar we zelf in wonen: onze eigen producten UIcockpit en UISandbox draaien er volledig om. Die praktijkkennis zit in elk system dat we voor klanten maken.
Wat we doen
- Kleuren, letters en maten vastgelegd als tokens in code
- Een bibliotheek van componenten: knoppen, velden, kaarten
- Elk nieuw scherm klopt vanzelf met de rest
- Documentatie die je team en je volgende bureau snappen
Bijvoorbeeld
Een klantportaal en een interne tool die dezelfde knoppen, kleuren en formulieren delen, zodat een nieuwe collega het tweede scherm herkent van het eerste.
Hoe het werkt
- 01
Inventariseren
We kijken wat er al is: welke knoppen, kleuren en patronen komen terug, en welke zijn per ongeluk anders.
- 02
Vastleggen in code
Tokens en componenten in de code van het product zelf, niet alleen in een ontwerpbestand dat uit de pas loopt.
- 03
Gebruiken
Nieuwe schermen worden met het systeem gebouwd. Past iets niet, dan groeit het systeem mee, bewust.
Wat je krijgt
Een design system in code: tokens, componenten en documentatie in één.
Wat we van je nodig hebben
- De huisstijl, of de tijd om die samen scherp te zetten
- Toegang tot de code als er al een product is
- Iemand die beslist wat er in het systeem komt
Zo begin je
Deze dienst zit in de routes Klantervaring verbeteren en Nieuw product lanceren. Daar zit hij in de sprints waar hij nodig is. Na de livegang zet je hem in met een losse sprint, en klein beginnen kan met een van de losse diensten. Elk uur kost € 100.
Of begin klein
Vragen
Wanneer loont een design system?
Zodra een product meer dan een handvol schermen heeft, of meer dan één team eraan werkt. Daaronder zijn goede afspraken genoeg.
Werkt een design system met ons huidige framework?
We bouwen het in wat je product gebruikt. Voor nieuwe producten meestal React met Tailwind.
Is een design system ook bruikbaar voor AI-tools?
Ja, en dat is juist een groot voordeel: met vaste tokens en componenten bouwen AI-agents schermen die kloppen met de rest.
Lees ook
Wil je even gratis sparren over een design system voor jouw product?
Waar loop jij tegenaan in je bedrijf? Wat kan beter? Wat kan sneller? En wat doet iemand nog elke week met de hand?
- Een halfuur sparren over jouw idee, gratis
- Ontdek welke route het beste werkt voor jouw bedrijf
- Krijg een ruwe inschatting van de prijs en het aantal weken
„Een Google Maps voor ons magazijn, met filemelding bij stelling 12.”
Distributiecentrum, Waalwijk
Vertel me je probleem, je geniale idee of stel gewoon wat vragen!
Alexander Kaan, product designer