Definitie: Figma is een online ontwerptool waarmee je schermen voor websites en apps ontwerpt, er klikbare prototypes van maakt en er met meerdere mensen tegelijk aan werkt. Het programma draait in de browser en als desktop-app, en wordt veel gebruikt voor UI- en UX-ontwerp, wireframes en ontwerpsystemen.
In het kort
- Figma werd opgericht door Dylan Field en Evan Wallace en kwam in 2016 uit.
- Je werkt in de browser, dus zonder installatie en op Windows, Mac of Linux.
- Meerdere mensen kunnen tegelijk in hetzelfde bestand werken en commentaar geven.
- Er is een gratis abonnement met een beperkt aantal bestanden; betaalde abonnementen zijn bedoeld voor teams.
Wat is Figma?
Figma is een programma om digitale schermen te ontwerpen. Denk aan de pagina’s van een website, de schermen van een app of het dashboard van een webapplicatie. Je tekent er knoppen, formulieren, menu’s en tabellen mee, en legt vast hoe ze eruitzien.
Het grote verschil met oudere ontwerpprogramma’s is dat Figma in de browser werkt. Je deelt een link, en iedereen met toegang kijkt mee. Volgens Seahawk Media is dat een van de belangrijkste redenen voor de populariteit: een ontwerper, ontwikkelaar en opdrachtgever werken in hetzelfde bestand, zonder versies heen en weer te mailen.
Waarvoor gebruik je Figma?
- Wireframes. Eenvoudige schetsen van de indeling van een scherm, zonder kleur of vormgeving.
- Visueel ontwerp. Uitgewerkte schermen met huisstijl, typografie en afbeeldingen.
- Klikbare prototypes. Schermen die met elkaar verbonden zijn, zodat je door een app kunt klikken voordat er code is.
- Ontwerpsystemen. Herbruikbare componenten, zoals knoppen en invoervelden, met vaste stijlen.
- Overdracht aan ontwikkelaars. Ontwikkelaars lezen maten, kleuren en teksten direct uit het ontwerp.
- Brainstormen. Met FigJam, het digitale whiteboard van Figma, maak je schema’s en moodboards.
Hoe maak je een prototype in Figma?
Banani beschrijft het maken van een prototype in een paar stappen:
- Ontwerp de schermen die bij een route horen, bijvoorbeeld een overzicht, een detailpagina en een formulier.
- Open de prototypemodus in het paneel aan de rechterkant.
- Verbind elementen met schermen. Sleep van een knop naar het scherm dat moet openen.
- Kies een overgang, zoals schuiven of vervagen.
- Test het prototype met de knop om het te presenteren.
- Deel een link met collega’s of testgebruikers.
Een prototype in Figma ziet eruit als een echte app, maar er zit geen logica achter. Gegevens worden niet opgeslagen en berekeningen werken niet. Het is bedoeld om een route te bespreken en te testen, en om feedback op te halen voordat er tijd in ontwikkeling gaat zitten.
Valkuilen bij werken met Figma
- Een mooi ontwerp lijkt af. Een uitgewerkt scherm wekt de indruk dat de applicatie bijna klaar is, terwijl de logica, gegevens en koppelingen nog gebouwd moeten worden.
- Alleen het ideale pad ontwerpen. Vergeet lege overzichten, foutmeldingen en wat een gebruiker ziet zonder rechten niet.
- Te vroeg in detail. Begin met eenvoudige wireframes en werk pas uit als de route klopt.
Wat kost Figma?
Volgens Cprime biedt het gratis abonnement drie ontwerpbestanden en onbeperkt gebruik van FigJam. Voor meer bestanden, gedeelde bibliotheken en grotere teams zijn er betaalde abonnementen per gebruiker. Controleer de actuele prijzen op de website van Figma.
Figma vergeleken met andere tools
| Tool | Kenmerk |
|---|---|
| Figma | Werkt in de browser, sterk in samenwerking en prototypes |
| Sketch | Lang de standaard voor interfaceontwerp, alleen voor Mac |
| Adobe XD | Ontwerp- en prototypetool van Adobe |
| Penpot | Open source alternatief dat ook in de browser werkt |
Wat betekent dit voor jouw project?
Wie gaat het gebruiken, en welke taak moet die persoon als eerste kunnen afronden? Een schets of prototype maakt die vraag zichtbaar voordat er gebouwd wordt. In de betaalde blauwdruk horen daarom schermschetsen van de belangrijkste route. Welke tool je daarvoor gebruikt is minder belangrijk dan dat de route klopt.
Vraag? Stuur me voor wie het is, wat er nu gebeurt en wat de eerste versie moet oplossen. Dan bepalen we samen de logische eerste stap.
Veelgestelde vragen over Figma
Wat is Figma?
Figma is een online ontwerptool voor het ontwerpen van schermen voor websites en apps. Je maakt er wireframes, visuele ontwerpen en klikbare prototypes mee, en werkt er met meerdere mensen tegelijk in.
Is Figma gratis?
Figma heeft een gratis abonnement met een beperkt aantal ontwerpbestanden. Voor teams en grotere projecten zijn er betaalde abonnementen per gebruiker.
Kun je met een Figma-prototype een app maken?
Nee. Een Figma-prototype is klikbaar, maar bevat geen werkende logica of database. Het is bedoeld om een ontwerp te tonen en te testen; de werkende app wordt daarna gebouwd.
Verwante termen
UX design · Wireframe · Mockup · Klikbaar prototype · Prototype
← Terug naar de kennisbank