In dit artikel zullen we de elementen van de Figma-interface bespreken. Je vertrouwd maken met de interface aan het begin zal je latere werk veel gemakkelijker maken. We zullen de bestandsbrowser en de applicatie-interface bij het bewerken van een bestand bespreken. Lees verder om meer te ontdekken.
Het eerste dat je zult zien na het inloggen op Figma is de Bestandsbrowser, waarmee je door je account kunt navigeren. Van hieruit heb je toegang tot je projecten, teams en bronnen. De bestandsbrowserinterface bestaat uit 3 secties: Navigatiebalk, Zijbalk en Bestanden.
1. Navigatiebalk bevindt zich bovenaan het scherm en stelt je in staat om bepaalde acties op accountniveau uit te voeren.
A) Gebruikersnaam – hier wordt de naam van de actieve gebruiker weergegeven. Wanneer je erop klikt, kun je schakelen tussen de accounts waarop je op een bepaald apparaat bent ingelogd.
B) Zoekbalk – in deze sectie kun je snel zoeken naar projecten, collega’s en bestanden op naam.
C) Notificaties – hier verschijnen notificaties over alles wat er op je account zal gebeuren.
D) Accountmenu – hier kun je je accountinstellingen en geïnstalleerde plugins beheren.
Nuttige tip: Als je de Figma-desktopapp gebruikt, kun je eenvoudig schakelen tussen projecten en de bestandsbrowser. Projecten openen als nieuwe tabbladen, en de bestandsbrowser is gemarkeerd met het Thuis-pictogram.
2. Zijbalk – dit is het interfacegebied aan de linkerkant van het scherm. Het stelt je in staat om door bestanden en prototypes te navigeren.
Recents – in deze tab worden de bestanden en prototypes die je recentelijk hebt bekeken of bewerkt eerst weergegeven.
Concepten – hier zie je alle conceptversies die je hebt gemaakt. Daarnaast vind je de Verwijderde tab waar je gearchiveerde bestanden kunt bekijken.
Je kunt al verwijderde bestanden herstellen of permanent verwijderen – klik met de rechtermuisknop op het bestand om deze opties te zien.
Gemeenschap – dit is een ruimte waar je bestanden en plugins kunt doorbladeren die door andere Figma-gebruikers zijn gedeeld. We zullen in onze volgende blogpost op deze sectie terugkomen.
Teams – hier zie je alle teams waartoe je behoort.
3. Bestanden – in deze sectie worden al je bestanden weergegeven.
Voor elke pagina in de bestandsbrowser kun je kiezen hoe je de bestanden wilt weergeven: Weergeven als raster of Weergeven als lijst. Standaard is de rasterweergave ingesteld.
Bestanden kunnen worden gefilterd en gesorteerd volgens jouw behoeften.
Boven de lijst met bestanden in de tabbladen Recents en Concepten zijn er knoppen voor het toevoegen van bestanden: Nieuw ontwerp bestand of Nieuw FigJam bestand. Elk bestandstype heeft zijn eigen set functies en tools.
Ontwerpbestanden stellen je in staat om je interface-ontwerpen te maken.
FigJam-bestanden zijn digitale whiteboards die worden gebruikt voor onder andere online vergaderingen en workshops.
Taak 2.1. Maak kennis met de bestandsbrowserinterface in Figma en open je eerste project. Gebruik de Nieuw ontwerp bestand knop.
Je gebruikersinterface bij het bewerken van een bestand in Figma bestaat uit vier secties: Canvas, Werkbalk, Lagenpaneel, Eigenschappenpaneel.
1. Canvas is het hoofdgebied, gelegen in het midden van het scherm. Dit is de ruimte waar je zult werken.
2. Werkbalk is de balk die zich bovenaan het scherm bevindt. Hier vind je de nodige tools en functies die je nodig hebt om interfaces te ontwerpen.
a) Hoofdmenu – op deze plek heb je toegang tot de lijst van alle functies in Figma. Sneltoetsen worden ook op de lijst weergegeven.
Nuttige tip: Je kunt alle Sneltoetsen bekijken in een speciaal paneel. Om dit in te schakelen, klik je op het Hoofdmenu > Help en account > Sneltoetsen.
Het Hoofdmenu bevat de volgende opties:
b) Verplaats- en schaaltools
c)Frame- en Snijdtools
d) Vormtools – hier vind je basis geometrische vormen en de Afbeelding plaatsen functie.
e) Penn- en Potloodtools
f) Teksttool – het creëert tekstlagen.
g) Handtool – het stelt je in staat om rond het project te bewegen en binnen het bestand te klikken zonder per ongeluk objecten te selecteren en te verplaatsen.
h) Commentaartool – het stelt je in staat om snel ideeën uit te wisselen met teamleden.
i) Bestandsnaam – hier kun je de locatie van het bestand of de naam ervan zien en wijzigen.
j) Gebruikers – hier zie je de mensen die momenteel een bestand bekijken of bewerken.
Nuttige tip: Wanneer je in een team werkt, kun je op het avatar van een andere gebruiker klikken om de observatiemodus in te schakelen en hun acties in realtime te volgen. Het canvas en de avatar van de gevolgde gebruiker worden gemarkeerd met een gekleurd kader wanneer de observatiemodus aan is.
Je kunt jezelf ook zichtbaarder maken, zodat andere teamleden je acties gemakkelijk kunnen volgen. Klik op je avatar en selecteer Spotlight mij.
k) Delen instellingen – hier kun je de toegang van andere gebruikers tot het bestand beheren.
l) Presenteren – deze optie stelt je in staat om het bestand te bekijken en te interageren met de gemaakte prototypes.
m) Zoom/weergave opties – hier kun je snel de weergave-opties van het bestand aanpassen.
3. Het lagenpaneel is het gebied aan de linkerkant van het scherm. Hier worden alle componenten en lagen van het bestand weergegeven.
a) Lagen – hier zie je alle objecten die aan het Canvas zijn toegevoegd. Elk object is een aparte laag. Naast elke laag zie je een pictogram dat het type aangeeft.
Je kunt de naam van de laag wijzigen door dubbel te klikken op de geselecteerde laag in het Lagenpaneel.
Nuttige tip: Het is niet gemakkelijk om te onthouden om de namen van standaardlagen te wijzigen, maar probeer het in gedachten te houden. Dit houdt je bestand op orde en maakt het gemakkelijker om een specifiek element te vinden wanneer je het wilt bewerken. Als je het echter toch vergeet, is er niets verloren. Er zijn plugins zoals “Clean Document” die je helpen de rommel op te ruimen.
Nieuwe objectlagen worden geplaatst in het bovenliggende frame of de groep. Dit maakt het mogelijk om de weergave van de frame- en groeperingen te verkleinen en uit te vouwen.
Je kunt elke laag vergrendelen en ontgrendelen. Klik hiervoor op het Hangslot-pictogram dat verschijnt naast de laagnaam wanneer je met de muis over de laag beweegt. Je kunt vergrendelde of onzichtbare lagen heel gemakkelijk onderscheiden van andere lagen, omdat ze zijn gemarkeerd met een geschikt pictogram.
Nuttige tip: De mogelijkheid om lagen te vergrendelen is zeer nuttig, vooral wanneer sommige daarvan op de achtergrond staan. Dit helpt je om te voorkomen dat je elementen per ongeluk verplaatst.
Hier kun je ook de zichtbaarheid van de geselecteerde lagen in- en uitschakelen. Klik hiervoor op het Oog-pictogram. Je kunt vergrendelde en uitgeschakelde lagen op de lijst met lagen heel gemakkelijk onderscheiden – ze zijn gemarkeerd met geschikte pictogrammen.
b) Assets – In deze tab zie je de componenten die je in je bestand kunt gebruiken. Dit kunnen pictogrammen, knoppen of andere complexere gebruikersinterface-elementen zijn. Gebruik de zoekbalk om een specifieke component te vinden. Componenten kunnen worden gezocht in het huidige bestand en de bibliotheken waar je toegang toe hebt.
c) Pagina – Je kunt een onbeperkt aantal pagina’s in elk bestand toevoegen. Elke pagina heeft zijn eigen Canvas-achtergrond, zodat je aparte prototypes in één bestand kunt maken.
Nuttige tip: Je kunt de breedte van het Lagenpaneel aanpassen. Om dit te doen, pak je de rechterrand van dit paneel – je cursor verandert in een witte dubbele pijl. Sleep de rand totdat je de gewenste breedte hebt.
4.Eigenschappenpaneel is het gebied aan de rechterkant van het scherm, dat uit drie tabbladen bestaat: Ontwerp, Prototype, Inspecteren.
a) Ontwerp – hier kun je de eigenschappen van alle lagen bekijken en aanpassen: frames, vormen en teksten.
b) Prototype – hier vind je de instellingen van het prototype en de verbindingen tussen elementen in het bestand.
c) Inspecteren – in deze tab kun je zien hoe je de individuele objecten van je project in code kunt zetten. De beschikbare formaten zijn: CSS, Android en iOS.
Taak 2.2. Maak jezelf vertrouwd met de bestandsinterface in Figma. Zorg ervoor dat je de namen van de belangrijkste elementen van de interface al kent, zodat het gemakkelijker voor je is om door het bestand te navigeren bij het uitvoeren van praktische taken.
Dat is alles wat je moet weten over de Figma-interface. Bekijk ook onze andere artikelen: Scaling scrum.
Als je onze inhoud leuk vindt, sluit je dan aan bij onze drukke bijengemeenschap op Facebook, Twitter, LinkedIn, Instagram, YouTube, Pinterest.
Een grafisch en UX-ontwerper die in zijn ontwerpen overbrengt wat niet in woorden kan worden uitgedrukt. Voor hem heeft elke gebruikte kleur, lijn of lettertype een betekenis. Gepassioneerd in grafisch en webdesign.
Bedrijven worstelen met het beheren van een enorme hoeveelheid inhoud die online wordt gepubliceerd, van…
In het tijdperk van digitale transformatie hebben bedrijven toegang tot een ongekende hoeveelheid gegevens over…
Wist je dat je de essentie van een meeruurs opname van een vergadering of gesprek…
Stel je een wereld voor waarin jouw bedrijf boeiende, gepersonaliseerde video's kan maken voor elke…
Om het potentieel van grote taalmodellen (LLM's) volledig te benutten, moeten bedrijven een effectieve aanpak…
In 2018 was Unilever al begonnen aan een bewuste reis om automatisering en augmentatie in…