In deze gids behandelen we de basisprincipes van werken met ontwerpbestanden in Figma Design.

Als je nog niet bekend bent met Figma Design, raden we je aan om onze Figma Design voor beginners cursus te volgen. In deze cursus leer je alles over het navigeren door ontwerpbestanden, werken met lagen, automatische lay-outs toepassen op frames, componenten maken en prototypeverbindingen aan ontwerpen toevoegen. Aan het eind heb je helemaal zelf een aanpasbare portfolio-website gemaakt. Lees meer over de cursus Figma Design voor beginners.

Wil je meer leren over de verschillen tussen de Figma-producten? Bekijk dan onze gids Wat is Figma.

Wat zijn ontwerpbestanden?

Met ontwerpbestanden kun je ontwerpen maken, delen en testen. Ze bieden je alle tools die je daarvoor nodig hebt. Ontwerpbestanden zijn populair bij ontwerpers, productmanagers, schrijvers en ontwikkelaars. Maar iedereen die visueel wil creëren of communiceren kan ze gebruiken!

Maak ontwerpbestanden om specifieke problemen te onderzoeken of het volledige ontwerpproces te beheren. Je kunt je ideeën zelf uitwerken, of ze met anderen delen om samen te ontwerpen en feedback te ontvangen.

Figma-bestanden zijn live en altijd up-to-date, zodat meerdere mensen tegelijkertijd in hetzelfde bestand kunnen werken. Doordat iedereen in één livebestand werkt, kan iedereen op dezelfde pagina werken zonder bestanden te hoeven opslaan, downloaden, of heen en weer te sturen.

Elk bestand heeft zijn eigen versiegeschiedenis, waar je de ontwikkeling van je ontwerpen kunt volgen. Bekijk eerdere aanpassingen, of maak nieuwe versies om belangrijke mijlpalen vast te leggen.

Ontwerpbestanden in de bestandsbrowser

Je kunt Figma Design-bestanden in de bestandsbrowser herkennen aan het pictogram op de bestandskaart.

Een voorbeeld van een ontwerpbestand met een omcirkelde pictogram van het ontwerpbestand.

Je weg vinden

Als je niet bekend bent met Figma, is het normaal dat je even moet zoeken wanneer je voor het eerst een bestand opent. We nemen je mee op een rondleiding, zodat je wegwijs wordt en met je team kunt samenwerken.

Ontwerpbestanden hebben vijf verschillende onderdelen:

(A) Navigatiebalk: Bevat toegangspunten tot verschillende canvas-workflows, tools, weergaven en bestandsmeldingen.

(B) Linkerzijbalk: Een paneel met canvasacties die afhankelijk zijn van het geselecteerde tabblad in de navigatiebalk.

(D) Rechterzijbalk: Bevat ontwerpeigenschappen en prototype paneel-eigenschappen. Bevat ook acties zoals delen en exporteren.

(E) Werkbalk: Bevat verschillende tools om objecten te maken, een menu met snelle acties en een schakelaar om tussen bestandsmodi te wisselen

Werkbalk in Figma Design met verschillende tools tegen een lichtpaarse achtergrond.

De werkbalk is je centrale punt voor interactie met het canvas en het toevoegen van objecten. Het herbergt al je gereedschappen voor het selecteren van objecten, bewegen over het canvas en het maken van frames, vormen, tekst en andere lagen. Deze elementen vormen de bouwstenen van je ontwerpen.

Wil je meer ontdekken? Bekijk dan tools in de werkbalk.

De navigatiebalk is de verticale balk helemaal links in een ontwerpbestand. Deze bevat tabbladen voor belangrijke workflows voor je canvas, zoals navigeren door lagen en pagina's, componenten invoegen, plug-ins en shaders gebruiken, het beheren van variabelen beheren en bestandsmeldingen bekijken.

Lees meer over de navigatiebalk.

Linkerzijbalk

