Hoe gebruik je Figma: je eerste ontwerp

Het snelste antwoord op de vraag hoe gebruik je Figma is niet de theorie lezen, maar meteen beginnen met ontwerpen. Figma is een tool die in de browser draait, een gratis startersplan biedt en is uitgegroeid tot de de facto standaard van de branche, zowel voor interfaceontwerp als voor prototyping. In dit artikel gaan we ervan uit dat je het nog nooit hebt geopend: we leren de interface kennen, maken je eerste frame, ontwerpen een eenvoudige mobiele kaart met de basistools en maken je bestand deelbaar. Het doel: eindigen met een ontwerp dat je echt zelf hebt gemaakt.

Figma openen en je eerste bestand maken

Om met Figma te beginnen, ga je gewoon naar figma.com in je browser en maak je een gratis account aan. Je kunt desgewenst ook de desktop-app downloaden; beide gebruiken dezelfde kern, dus er is geen verschil. Zodra je inlogt, verwelkomt een bestandsbeheer (Files) je. Wanneer je met de knop rechtsboven een nieuw design file maakt, opent een leeg, oneindig oppervlak. In de taal van Figma heet dit oppervlak het canvas, en het is echt onbeperkt: je kunt zoveel ontwerpen naast elkaar plaatsen als je wilt.

Een belangrijke gewoonte voor beginners: geef je bestand meteen een naam. Klik op de titel linksboven en typ bijvoorbeeld "Mijn eerste ontwerp". Figma slaat elke wijziging automatisch op, dus je hoeft niet naar Ctrl/Cmd + S te zoeken.

De interface leren kennen: drie hoofdgebieden

Hoewel de interface van Figma op het eerste gezicht druk oogt, bestaat hij eigenlijk uit drie logische gebieden:

• Linkerpaneel (Layers / Assets): de boomstructuur van elke laag in je ontwerp staat hier opgesomd. Naarmate een ontwerp groeit, wordt dit je kaart.
• Middengebied (Canvas): de eigenlijke werkruimte waar je tekent. Zoom in en uit met het scrollwiel en verschuif het beeld door de Spatie-toets ingedrukt te houden.
• Rechterpaneel (Design): hier stel je elke eigenschap van het geselecteerde object in — grootte, positie, kleur, rand, schaduw. Als er niets is geselecteerd, toont dit paneel de pagina-instellingen.

De werkbalk bovenaan bevat de tools die je het meest zult gebruiken. Elk heeft een sneltoets, en die leren verveelvoudigt je snelheid: V om te verplaatsen, F voor een frame, R voor een rechthoek, T voor tekst.

Wat is een frame en waarom is het de basis van alles?

In Figma is de basis van een ontwerp het frame. Zie een frame als een "containerdoos": een telefoonscherm, een webpagina of een visitekaartje. Alles wat je erin plaatst, hoort bij dat frame en beweegt mee. Het is Figma's equivalent van het "artboard"-concept in een klassiek ontwerpprogramma.

Wanneer je op F drukt, verschijnen er kant-en-klare formaten in het rechterpaneel: iPhone, Android, Desktop, tablet en meer. Voor ons eerste ontwerp kiezen we een iPhone 14 & 15 Pro-formaat (393 × 852). Op het canvas verschijnt een telefoonscherm. Onze werkruimte is nu klaar.

Je eerste ontwerp maken met de basistools

Laten we nu een eenvoudige "profielkaart" ontwerpen binnen dit telefoonscherm. We gaan stap voor stap:

• Achtergrond: selecteer het frame en stel de Fill-kleur in het rechterpaneel in op een lichtgrijze tint (zoals #F4F4F5).
• Teken de kaart: teken een rechthoek met R. Om de hoeken af te ronden, stel je de Corner radius-waarde in op 16 in het rechterpaneel en kies je wit als vulkleur. Voeg desgewenst een subtiele Drop shadow toe via de sectie Effects.
• Voeg een avatar toe: teken opnieuw met R een klein vierkant en maak er een cirkel van door de corner radius op de helft van de grootte te zetten (voor een vierkant van 40×40 gebruik je 20).
• Voeg tekst toe: druk op T, klik boven de kaart en typ een naam. Stel het lettertype, de grootte en het gewicht in via de sectie Text van het rechterpaneel. Voeg eronder een kleinere, grijze ondertitel toe.

Voor uitlijning komt mijn favoriete Figma-functie in actie: wanneer je twee objecten selecteert, verschijnen er rode hulplijnen en afstandsmaten tussen. Als je het ene object dichter bij het andere brengt, "klikt" het automatisch vast wanneer de middelpunten uitlijnen. Je kunt meerdere objecten selecteren en ze centreren met de uitlijnknoppen in het rechterpaneel, of ze met gelijke tussenruimte verdelen.

Korte tips voor kleur, typografie en lay-out

Voor een goed eerste ontwerp richt je je op consistentie in plaats van opvallendheid:

• Gebruik weinig kleuren: één neutrale (grijstinten), één hoofdkleur en één accentkleur zijn voldoende voor de meeste interfaces.
• Consistente ruimte: werk met veelvouden van 8 (8, 16, 24, 32 pixels). Dit "8-punts raster" maakt je lay-out meteen professioneler.
• Eén lettertype: gebruik in het begin verschillende gewichten van één familie zoals Inter; vier verschillende fonts op het scherm zorgen voor chaos.

Om een element te dupliceren versnelt Ctrl/Cmd + D of Alt ingedrukt houden tijdens het slepen je werk enorm. Als je een fout maakt, staat Ctrl/Cmd + Z altijd voor je klaar.

Het ontwerp delen en bekijken

Wanneer je ontwerp klaar is, kun je twee dingen doen. Ten eerste het op volledige grootte bekijken alsof het op een echt scherm staat, met de knop Present (afspelen) rechtsboven. Ten tweede een link maken met de knop Share en die naar een vriend of klant sturen. Precies hier ligt de kracht van Figma: degene met wie je deelt, kan het ontwerp in de browser zien zonder iets te installeren, en zelfs reacties achterlaten als je dat toestaat.

Als je een afbeelding wilt exporteren, selecteer je het object en download je het als PNG, JPG of SVG via de sectie Export onderaan het rechterpaneel. Voor het web werkt meestal PNG of SVG; voor druk doet een PNG met hoge resolutie het werk.

Veelgestelde vragen

Is Figma gratis?

Ja, Figma biedt een royaal gratis plan voor individueel gebruik. Hiermee kun je onbeperkt persoonlijke bestanden maken en een beperkt aantal gedeelde projecten beheren. Om te beginnen en te leren is het gratis plan ruim voldoende; functies zoals teams en onbeperkte versiegeschiedenis komen met de betaalde plannen.

Ik heb geen ontwerpervaring — kan ik het toch leren?

Absoluut. De leercurve van Figma is mild, en je hebt geen code of tekentalent nodig om de tool te gebruiken. Als je begint met een kleine kaart zoals in dit artikel en elke week een nieuw scherm ontwerpt, kun je binnen een paar weken comfortabel basisinterfaces bouwen.

Moet ik Figma gebruiken in plaats van Photoshop?

Voor interfaceontwerp (UI/UX), prototyping en teamsamenwerking is Figma veel praktischer omdat het in de browser draait en realtime delen biedt. Photoshop is daarentegen krachtig voor fotomanipulatie en rasterbewerking. Het doel is dus anders: ontwerp je een digitaal product, dan is Figma de juiste keuze.

Klaar om je eerste ontwerp te maken? Wil je de interface, het logo of een compleet productscherm van een merk professioneel opzetten, laten we je idee dan samen tot leven brengen. Neem contact met me op en vertel me over je project.