Embedded Files
Skill 1 | Skill 2 | Skill 3 | Skill 4 | Skill 5 | Skill 6 | Skill 7 | Skill 8
Eindopdracht Klas 3 | Opdracht Klas 4
Pro Skill 1 | Pro Skill 2 | Pro Skill 3
Skill 1: Wat is Figma
Skill 1: Wat is Figma
Leerdoelen
Je begrijpt wat Figma voor je kan betekenen.
Werkwijze
Begin met het aanmaken van je Figma account.
Bekijk het Figma filmpje.
Aanmelden bij Figma
Aanmelden bij Figma
Je bent een van de eerste dus we moeten kijken of alles werkt.
Klik hier om deel te nemen aan
Figma voor MVI klas 2025 - 2027.
Gebruik je schoolaccount, dus 4000xx@arentheemcollege.nl
Bij 'type of institution' kies je K12 (zie rechts)
Wat is Figma
Wat is Figma
Figma Design is een programma waarmee je digitale ontwerpen maakt, zoals een app of website. Je gebruikt het om schermen vorm te geven en om een klikbaar prototype te bouwen.
Tutorials
Tutorials
We hebben 3 goede online tutorials gevonden. Twee van Figma en een van Kevin Stratvert.
In de les gebruiken we 'de groene': Figma for Edu.
Figma: Design Basics (tot. plm 100min 2025)
Figma: Design for Beginners (tot plm 180 min 2025)
Start bij les 3 van 13
Fijne, rustige uitgebreide tutorials
Start bij les 3 van 13
Fijne, rustige uitgebreide tutorials
Kevin Stratvert
(75 min 2024)
(75 min 2024)
Skill 2: Frames en shapes
Skill 2: Frames en shapes
Leerdoelen
Je weet waar je Frames en Shapes voor gebruikt en je kan ze toepassen.
Werkwijze
Open de template in Figma
Start de video tutorial
Doe alles na wat er voorgedaan wordt in de video.
1 Using Frames
Open de template in Figma
Using Frames (14 min)
warmup
frames
grids en autolay-out
eerste prototype
2 Using Shapes
Open de template in Figma
Using Shapes (10 min)
shapes toevoegen
vierkanten en cirkels
sterren en polygonen
bouwen met shapes
speelplein
Skill 3: Typography
Skill 3: Typography
Leerdoelen
Je kan werken met Typography in Figma
Werkwijze
Open de template in Figma
Start de video tutorial
Doe alles na wat er voorgedaan wordt in de video.
3 Typography
Download de template
Typography (8 min)
instellingen
tekst op pad
tekst met vulling
tekst en vectoren
Skill 4: Tekenen, de pen, brushes/kwasten en effects
Skill 4: Tekenen, de pen, brushes/kwasten en effects
Leerdoelen
Je kan werken met de pen tool, met kwasten en met effecten.
Werkwijze
Open de template in Figma
Start de video tutorial
Doe alles na wat er voorgedaan wordt in de video.
4 Geometrisch tekenen
Download de template
Geometrisch tekenen (8 min)
basis handelingen
ontwerpen
speelplaats
5 Tekenen met de pen tool
Download de template
Tekenen met de pen tool (15 min)
start
pen tool basics
iconen tekenen
Alleen Kader en GTL
6 Vector brushes and effects
Download de template
Vector brushes and effects (11 min)
oefenen met tekengereedschap en de Shape builder
maak een logo
extra inspiratie
Figma Learn: Create an illustration in Figma Design met Frames, Shapes, Colors, Groups en Layers.
Skill 5: Animations
Skill 5: Animations
Leerdoelen
Je weet hoe je animaties maakt en daarna test met "Flows"
Je weet waar componenten voor zijn en hoe je ze maakt.
Werkwijze
Open de template in Figma
Start de video tutorial
Doe alles na wat er voorgedaan wordt in de video.
8 Opstart Animaties en componenten
Download de template
Maak opstart animaties (7 min)
Looping animation
Hoover of Mouse-over animation
Figma Learn: Design your first button met
Text, auto layout, color, effects en componentsFigma Learn: Create a loading animation (zie 8.1 hierboven bij Opstart Animatie) met
Shape tool, components, instances, smart animate, after delay, frames, rotation en inline preview
Skill 6: Maak een app
Skill 6: Maak een app
Leerdoelen
Je kan een eenvoudige app voor een mobiel device ontwerpen.
Werkwijze
Open de template in Figma
Start de video tutorial
Doe alles na wat er voorgedaan wordt in de video.
Figma Learn: Design an interactive button component met
Auto layout, components, variants en prototypingFigma Learn: Create a photo gallery prototype met
Frames, shapes, text, adding and replacing images, renaming layers in bulk, prototyping en smart animateFigma Learn: Hoe ontwerp je een app, in 5 stappen.
Skill 7: Maak een website
Skill 7: Maak een website
Leerdoelen
Je kan een complete website ontwerpen.
Werkwijze
Open de template in Figma
Start de video tutorial
Doe alles na wat er voorgedaan wordt in de video.
10 Maak een website
Download de template
Ontwerp een website met Figma (26 min)
introductie in Figma
maak een Style Guide
typografie
kleuren
maak componenten
maak het Design Canvas
auto layouts
van Figma naar Wix Studio
publiceer de website
Skill 8: Advanced Prototyping
Skill 8: Advanced Prototyping
Leerdoelen
Werkwijze
Advanced Prototyping
Alternatieve tutorials
Alternatieve tutorials
HvA Campus Creators: Figma voor beginners (NL 60 min 2025)
Bring Your Own Laptop (90 m 2023)
Eindopdracht Klas 3
Eindopdracht Klas 3
Opdracht Klas 4
Opdracht Klas 4
Pro Skill 1
Pro Skill 1
Pro Skill 2
Pro Skill 2
Google Sites
Report abuse