Bouw je eigen Design System

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 oefening 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 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 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 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