Figma: wat is het en hoe werkt het?
Figma is een innovatieve en interessante editor voor vectorgrafieken ontworpen voor het web waarvan het gebruik door de jaren heen steeds meer is gegroeid: vandaag de dag is het een van de meest gebruikte platforms door UX/UI ontwerpers, communicatiebureaus en bedrijven wereldwijd!
De eerste versie van Figma werd gelanceerd in 2015 met als doel iedereen in staat te stellen “creatief te zijn met behulp van een browser“. In 2022 kocht Adobe, de Amerikaanse gigant die bekend staat om zijn suite van digitale grafische programma’s, Figma voor ongeveer 20 miljard dollar.
We weten nog steeds niet wat de toekomst van Figma zal zijn, maar zonder twijfel is het platform tegenwoordig een van de populairste grafische bewerkingstools voor websites en app-interfaces. Laten we vandaag eens kijken naar wat Figma is en hoe het werkt: een gids, deze, voor degenen die het programma nog niet kennen of er alleen maar over gehoord hebben!
Wat is Figma?
Figma is een platform voor grafische bewerking en interfaceontwerp: het is webgebaseerd en collaboratief. Met Figma is het mogelijk om een beetje van alles grafisch te doen – van het ontwerpen van websites en grafische gebruikersinterfaces voor apps tot het maken van posts op sociale media en presentaties – en het is daarom een steeds populairder hulpmiddel voor bedrijven en grafische ontwerpstudio’s.
Een van de meest innovatieve functies van Figma is zeker het feit dat het een samenwerkingstool is. Verschillende leden van een team werken aan hetzelfde bestand en in realtime. Dit betekent dat verschillende grafisch ontwerpers kunnen samenwerken aan de creatie van een ontwerp, maar ook dat ontwikkelaars en copywriters al in een vroeg stadium van het werk betrokken zijn.
Het resultaat? Er wordt veel tijd bespaard: geen eindeloze bestandsuitwisselingen meer. Bovendien bevordert samenwerking de creativiteit.
Het feit dat Figma webgebaseerd is – dat wil zeggen, het is gewoon toegankelijk via iemands browser – is een ander kenmerk dat zeer gewaardeerd wordt: het is niet nodig om programma’s te installeren en te updaten of licenties te kopen; alle teamleden kunnen vanaf elk besturingssysteem werken zonder zich zorgen te hoeven maken over onder andere lettertypen die op de machines geïnstalleerd zijn of het wisselen van computers.
Alles wordt opgeslagen in de cloud en in real-time, waardoor verschillende problemen worden vermeden – zoals het achteloos werken aan verouderde bestanden of het verspillen van veel tijd aan het uitwisselen van zelfs zeer zware documenten. Om Figma te gebruiken, moet je natuurlijk bijna altijd online zijn en een goede, stabiele internetverbinding hebben.
Je hebt nu een beter idee van wat Figma is. Tot slot moeten we zeggen dat Figma een gratis programma is, tenminste in de basisversie. Met het gratis Starter-pakket kunnen teams werken aan drie bestanden binnen een project en worden eerdere versies 30 dagen bewaard. Opgemerkt moet worden dat studenten en docenten ook gratis toegang kunnen aanvragen (vanaf hier) tot de professionele versie van Figma – die anders $12 per maand per gebruiker kost.
Samengevat, wat is Figma:
- Figma is een grafisch bewerkings- en prototypeprogramma.
- Figma wordt voornamelijk gebruikt voor digitaal ontwerp: dat wil zeggen, het ontwerpen van websites en app interfaces.
- Figma is web-based: dit betekent dat er geen software gedownload en geïnstalleerd hoeft te worden, maar dat het gebruikt wordt via de browser en een internetverbinding.
- Figma is collaboratief: meerdere gebruikers met verschillende rollen kunnen tegelijkertijd aan een project werken.
- Figma is real-time: alles wordt constant opgeslagen in de cloud.
Hoe werkt Figma?
Heb je een duidelijker beeld van wat Figma is en de mogelijkheden? Voordat we samen kijken naar hoe Figma werkt – in ieder geval in zijn basis en meest innovatieve elementen – laten we meteen een belangrijk aspect verduidelijken: Figma toont al zijn effectiviteit niet alleen voor het uiteindelijke ontwerp van een grafisch product, maar ook en vooral in alle voorafgaande fasen.
Brainstormen, verschillende grafische opties evalueren, prototypes maken, feedback verzamelen en implementeren: je kunt Figma zeer effectief gebruiken in al deze stadia! In Figma kan een team van ontwerpers bijvoorbeeld samen het wireframe van een website bouwen, d.w.z. het eenvoudige geraamte van een ontwerp zonder kleuren of stijlen, en meteen de eerste feedback van andere teamleden verzamelen of hen laten stemmen over de beste optie. Of prototype de interface van een app, d.w.z. simuleer navigatie en interactie binnen een ontwerp in een vroeg stadium.
Laten we nu uitleggen hoe de basisaspecten van Figma werken. Aan het einde van het artikel zullen we een aantal cursussen en bronnen aanbevelen om je kennis te verdiepen en een Figma professional te worden!
Een account aanmaken
Om een account aan te maken, registreer je gratis op figma.com. Eenmaal geregistreerd, kan je teams, projecten en jobs (bestanden) aanmaken. Nodig andere gebruikers uit in je team zodat je hen toegang kunt geven tot de projecten waar jullie aan gaan samenwerken.
Het werkgebied
Het werkgebied in Figma is een enorme omgeving – een vierkant van maximaal 65.000 pixels – waarbinnen je de verschillende schermen van het ontwerp waaraan je werkt kunt plaatsen.
Om schermen op te zetten, gebruik je de frametool: je kunt kiezen uit tientallen vooraf gedefinieerde formaten, bijvoorbeeld iPhone 14, Apple Watch 41 mm of een Facebook-post. Op deze manier kun je bijvoorbeeld de verschillende pagina’s van een website in één bestand verzamelen of laten zien hoe dezelfde pagina op verschillende apparaten moet worden weergegeven.
Bibliotheken en gemeenschappen
Een ander interessant aspect van Figma zijn de componentbibliotheken. Als je geen tijd wilt verspillen aan het opbouwen van elementen vanaf nul, kun je het maken van een ontwerp – of een concept – versnellen door gebruik te maken van de meest ongelijksoortige grafische elementen die al in de bibliotheken zitten. In de bibliotheken vind je bijvoorbeeld een voorgemaakte navigatiebalk, iconen of de meest voorkomende knoppen.
Blader door de Figma community – een van de meest interessante en nuttige plekken voor degenen die het platform gebruiken – om deze en andere elementen te zoeken. Hier vind je inspiraties, brainstormmateriaal, grafische elementen en zogenaamde ontwerpsystemen, dat wil zeggen een verzameling regels, richtlijnen en grafische elementen die helpen om samenhang te geven aan je grafische product.
Prototyping
In de Prototype sectie in Figma kun je verschillende schermen of grafische elementen aan elkaar koppelen door knooppunten te identificeren: je kunt bijvoorbeeld een knooppunt plaatsen op het ‘over’ item van een menu dat de gebruiker naar de bijbehorende pagina brengt. Of op een knop ‘inschrijven voor nieuwsbrief’. Door het prototype te starten, kun je de werking van een website of app-interface al in een vroeg stadium simuleren, zodat je kunt begrijpen wat werkt en wat moet worden verbeterd!
Feedback verzamelen
Zodra het bestand is gedeeld met de rest van het team, is het mogelijk om feedback te ontvangen en te plaatsen via handige gekleurde post-its. Post-its worden gebruikt om te stemmen, problemen te rapporteren of advies te geven door middel van meer gestructureerd commentaar. Je kunt je team bijvoorbeeld drie verschillende opties voor het ontwerp van een startpagina voorleggen en in realtime zien wat je collega’s ervan vinden.
Opmerkingen kunnen ook mondeling worden doorgegeven aan het programma, dat ze zal uitschrijven. Handig, nietwaar?
Cursussen en andere nuttige materialen voor het gebruik van Figma
Heb je gezien wat Figma is en hoe het werkt? De mogelijkheden zijn eindeloos! We durven te wedden dat je nu al zin hebt om het programma in handen te krijgen en je eerste creatieve experimenten samen met je team uit te voeren.
Als je vervolgens een pro wilt worden, is er een schat aan gratis bronnen online om Figma nog beter te leren gebruiken.
Een handige eerste introductie is die van Figma zelf, die je hieronder kunt vinden: in iets meer dan een uur geven de verschillende video’s een uitgebreid overzicht van het platform.
Online zijn er ook talloze cursussen, de meeste gratis. We wijzen bijvoorbeeld op deze cursus van Sherpa Design, de Italiaanse UX/UI Designer community. Dan zijn er nog de officiële cursussen van Figma, met modules van elk ongeveer tien minuten, en de beginnerscursus van The Designer Ship.
Leuk, toch? Nu we begrijpen wat Figma is en hoe het werkt, voor welk van je volgende projecten ga je het gebruiken?