De linkerzijbalk breidt de navigatiebalk uit en verandert afhankelijk van het tabblad dat je in de navigatiebalk hebt geselecteerd. Als je bijvoorbeeld het tabblad Bestand hebt geselecteerd, krijg je toegang tot lagen en pagina's, en kun je acties uitvoeren op je bestanden. Het tabblad middelen gebruik je om lokale componenten te bekijken of om componenten te zoeken in kits of bibliotheken (hiervoor heb je bewerkingsrechten nodig).

properties-panel (1).png

In de rechterzijbalk vind je meer informatie over je ontwerpen. Als je niets hebt geselecteerd, kun je lokale hulpbronnen bekijken, zoals kleur- en tekststijlen.

Als je een laag selecteert, kun je de eigenschappen van je huidige selectie bekijken. Je machtigingen bepalen wat je in de zijbalk kunt zien en welke acties je kunt uitvoeren.

In de rechterzijbalk vind je ook tools om je ontwerpen te delen en in realtime samen te werken. Je kunt bijvoorbeeld het bestand delen, zien wie er nog meer aanwezig is, via audio communiceren en meer.

Je kunt hier ook je persoonlijke instellingen voor zoom en de weergave aanpassen. De wijzigingen die je hier aanbrengt, zijn alleen van toepassing op jouw weergave.

Vergelijking naast elkaar van de tabbladen Reacties en Eigenschappen, waarbij reacties aan de linkerkant en ontwerpeigenschappen aan de rechterkant worden weergegeven.

Alleen weergave-toegang

Reactie: opmerkingen bekijken en doorzoeken
Eigenschappen: eigenschappen van je selectie bekijken

De rechterzijbalk naast elkaar weergegeven, met een voorbeeld wanneer het tabblad Design is geselecteerd, en bij het andere wanneer het tabblad Prototype is geselecteerd. De bijbehorende instellingen worden onder het geselecteerde tabblad weergegeven.

Bewerkingsrechten

Design: ontwerpeigenschappen van lagen bekijken en bewerken
Prototype: prototype-interacties, flows en instellingen bekijken en bewerken

Wil je meer ontdekken? Bekijk dan de rechterzijbalk.

Ontwerpen inspecteren met Dev Mode

Bekijk je het bestand als onderdeel van het overdrachtsproces? Dev Mode is een interface voor ontwikkelaars waarmee ze ontwerpbestanden kunnen inspecteren en navigeren.

Met Dev Mode kun je ontwerpen herkennen die ready for development zijn en de informatie te bekijken die nodig is om ontwerpen om te zetten in code. Meer informatie hierover vind je in onze Gids voor Dev Mode.

Canvas

Het canvas is je werkruimte waar je lagen rangschikt om je ontwerpen te maken. Je hebt alle ruimte om je ideeën te verkennen en verder uit te werken.

Verplaatsen om rond te kijken

Verplaats je over het canvas om door het bestand te navigeren en te zien wat er verder op het canvas staat.

Muis: Houd de spatiebalk ingedrukt en klik en sleep om over het canvas te bewegen.

Trackpad: Veeg met twee vingers in een willekeurige richting om over het canvas te bewegen. Figma gebruikt standaard de scroll-instellingen van je computer.

In- en uitzoomen

Zoom in om details beter te kijken, of zoom uit om het grotere geheel te zien. Weergave van het huidige zoomniveau in de rechterbovenhoek van het scherm.

Muis: Houd ⌘ Command/Ctrl ingedrukt en scroll omlaag om in te zoomen of omhoog om uit te zoomen.

Trackpad: knijp met twee vingers naar elkaar toe om uit te zoomen of beweeg ze uit elkaar om in te zoomen.

Een animatie die laat zien hoe je het canvas verschuift, in- en uitzoomt en met knijpbewegingen navigeert.

In alle rust verkennen

Als je voor het eerst werkt met Figma of een bestand verkent, kan het even wennen zijn om met objecten op het canvas te werken. Mensen zijn er vaak huiverig voor om per ongeluk iets verplaatsen, wijzigen of verwijderen.

