Figma is een online design- en prototypingtool waarin je samen met anderen werkt aan digitale producten. Omdat alles in de cloud staat, hoef je geen bestanden te downloaden of rond te sturen. Je werkt rechtstreeks in je browser of via de desktopapp. Dat maakt het ideaal voor teams die op afstand werken of snel feedback willen uitwisselen. In dit artikel leer je hoe je Figma gebruikt: van je eerste bestand aanmaken tot samenwerken, hoe je kunt omgaan met lagen, frames en tekst en hoe je Auto Layout kunt inzetten. Het ontwerpen van digitale producten is nog nooit intuïtiever geweest.
Je kunt Figma onder andere gebruiken om mobiele apps, websites, dashboards, landingspagina’s en prototypes te ontwerpen. Ook kun je ontwerpen delen, reacties verzamelen en complete ontwerpsystemen opbouwen met componenten die je steeds opnieuw inzet.
Account aanmaken
Wanneer je wilt starten met Figma, dien je eerst een account aan te maken. Ga hiervoor naar figma.com en meld je aan met je e-mailadres of Google-account. De gratis versie is geschikt voor individuele gebruikers en kleine teams. Je kunt tot drie projecten maken, realtime samenwerken en gebruikmaken van de basisdesignfuncties. Voor grotere teams of wanneer je functies nodig hebt zoals uitgebreide bibliotheken, analyses of versiebeheer kun je overstappen op een betaalde versie. Die heb je al snel nodig: je kunt bijvoorbeeld een website ontwerpen, maar alleen met de betaalde versie kun je die publiceren.
Je kunt op twee manieren met Figma werken. In de webbrowser log je simpelweg in op figma.com. Je hoeft niets te installeren en kunt direct beginnen. Vind je een snellere workflow prettig, dan kun je de desktopapp voor macOS of Windows downloaden. De werkwijze is precies hetzelfde.
Het startscherm van figma.com
Het dashboard
Eerste project maken
Na het inloggen beland je in je dashboard. Dit is je werkruimte waarin je bestanden en teams beheert. Om te beginnen klik je bovenin op Make. Vervolgens geef je op wat je wilt maken, bijvoorbeeld een website. Hoe uitgebreider je de omschrijving maakt, hoe beter het resultaat. Je kunt bijvoorbeeld ook een website opgeven om die vormgeving als inspiratie te gebruiken.
Je kunt ook bovenin op Site klikken om een website vanaf nul te maken.
Hoe uitgebreider je de omschrijving maakt, des te beter zal het resultaat zijn
Laten we als voorbeeld nemen dat je een inlogscherm voor een smartphone wilt maken. Klik bovenin op Design. De Figma-editor opent en je ziet een leeg canvas als digitaal tekenvlak. onderin staat de werkbalk met gereedschappen voor onder andere frames, tekst en vormen. Links zie je het lagenpaneel en rechts het eigenschappenpaneel, waarmee je geselecteerde elementen aanpast.
Stel dat je een inlogscherm voor een smartphone ontwerpt. Kies met de frame-tool (F) een mobiel formaat, maak met R invoervelden aan en voeg met T labels toe zoals ‘e-mail’ en ‘wachtwoord’. Zo ontstaat je eerste kleine layout.
Een nieuw ontwerpbestand opzetten
Vanaf je dashboard klik je in het hoofdmenu op File > New Design. Het lege canvas verschijnt in een nieuw tabblad. Onderin het scherm zie je een balkje met mogelijkheden. We nemen ze even door.
1 Move (V). Hiermee kun je objecten verplaatsen. Klik je op de kleine v ernaast, dan verschijnen andere mogelijkheden: Hand tool en Scale. Deze zijn ook direct op de roepen via toetsen op je toetsenbord: V voor Move, H voor Hand tool en K voor Scale.
2 Frame (F). Frames werken als artboards of schermen. Ze helpen de afmetingen en de lay-out van jouw ontwerp vast te leggen. Druk op F of kies het frame-icoon. In het rechterpaneel zie je vooraf ingestelde forPmaten zoals iPhone-schermen, desktops of tablets. Je kunt ook zelf groottes tekenen of aanpassen. Ook deze toets heeft meer functies: Frame (F), Section (Shift + S) en Slice (S). Ontwerp je een app, dan zijn mobiele presets handig. Voor een website kies je bijvoorbeeld een desktopbreedte van 1440 pixels.
3 Rectangle (R). Hiermee kun je onder meer afbeeldingen toevoegen. De mogelijkheden zijn: Rectangle (R), Line (L), Arrow (Shift + L), Polygon (niet via sneltoets), Star (niet via sneltoets) en Image/video (Ctrl + Shift + K).
4 Pen (P). Hier heb je de keuze uit Pen (P) en Pencil (Shift + P).
5 Text (T). Wanneer je op het canvas klikt, verschijnen rechts in beeld diverse opmaakmogelijkheden, zoals lettertype en -grootte, tekstkleur en meer.
6 Comment (C). Wanneer je met meerdere personen aan een project werkt, kun je commentaar aan een element toevoegen.
7 Actions (Ctrl + K). Hier vind je verschillende functies verzameld, zoals Find and replace (zoek en vervang).
8 Draw. Wanneer je hierop klikt, verandert het menu en krijg je verschillende tekengereedschappen.
9 Design. Deze is standaard geselecteerd. Wanneer je eerder voor Draw had gekozen, dan ga je hiermee weer terug naar de Design Mode.
10 Hiermee ga je naar de Dev Mode, maar daarvoor dien je het abonnement Professional te hebben.
Beginnen
Stel, je wilt een startscherm maken voor een mobiele telefoon. Klik dan eerst op Frame en kies in de rechter kolom bijvoorbeeld voor iPhone 16. Er verschijnt een wit canvas in beeld van 393 x 852 pixels. Vervolgens kun je beginnen met het toevoegen van visuele elementen. Met R teken je een rechthoek. Je sleept het formaat eenvoudig op het canvas. Via het vormmenu kun je ook cirkels, lijnen, polygonen en sterren toevoegen. Vormen gebruik je als knoppen, containers of tijdelijke placeholders tijdens het schetsen van een layout.
Het lege canvas om een scherm voor de iPhone 16 te maken
Tekst plaatsen en aanpassen
Met T voeg je tekst toe. Klik ergens op het canvas en begin te typen. Rechts in het eigenschappenpaneel pas je lettertype, grootte, kleur, regelafstand, uitlijning en letterafstand aan. Je hebt toegang tot alle Google Fonts en kunt via de desktopapp ook eigen lettertypen laden.
Werken met lagen
Elk element dat je toevoegt, wordt automatisch een laag. In het lagenpaneel zie je de volledige structuur van je ontwerp. De bovenste lagen liggen visueel voor de onderste. Lagen houden je ontwerp georganiseerd. Geef ze herkenbare namen zoals ‘header-achtergrond’ of ‘knop verzenden’. Zo vind je alles snel terug. De lagen zie je staan aan de linkerzijde van het scherm onder Layers.
Groeperen
Wanneer meerdere elementen samen horen, kun je ze groeperen. Selecteer de verschillende lagen met de Shift-toets en de linker muistoets. Klik vervolgens op het hangslotje dat verschijnt. Om de groepering op te heffen, klik je eveneens op het slotje.
Terug naar tekst
We gaan nog even terug naar de tekst, want tekst speelt een grote rol in UI-ontwerp. Figma geeft je alle opties om typografie nauwkeurig te beheersen. In het eigenschappenpaneel rechts stel je lettertype, grootte, kleur, uitlijning, regelafstand en letterafstand in. Omdat je met Google Fonts werkt, hoef je zelf niets te installeren.
Met slimme hulplijnen positioneer je tekst precies tegenover andere elementen. Je kunt ook lay-outgrids aanzetten voor extra controle en pixel-perfecte ontwerpen.
Hulplijnen helpen je om je elementen netjes uit te lijnen
Auto Layout
Een handige functie is Auto Layout. Die zorgt ervoor dat elementen automatisch meeschalen afhankelijk van de inhoud. Je hoeft hun positie niet handmatig te verschuiven; Figma regelt afstand, uitlijning en vulling voor je. Dit maakt ontwerpen flexibel en efficiënt. Je vind Auto Layout onder Actions (Ctrl + K).
Selecteer een frame of groep en klik rechts Actions. Je kunt vervolgens met Add auto layout direct aan de slag of je kunt Figma ook een suggestie laten doen via Suggest Auto layout. Aan de rechterzijde van het scherm zie je Layout veranderen in Auto layout. Hier kun je vervolgens handmatig aanpassingen doen. Verander je bijvoorbeeld de grootte van het lettertype, dan veranderen andere elementen automatisch mee.
Auto Layout is ideaal voor elementen die veranderende inhoud bevatten, zoals knoppen met verschillende label-lengtes, kaarten met langere teksten of lijsten die groeien of krimpen. Het maakt het ontwerpproces sneller en vermindert fouten.
De knop Share vind je rechtsboven in het scherm
Samenwerken in Figma
Met de knop Share nodig je anderen uit via hun e-mailadres. Je bepaalt of iemand alleen mag bekijken of ook mag bewerken. Je kunt ook een link genereren die je instellingen volgt, bijvoorbeeld alleen toegankelijk voor je team.
Wanneer meerdere mensen in je bestand werken, zie je hun cursors bewegen en wijzigingen verschijnen zonder te verversen. Je kunt iemand volgen, terwijl diegene door het ontwerp beweegt, of naast elkaar werken aan verschillende delen van dezelfde pagina. Met C activeer je de commentaarfunctie.
Wijzigingen
Alle wijzigingen worden automatisch opgeslagen en voorzien van datum en auteur. In de versiegeschiedenis zie je elke stap terug. Je kunt versies handmatig een naam geven, bijvoorbeeld vóór een bepaalde presentatie, zodat je eenvoudig terug kunt naar dat moment.
Tot slot
Figma heeft het ontwerpproces volledig veranderd. Dankzij de intuïtieve interface, krachtige functies, realtime samenwerking en uitgebreide community is het een compleet platform voor moderne productontwikkeling. Door deze basis te beheersen, kun jij zelfverzekerd ontwerpen, testen en itereren. Figma geeft je alle tools om je ideeën tot leven te brengen. Ga er dus gewoon eens mee aan de slag.
Al snel boek je resultaat met Figma
