Bouw je eigen Design System

Deel 1: wat is een design system en waarom wordt het gebruikt + oefening: maak een klein design system in Figma

De training begint met een verkenning van Design Systems en Figma. We gaan ons verdiepen in wat het is, waarom het essentieel is en hoe het zich in real-world scenario's manifesteert. We gaan door de basisprincipes van Figma om een klein ontwerpbestand te maken met veelgebruikte componenten die nodig zijn in real-world applicaties als onderdeel van een design system. Vervolgens gaan we verder met een interactieve activiteit die je helpt de functies te leren kennen die we nodig hebben om nieuwe componenten te ontwerpen.

Wat je leert:

• Wat is een design system?

• Voordelen van het gebruik van een design system

• Het maken van herbruikbare stijlen (kleuren, typografie, enz.)

• Het organiseren van componenten en patterns (hiërarchie van componenten in het design system)

Deel 2: het ontwikkelen van interactieve componenten op basis van je nieuwe design system + praktische tips voor het beheren van componenten binnen het systeem

Deel 2 behandelt het ontwerpen van nieuwe componenten in Figma op basis van het design system. We beginnen opnieuw met het begrijpen van de basisbeginselen voordat we overgaan op de toepassing ervan en eindigen met een hands-on activiteit. We bespreken hoe we stijlen en assets kunnen beheren en hoe we componenten ontwerpen volgens de principes van atomic design.

Wat je leert:

• Het beheren van een design system library

• Het definiëren en gebruiken van componenten en varianten

• Het maken van een interactief prototype

• Het klaarmaken van een interactieve component voor ontwikkeling (plus het overhandigen aan ontwikkelaars)

Deel 3: van ontwerp naar code: een component ontwikkelen in Storybook

Deel drie begint met het creëren van een kleine component library met de nieuw ontworpen component in code in Storybook. Op dit punt heb je een solide basiskennis, die we kunnen uitbouwen met meer geavanceerde concepten, zoals interactief testen met Storybook en Design Tokens. Nadat we de theorie hebben doorlopen, gaan we aan de slag met een activiteit die reflecteert op real-world scenario's. We starten een klein component library en bespreken hoe we het project moeten structureren. Vervolgens ontwikkelen we een ontworpen component volgens alle specificaties van het design file.

Wat je leert:

• Het installeren en instellen van Storybook

• Navigeren door de Storybook-interface

• Het ontwikkelen van responsieve en toegankelijke componenten

• Het schrijven van stories voor componenten

• Het integreren van designtokens in CSS, SASS of LESS

• Introductie tot interactive story testing

• Voordelen van interactive story testing

• Het instellen van interactive story testing met Storybook

• Het schrijven van interactive stories voor componenten

• Hands-on activiteit: het maken van een eenvoudige component en bijbehorende story

Deel 4: Eindproject: bouw een templatepagina op basis van componenten in je Design System

Ons laatste deel, het bouwen van een templatepagina met de nieuwe componenten, sluit de training af. Hier duiken we in enkele van de meest geavanceerde en opwindende gebieden van ons onderwerp. We eindigen met een uitgebreide activiteit die alles samenbrengt wat we hebben geleerd: het bouwen van een templatepagina en het gebruik van de template om een pagina met gegevens te maken. Deze pagina fungeert als een speelruimte voor je componenten in je eigen design system. Dit stelt je in staat om snel, consistent en goed uitziende applicaties te ontwikkelen op basis van je eigen componenten.

Wat je leert:

• Hoe je een design system klaarstoomt voor een applicatie

Aan het einde van elke sessie bespreken we de belangrijkste takeaways en geven we je meer handvatten en bronnen om te oefenen. Gedurende de cursus zijn er genoeg pauzes en er zijn volop mogelijkheden om vragen te stellen, gedachten te delen en te sparren met je medestudenten.

Praktische informatie

• Deze training wordt verzorgd op het kantoor van Divotion in Utrecht

• De training bestaat uit één hele dag (8 uur) en duurt van 09.00 tot 17.00

• Nodig tijdens training: een laptop met IDE naar keuze (bij voorkeur VSCode of WebStorm / IDEA Ultimate)

• Wij verzorgen een lekkere lunch en drankjes zijn inbegrepen

• In de week na afloop van de training organiseren we een vragenuurtje met Randy waarin je al je vragen kunt stellen

Over de trainer

Randy Konings werkt al meer dan 12 jaar als front-end developer. Meer dan 10 jaar als freelancer en inmiddels bijna drie jaar bij Divotion. Vanuit Divotion werkte hij onder andere voor DSM, Intergamma en KLM. Randy's passie ligt bij het ontwikkelen van webapplicaties met veel gebruikers, omdat zijn werk dan een directe impact heeft op deze gebruikers en de winstgevendheid van bedrijven.