Veel mogelijkheden ter beschikking hebben betekent niet automatisch veel verantwoordelijkheid. Selecteer het handgereedschap in de werkbalk of druk op H op je toetsenbord. Nu kun je klikken, slepen en in- en uitzoomen om door een bestand te navigeren, zonder je zorgen te maken dat je per ongeluk wijzigingen aanbrengt.

Alles samenbrengen

Laten we de belangrijkste punten kort samenvatten! De werkbalk bevat de tools en functies die je nodig hebt om lagen te maken en te combineren. Je kunt die lagen vervolgens op het canvas rangschikken om je ontwerpen te maken.

In de linkerzijbalk kun je je bestand verkennen en ordenen. In de rechterzijbalk kun je de eigenschappen van lagen bekijken.

Laten we wat dieper ingaan op twee belangrijke concepten: pagina’s en lagen.

Pagina's

Pagina's helpen je om je ontwerpbestanden te organiseren. Elke pagina heeft een eigen canvas, zodat je nog meer ruimte hebt om ideeën te creëren en te verkennen. Mensen gebruiken pagina's om:

Ontwerpen te beheren op basis van mijlpalen of status
Componenten te ordenen
Een verzameling van ideeën bij te houden
Oudere ontwerpen te archiveren

Bestandsbrowser van Figma die pagina's toont in de linkerzijbalk die zijn ingedeeld op basis van mijlpalen zoals overzicht, gebruikersonderzoek en componenten.

Als je door de pagina's van een bestand wilt bladeren, klik je op de naam van de huidige pagina in de linkerzijbalk. Je kunt ook op tikken om een nieuwe pagina te maken. Bekijk pagina's in de zijbalk.

Pagina's zijn handig om een specifieke collectie ontwerpen te delen. Je kunt bijvoorbeeld een aparte pagina maken voor een review of voor ontwerpen die Ready for Development zijn.

Als je een pagina wilt delen, klik met de rechtermuisknop op de paginanaam en klik vervolgens op Kopieer link naar pagina. Wanneer iemand die link opent, komt diegene direct op de juiste pagina terecht.

Lagen

Ontwerpen bestaan meestal uit een combinatie van vormen, tekst en andere elementen.

Wanneer je objecten aan het canvas toevoegt, behandelt Figma elk object als een afzonderlijke laag. Doordat lagen afzonderlijke zijn kun je de eigenschappen van elke laag apart wijzigen of bewerken.

Zoals dit ontwerp voor een social-bericht, dat een naam, profielfoto, afbeelding en onderschrift bevat.

Ontwerp van een social media-bericht met een hond en donuts, inclusief profielnaam, afbeelding en onderschrift op een gelaagd Figma-canvas.

Je hoeft geen expert in meetkundig te zijn om Figma te gebruiken. Maar het helpt om te weten dat we op het canvas met drie dimensies werken.

Zo hebben we de X (horizontale) en Y (verticale) as die de coördinaten bepalen van een laag op het canvas. Daarnaast hebben ook een derde dimensie, de Z-index en deze bepaalt de diepte en de volgorde waarin lagen worden weergegeven.

Lagen bekijken in het lagenpaneel

Lagen kunnen boven, achter, naast of binnen andere lagen staan. Je kunt zien hoe lagen zijn geordend in het lagenpaneel in de linkerzijbalk.

Soorten lagen

Elke laag heeft een naam en een pictogram dat het type laag aangeeft. Sommige van deze pictogrammen zie je ook in de werkbalk verschijnen. Je kunt de bijbehoren tool in de werkbalk selecteren, of de snelkoppeling via het toetsenbord gebruiken, om meer lagen van dat type te maken.

Volgorde en hiërarchie van lagen

De volgorde waarin lagen in het lagenpaneel verschijnen is ook belangrijk. De laagvolgorde bepaalt hoe lagen elkaar overlappen op het canvas.

