Bouw je eigen Design System

Van Figma tot Code

Build your own design system
Duur
Trainer
Randy Konings
Locatie
Op locatie & online
Prijs
€699 ex. btw
Taal
Nederlands
Niveau
Basiskennis HTML, CSS en JavaScript

Over de training

Een design system is een verzameling van herbruikbare componenten, richtlijnen en stijlen die worden gebruikt om consistentie en kwaliteit te verbeteren in user interfaces. Design systems worden steeds belangrijker in de wereld van software-ontwikkeling, omdat ze de ontwikkeling van nieuwe apps en websites kunnen versnellen en vereenvoudigen.

Deze training leert je hoe je een design system bouwt van UI-ontwerp in Figma tot een component in de bibliotheek van het design system. Je leert de basisprincipes van design systems, hoe je herbruikbare componenten en patterns maakt, en hoe je je design system kunt testen met interactive story testing. Je sluit de training af met het bouwen van een templatepagina met je eigen componenten. Na het volgen van deze training kun je direct aan de slag met het ontwikkelen van je eigen design system.

Na het volgen van deze training ben je in staat om:

  • De basisprincipes van designsystemen te begrijpen

  • Herbruikbare componenten en patterns te maken

  • Je designsysteem te testen met interactive story testing

  • Een templatepagina te bouwen met je eigen componenten

  • Een beter begrip te hebben van hoe design systems helpen om consistentie en kwaliteit te verbeteren in user interfaces

Lees meer hieronder en schrijf je in!

Randy docent

In deze training komt het volgende aan bod:

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 Nieuwegein

  • 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.

Design System

Planning en startdata

Zie onderstaande tabel voor aankomende data voor deze training. De training gaat door bij een minimaal aantal deelnemers. Indien dit niet het geval is, zorgen we op tijd voor een update.

Kunt u geen (geschikte) datum vinden of wilt u deze training incompany verzorgen? Neem dan contact met ons op.

 
Juliëtte Veldhuis
Juliëtte Veldhuis
Business Development Manager

Interesse in een training? We horen graag van jou

Ik vertel je graag meer over onze trainingen en onderzoek graag samen wat we voor elkaar kunnen betekenen.