Embedded Files
Doel
Doel
Het doel is dat je uiteindelijk bij Skill 7 een website kan ontwerpen. Daar werk je in stapjes naartoe. Houd wekelijks je voortgang bij met het formulier dat je van je docent krijgt en aan het einde van de les weer inleverd.
Klik op de rode knop als je je voortgang ook online wil bijhouden.
Skill 1: Wat is Figma (week 1 en 2)
Skill 1: Wat is Figma (week 1 en 2)
Leerdoelen
Ik weet wat Figma is en waarvoor designers het gebruiken
Ik heb een account aangemaakt met mijn schoolmail
Ik herken de onderdelen van het Figma-scherm (canvas, lagen, eigenschappen)
Werkwijze
Begin met het aanmaken van je Figma account.
Bekijk het Figma filmpje.
Houd je voortgang bij.
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 6000xxxxx@arentheemcollege.nl
LET OP: bij 'What type of institution...' kies je High School of Higher Ed (zie rechts). Doe je dat niet dan moet je een ID invoeren.
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.
Ken je die apps op je telefoon die er gewoon lekker uitzien? Iemand heeft die ontworpen in Figma. Of die website waar alles op de juiste plek staat — ook Figma. Webdesigners en app-makers gebruiken dit programma elke dag, nog vóórdat er ook maar één regel code geschreven is."
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 (week 1 en 2)
Skill 2: Frames en shapes (week 1 en 2)
Leerdoelen
Je weet waar je Frames en Shapes voor gebruikt en je kan ze toepassen.
Je kan werken met layers, grids en auto lay-out
Werkwijze
Open de template in Figma
Start de video tutorial
En bouw alles na wat er voorgedaan wordt in de video.
1 Using Frames
Open de template in Figma
Figma: frames, autolay-out, grid auto lay-out
Using Frames (14 min)
warmup
frames
grids en autolay-out
eerste prototype
Skill 3: Typography (week 3 en 4)
Skill 3: Typography (week 3 en 4)
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
Figma: text and typography
Typography (8 min)
instellingen
tekst op pad
tekst met vulling
tekst en vectoren
Skill 4: Tekenen, de pen, brushes/kwasten en effects (week 3 en 4)
Skill 4: Tekenen, de pen, brushes/kwasten en effects (week 3 en 4)
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
Voor de snelle Basis leerlingen en voor Kader en GL/Mavo
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: Frames, Shapes, Colors, Groups en Layers
Figma Learn: Create an illustration in Figma Design met Frames, Shapes, Colors, Groups en Layers.
Skill 5: Animations (week 5 en 6)
Skill 5: Animations (week 5 en 6)
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
Opstart animatie voor in een app. Bekijk rechts de korte snelle filmpjes en hieronder het
Figma Learn: buttons, shape tool, animation, components, instances and preview
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 (week 5 en 6)
Skill 6: Maak een app (week 5 en 6)
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.
9 Prototyping app 1/2
Download de template
Maak een prototype voor deze scrollable website.
Upload de link naar je docent.
Prototyping app level 1 (8 min)
10 Prototyping app 2/2
Download de template
Maak een prototype voor deze website van 1 home pagina en 3 foto pagina's.
Upload de link naar je docent.
Prototyping app level 2 (7 min)
Figma Learn: interactive button component, photo gallery en app ontwerp.
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 (week 7)
Skill 7: Maak een website (week 7)
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
Alleen GL/TL
11 Wireframe in Figma
Download de template
Ontwerp een wirefram met Figma (28 min)
Create a canvas
Create text, headers, skeletons
Style Guides and reusable components
Wireframe sections and layouts
Prototype pages in Figma
Rebuild the wireframe on Wix Studio (No Code)
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: Maak een Quiz app (PTA toets)
Eindopdracht Klas 3: Maak een Quiz app (PTA toets)
Oefening voor de toets
Oefening voor de toets
Maak een app voor een iPhone 16 (W 393 x H 852)
De app heeft een landingspagina en 2 vervolgpagina's
Op de landingspagina komt het logo (download logo) met een animatie in beeld
Op iedere vervolgpagina's staat full-screen een foto (download foto 1 en 2)
Op iedere pagina staat een knop met "Volgende pagina' er op.
Als je op de knop klikt ga je naar de volgende pagina.
Kader en GL zorgen dat de knop van kleur verandert zodra je er met de muis over heen beweegt (hoover)
In de footer van de vervolgpagina's staat het logo.
Als je op het logo klikt ga je naar de landingspagina
Je mag de app verder zo mooi maken als je zelf wil.
Bekijk hier het voorbeeld
Toets Figma
Toets Figma
Maak in Figma een interactieve quiz
voor het gaming-event Pixel Game Fest.
De opdracht staat voor je klaar in Teams.
Je hebt voor deze opdracht twee document nodig: de opdracht (Word) en het Figma bestand met alle afbeeldingen.
Opdracht: Figma Quiz PTA toets.docx (Claude)
Figma bestand: Download Figma bestand.
Eventueel alles als zip bestand: Download als Zip
Bekijk hiernaast een voorbeeld van een uitgewerkte opdracht.
LET OP: maak wel je eigen ontwerp!
Basis Beroeps
Kader Beroeps
Gemengde Leerweg
Opdracht Klas 4
Opdracht Klas 4
Pro Skill 1
Pro Skill 1
Pro Skill 2
Pro Skill 2
Google Sites
Report abuse