Dit menu bevat een rechthoek die als achtergrond fungeert. Omdat deze laag onder de andere lagen in het lagenpaneel staat, verschijnt deze ook boven die lagen op het canvas. Als deze laag boven de andere lagen in het lagenpaneel stond, zouden de tekst of lagen van het pictogram niet kunnen zien.

Lagen als containers

We hebben al besproken dat lagen zich binnen andere lagen kunnen bevinden. Je kunt zien of een laag andere lagen bevat door te kijken of er een pijl naast staat in het lagenpaneel. Klik op de pijl om alle lagen binnen die container. te bekijken.

Relaties tussen lagen

We gebruiken de termen primair en secundair om relaties tussen containers en de lagen daarin te beschrijven.

Primaire -lagen bevatten andere lagen, zoals frames, componenten en groepen.
Secundaire -lagen bevinden zich binnen een primaire laag. Ze kunnen afzonderlijke lagen zijn, zoals een vorm of wat tekst, maar ook containers met eigen onderliggende lagen.

Lees meer over primaire, secundaire en gelijkwaardige lagen.

Werken met containers

Er zijn verschillende soorten lagen die als containers fungeren: groepen, frames en secties. Hoewel ze vergelijkbaar lijken, heeft elk type zijn eigen voordelen.

Groepen

Groepen zijn handig om lagen samen te voegen tot één enkel element. Ze houden het lagenpaneel overzichtelijk en vormen één object waarmee je in het canvas kunt werken. Bijvoorbeeld: je hebt een collectie vormen en die wil je bijelkaar houden.

Groepen zijn collecties die bestaan uit meerdere lagen en niet uit afzonderlijke elementen. Ze hebben daarom geen eigen dimensies of eigenschappen. Wanneer je wijzigingen aanbrengt in een groep, pas je die wijzigingen toe op elke laag in de groep.

Frames

Frames zijn een andere manier om lagen in Figma te combineren. Frames kunnen fungeren als basisstructuur voor een specifiek apparaat of schermformaat, zoals een pagina in een app-ontwerp. Ze kunnen ook dienen als containers voor lagen die samen een afzonderlijk elementen vormen, zoals de lagen in een navigatiebalk. Je kunt zelfs frames in andere frame plaatsen.

In tegenstelling tot groepen hebben frames eigen dimensies en eigenschappen, zoals vullingen, afgeronde hoeken en schaduwen. Ze bieden ook functies zoals automatische lay-out, beperkingen, en lay-outrasters, waarmee je kunt bepalen hoe de lagen binnen een frame zich gedragen en aanpassen.

Voorinstellingen voor frames

Figma heeft voorinstellingen voor veelgebruikte middelen, apparaten en schermformaten. Of je nu een mobiele app of een Instagram-bericht ontwerpt. Bekijk de frame-voorinstellingen.

Secties

Met de tool sectie kun je een specifiek gebied op het canvas afbakenen en labelen. Je kunt secties gebruiken om verwante concepten en ideeën te groeperen of je ontwerpen te organiseren.

Secties helpen je om je te focussen, context te geven en medewerkers door werkprocessen te leiden. Ze zijn ideaal voor activiteiten zoals reviews of voor het delen van ontwerpen voor overdracht.

Bekijk onze gids met de beste praktijkvoorbeelden voor meer informatie over wanneer je groepen en frames moet gebruiken.

Verken eigenschappen van lagen

Wanneer je met de muis over een laag of object op het canvas beweegt, verschijnt er een kader om het volledige element. Klik op een laag om deze te selecteren en meer informatie over de eigenschappen ervan te bekijken.

In de linkerzijbalk kun je de naam van de laag bekijken en hoe deze is georganiseerd. In de rechterzijbalk kun je de eigenschappen van de laag bekijken.

De eigenschappen van een laag bevatten basisinformatie over de laag, zoals de dimensies en de positie op het canvas. Daarnaast kun je de opmaak bekijken, zoals kleuren en teksteigenschappen, en effecten zoals schaduwen.

