Cursusbeschrijving
De wereld van ontwerpsystemen is enorm en de richtlijnen veranderen voortdurend naarmate er nieuwe technologieën en denkrichtingen opkomen. Het kan lastig zijn om te bepalen waar je moet beginnen, zelfs voor ervaren ontwerpers.
Deze cursus leidt je door het volledige traject van het ontwerpsysteem – van fundamentele concepten tot het bouwen en documenteren van je systeem.
We bieden richtlijnen, verkennen praktische toepassingen en geven hulpmiddelen bij het nemen van zinvolle beslissingen. We gaan ook in op Figma-functies zoals bibliotheken, eigenschappen van het component en stijlen.
Overzicht
- 4 schriftelijke lessen (+ 7 video's, 1 community-bestand)
- Ongeveer 2 uur
- Ontwerpsystemen, stijlen, componenten, bibliotheken
- Nederlands
Voor wie is deze cursus?
Ontwerpers die bekend zijn met stijlen en componenten in Figma, maar hun workflows willen verbeteren en hun vaardigheden willen uitbreiden naar een systeemniveau.
Managers en leiders die willen leren hoe ontwerpsystemen de productiviteit kunnen verhogen en het ontwerpproces op schaal kunnen ondersteunen.
Wat zul je leren?
- Begrijp wat een ontwerpsysteem is en of je er een nodig hebt, krijg steun van het leiderschap en overweeg waar je rekening mee moet houden bij het bouwen van je systeem.
- Ontdek wat er komt kijken bij een ontwerpsysteem en verken basisconcepten zoals kleur, typografie en iconografie.
- Kom meer te weten over Figma-functies voor het beheren van ontwerpsystemen: stijlen, componenten en bibliotheken
- Ontdek het belang van het documenteren van je systemen en processen Leer hoe je je ontwerpsysteem kunt onderhouden, verbeteren en als ambassadeur promoten
Cursusinhoud
Les 1: Welkom bij ontwerpsystemen
Ontdek de voordelen van een ontwerpsysteem en wat erbij komt kijken om er een te bouwen en te onderhouden.
- Hoofdstuk 1: Wat is een ontwerpsysteem?
- Stijlgidsen
- Componentbibliotheken
- Hoofdstuk 2: Heb je een ontwerpsysteem nodig?
- Voordelen van ontwerpsystemen
- Indicaties dat je een ontwerpsysteem nodig hebt
- Uitdagingen bij het bouwen van een ontwerpsysteem
- Hoofdstuk 3: Je product aan een audit onderwerpen
- Bondgenoten aantrekken
- Een audit uitvoeren
- Hoofdstuk 4: Het ontwerpsysteem-proces
- Stappen om te nemen
- Nadenken over je bijdragers, je publiek en je implementatieaanpak
Les 2: Je ontwerpsysteem definiëren
Ontdek welke hulpbronnen in een ontwerpsysteem kunnen worden opgenomen.
- Hoofdstuk 1: Principes
- Principes
- Hoofdstuk 2: Basisprincipes
- Toegankelijkheid
- Kleur
- Typografie
- Elevatie
- Iconografie
- Lay-outs
- Roosters
- Afstand
- Patronen
- Hoofdstuk 3: Documentatie
- Hoofdstuk 4: Processen
Les 3: Je ontwerpsysteem opbouwen in Figma
Volg het Habitz-team terwijl ze hun ontwerpsysteem in Figma opbouwen
- Hoofdstuk 1: Je bibliotheek instellen
- Inleiding tot stijlen en componenten
- Je bibliotheek ordenen
- Componentarchitectuur overwegen
- Atomisch ontwerp
- Naamgevingsconventies
- Hoofdstuk 2: Je fundament leggen
- Spatiëringsfuncties zoals lay-outrasters en automatische lay-out verkennen
- Kleur: Kleurstijlen maken
- Typografie: Tekststijlen maken
- Elevatie: Effectstijlen definiëren
- Pictogrammen en illustraties: Pictogram-componentensets maken
- Hoofdstuk 3: Componenten bouwen
- Eek dayToggle-component maken met eigenschappen van het component
- Een actionPresentationCard-component met varianten bouwen
- Hoofdstuk 4: Patronen definiëren
- Een daySelector-component met dayToggle-instanties maken
- Een component voor het navigatiepatroon maken
Les 4: Je systeem documenteren, verbeteren en updaten
Ontdek hoe je je ontwerpsysteem kunt documenteren en feedback kunt ontvangen om het te verbeteren en te onderhouden.
- Hoofdstuk 1: Documentatie
- Wat is documentatie?
- Waar moet je documenteren
- Een ruimtelijk systeem in Figma documenteren
- Hoofdstuk 2: Je ontwerpsysteem verbeteren
- Gebruikerstests uitvoeren
- Feedback van belanghebbenden vragen
- Bijdragen beheren
- Hoofdstuk 3: Updates en releases
- Een versiebeheersysteem en een wijzigingslogboek opzetten
- Vertakkingen voor bibliotheekbestanden verkennen
- Hoofdstuk 4: Wees ambassadeur voor je systeem
Update 1: Tokens, variabelen en stijlen
Ontdek ontwerptokens en hoe je ze kunt organiseren en structureren om waarde toe te voegen aan je ontwerpsysteem.
- Hoofstuk 1: Ontwerptokens
- Wat zijn tokens?
- Wat zijn de voordelen?
- Hoe moet je ze organiseren?
- Hoofdstuk 2: Tokens implementeren in Figma
- Kleurstijlen migreren naar variabelen
- Variabelenverzamelingen maken
- Modi voor thema's gebruiken
- Hoofdstuk 3: Tips voor het benoemen van je tokens