Figma learning new skills

Dit project is een persoonlijk oefenlab waarin ik mijn visuele en technische vaardigheden in Figma verder ontwikkel. Ik volg hiervoor tutorials op YouTube en vertaal de geleerde technieken naar eigen illustraties en animaties. De focus ligt niet op het maken van volledige UX-projecten, maar op het opbouwen van een sterke basis in vectorillustratie, compositie en micro-interactions.

Ik werk vooral met de Pen Tool, boolean operations zoals union en subtract, het gebruik van vormen, masking en het opbouwen van complexere beelden uit simpele shapes. Daarnaast experimenteer ik met animaties in Figma om beweging en timing beter te begrijpen. Sommige oefeningen verliepen vlot, bij andere moest ik zelf oplossingen zoeken wanneer bepaalde functies, zoals “Use as mask”, niet werkten zoals verwacht.

Deze verzameling toont hoe ik stap voor stap mijn comfort met Figma vergroot, met als doel om later zelfstandig iconen, illustraties en visuele assets te kunnen maken voor UX/UI-projecten.

Ruimte tekeningen

In deze reeks maakte ik zes ruimte-gerelateerde illustraties met dezelfde aanpak: opbouwen uit basisvormen, werken met de Pen Tool en boolean operations zoals union en subtract. Het doel was om consistentie te krijgen in mijn vectorstijl en om complexere beelden stap voor stap op te bouwen uit simpele shapes.

Ruimte-illustratie van een astronaut Ruimte-illustratie van een satelliet Ruimte-illustratie van een vliegende schotel Ruimte-illustratie van een planeet met ringen Ruimte-illustratie van een telescoop Ruimte-illustratie van een raket

Line icons

Deze icon set bestaat uit 11 line icons die ik volledig in Figma heb getekend. Ik oefende hiermee met consistente lijndikte, eenvoudige vormen en een herkenbare stijl. Het doel is om later zelf iconen te kunnen maken voor interfaces, in plaats van telkens bestaande icon libraries te gebruiken.

Line icon van een grafiek en slot Line icon van een vergrootglas met vinkje Line icon van een staafgrafiek Line icon van een klok met instellingen Line icon van een browservenster Line icon van een locatiepin met instellingen Line icon van een document met gebruiker Line icon van een document met potlood Line icon van een browservenster met potlood Line icon van een badge met vinkje Line icon van een oogscanner

Kampvuur

In deze campfire scene combineer ik alles wat ik tot nu toe geleerd heb: werken met basisvormen, union en subtract, en de Pen Tool voor details. De scène is volledig opgebouwd uit vector shapes in Figma. Ik gebruikte geen externe illustraties, maar bouwde elk element zelf op, van de vlam tot de houtblokken en de omgeving.

Illustratie van een kampvuur met tent, bomen en vuur

Zeemeermin

Bij deze zeemeermin-illustratie liep ik tegen een technisch probleem aan: de “Use as mask”-functie werkte niet zoals verwacht in mijn Figma-bestand. In de YouTube-tutorial werd deze functie gebruikt om bepaalde delen van de tekening af te maskeren, maar bij mij gaf dit onverwachte resultaten.

In plaats van de tutorial exact te volgen, zocht ik een eigen oplossing. Ik werkte met alternatieve methodes, zoals het opdelen in losse lagen, het gebruik van extra shapes en het handmatig afknippen van paden. Hierdoor leerde ik niet alleen meer over masking, maar ook hoe ik flexibel kan blijven wanneer een bepaalde techniek niet werkt zoals gepland.

Kleurrijke zeemeerminillustratie

Carrousel animatie

In dit experiment heb ik een interactieve “Choose your character”- carrousel gemaakt in Figma met Smart Animate en component states. Bij het selecteren van een personage klapt de kaart vloeiend uit naar een uitgelichte weergave terwijl de andere kaarten meeschalen. Deze oefening gaf me meer inzicht in timing, interactie en micro-interactions binnen interfaces.

Line drawings

Ik maak in Figma line drawings met de Pen Tool om mijn portfolio meer persoonlijkheid en visuele samenhang te geven. De illustraties, zoals katten en bergen, gebruik ik als decoratieve elementen op verschillende pagina’s. Zo combineer ik mijn Figma-oefeningen met het ontwikkelen van een eigen illustratiestijl.

Line drawing van bergen Line drawing van een zittende kat Line drawing van een strekkende kat Line drawing van een open boek Line drawing van een pen Line drawing van een kaars Line drawing van een violist Line drawing van een trompet Line drawing van een saxofoon Line drawing van muzieknoten Line drawing van een enkele muzieknoot Line drawing van een vioolsleutel Line drawing van een filmklapper Line drawing van een veer Line drawing van bewegende pijlen Line drawing van bewegende pijlen 2 Line drawing van bewegende pijlen 3