Welke eigenschappen je kunt zien, hangt af van het type laag dat je hebt geselecteerd. Als een laag een stijl gebruikt, zijn alleen de naam van de stijl en het pictogram zichtbaar in de rechterzijbalk.

Kun je de eigenschappen niet bewerken?

Als je op een laag klikt maar de eigenschappen niet kunt aanpassen, betekent dit dat je toegang hebt tot alleen-weergave. Je kunt het paneel eigenschappen gebruiken om de eigenschappen van de laag te bekijken, maar je kunt geen wijzigingen aanbrengen.

Als je het bestand bekijkt als onderdeel van het overdrachtsproces, dan is Dev Mode iets voor jou. Dev Mode is een interface voor ontwikkelaars waarmee ze ontwerpbestanden kunnen inspecteren en navigeren. Meer informatie hierover vind je in onze gids voor Dev Mode.

Machtigingen voor ontwerpbestanden

Je machtigingen bepalen welke acties je kunt uitvoeren en of je wijzigingen in bestanden kunt aanbrengen. We gaan hier niet uitgebreid in op het machtigingsmodel van Figma. Maar er is een verschil dat je moet weten: het verschil tussen of iemand kan bewerken en kan bekijken.

Mensen met de machtiging kan bewerken kunnen wijzigingen in een bestand aanbrengen. Dit omvat alles van het verplaatsen van lagen en het aanpassen van eigenschappen tot het beheren van het bestand zelf.
Personen met de machtiging kan bekijken kunnen pagina's en prototypes verkennen, maar ze kunnen geen wijzigingen aanbrengen. Gebruikers met de machtiging alleen-weergave, kunnen wel feedback geven op bestanden.

Acties die je kunt uitvoeren met de machtiging kan bekijken

Ontwerpbestanden openen en bekijken
Afstanden tussen lagen in ontwerpbestanden meten
Lagen selecteren in de linkerzijbalk of op het canvas
Het inspectievenster gebruiken om laageigenschappen te bekijken
Deelnemen aan audiogesprekken (met ondertiteling)
Opmerkingen beantwoorden of opmerkingen oplossen toevoegen
De versiegeschiedenis van een bestand bekijken en links naar specifieke versies dupliceren of delen
Prototypes en presentaties bekijken en ermee werken
Bestaande prototype-flows en verbindingen bekijken
Frames, componenten en lagen kopiëren of exporteren

Lees meer over rollen en machtigingen.

Hoe controleer je jouw machtigingen

De snelste manier om te controleren of je een bestand kunt bewerken, is door de werkbalk te bekijken. Als je de volledige werkbalk met alle tools en acties voor het maken van ontwerpen ziet, heb je bewerkingsrechten voor het bestand.

Als je Vragen om te bewerken ziet en slechts een beperkt aantal tools beschikbaar is, kun je het bestand alleen bekijken.

Heb je toegang nodig om te kunnen bewerken? Klik dan in de werkbalk op de knop om een verzoek om toegang tot een bestand. Als je deze optie niet ziet, betekent dit dat je toegang is beperkt door een team- of organisatiebeheerder. Gebruik je het Professional-plan? Neem dan contact op met je teambeheerder. Als je een Organization- of Enterprise-plan hebt, dien dan een verzoek in voor een upgrade naar een betaalde werkplek.

Klaar om te beginnen met creëren?

Deze projecten voor beginners zijn de perfecte manier om je leertraject te starten:

Pictogram van de laag	Naam van lagen	Snelkoppeling
	Frame	`F`
	Groep	`⌘ Command` `G`
	Component	`⌥ Option` `⌘ Command` `K` of `Ctrl` + `Alt` + `K`
	Exemplaar	N/B
	Tekst	`T`
	Vorm	`R`
	Afbeelding	`⇧ Shift` `⌘ Command` `k` of `Shift` `Ctrl` `k`
	Automatische lay-out	`Shift` `A`
	Sectie	`Shift` `S`
	GIF of video	`⇧ Shift` `⌘ Command` `k` of `Shift` `Ctrl` `k`