3 mei 2023

Drie redenen waarom wij zo’n fan zijn van Figma

  • Profielfoto Robin 08125 Final
    Robin SchaessensUX/UI DESIGNER

Figma is steeds populairder onder ontwerpers en teams over de hele wereld. Ook wij zijn er fan van. Onze Figma-expert Robin legt je graag uit hoe de tool z’n hart heeft gestolen en waarom hij het nooit meer zou kunnen missen.

Wat is Figma?

Figma is een design-tool voor het ontwerpen van interfaces, websites en apps. Het is een cloud-based platform, wat betekent dat het ontwerp in de cloud wordt opgeslagen en toegankelijk is voor meerdere gebruikers. In Figma werk je een volledig UX-traject uit, van IA tot high-fidelity designs en prototyping.

Figma2

Atomic design made easy

Waar Figma vooral in uitblinkt, is het implementeren van Atomic Design. Dat is een innovatieve ontwerpmethode die gericht is op het bouwen van modulaire en schaalbare ontwerpsystemen. Het idee achter Atomic Design is dat ontwerpelementen in kleine, herbruikbare bouwstenen kunnen worden onderverdeeld, waardoor een flexibel en efficiënt ontwerpsysteem ontstaat. Die vijf verschillende niveaus zijn: atomen, moleculen, organismen, sjablonen en pagina’s. Elk niveau bouwt voort op het vorige niveau en vormt de basis voor het volgende niveau.

Als je een huis bouwt, moeten ook de bouwstenen eerst gebakken worden. Zo werkt het ook met Atomic Design. - Robin

In Figma kan je dus een heel systeem bouwen rond deze componenten. Je begint met een Foundation waarin je kleuren en typografie kunt definiëren en nadien toepassen in verdere files, de atomen als het ware. Dat maakt ontwerpen in Figma uitzonderlijk gebruiksvriendelijk en snel.

Het Foundation document is een ondersteunend document bij het ontwerpproces. Niet elke component in de designs komt echter per se uit dat document. Het dient vooral als startpunt en afhankelijk van wat de klant nodig heeft, kan er worden afgeweken van de richtlijnen in het document.

Zoals gezegd is een van de eerste stappen in het ontwerpproces het definiëren van de kleuren en lettertypes die worden gebruikt in het design. Vervolgens wordt er gewerkt aan low-fidelity designs, die voornamelijk uit schetsen en wireframes bestaan.

Dit geeft een grove indruk van de structuur en indeling van de website of app. Hierna wordt er gewerkt aan high-fidelity designs, waarbij er meer detail wordt toegevoegd aan de schetsen en wireframes. Soms worden er ook nog prototypes gemaakt om het ontwerp te testen en te verfijnen.

Als laatste stap kan het prototype 1 op 1 worden getoond aan de klant op bijvoorbeeld een smartphone, zodat deze een goed beeld krijgt van hoe het ontwerp eruit zal zien en werkt.

Uiteindelijk wordt er een Figma-file gemaakt die naar de developers kan worden gestuurd. Met behulp van een plug-in is het zelfs mogelijk om het ontwerp te exporteren naar HTML.

Flow atoms

Focus op samenwerking en real-time bewerking

Figma is ontworpen als een cloud-platform, wat betekent dat Figma vanaf elke locatie toegankelijk is en er geen installatie of update van software nodig is. Ontwerpen worden opgeslagen als projecten in de cloud, waardoor ze gemakkelijk toegankelijk zijn voor alle teamleden. Dit betekent dat ontwerpen op elk moment en op elke locatie kunnen worden bewerkt en dat de wijzigingen automatisch worden opgeslagen.

Figma biedt ook een aantal functies die uniek zijn voor het platform. Figma’s autolayout-functie bijvoorbeeld maakt het gemakkelijk om ontwerpen aan te passen aan verschillende schermformaten zonder dat je elk afzonderlijk element hoeft aan te passen. Dit maakt het mogelijk om responsieve ontwerpen te maken zonder dat je daarbij veel tijd kwijt bent aan het handmatig aanpassen van elk element. Figma biedt ook de mogelijkheid om direct een prototype van een ontwerp te maken zodat je snel feedback krijgt van teamleden of klanten.

Figma plug-ins

Wat Figma bij uitstek flexibel maakt, is hoe er wordt aangemoedigd om zelf plug-ins te bouwen. Zo hebben users al een chattool gebouwd, of een tool om automatisch foto’s van Unsplash te integreren in je designs zonder eerst naar de website van Unsplash te surfen om daar foto’s te downloaden. Robin maakt even een short-list van zijn favoriete plug-ins:

  • Stark: We werken met WCAG-principes. Stark geeft meteen aan of onze designs voldoen aan die principes.
  • Breakpoints: genereert automatisch responsive breakpoints
  • Typescales: definieert automatisch juiste formaten voor je lettertype
  • Contentreel: Ontwerp lay-outs efficiënter door tekststrings, afbeeldingen en pictogrammen uit één palet te halen.
  • Mapsicle: Met Mapsicle plaats je snel en naadloos kaarten in mockups.

Een perfecte fit voor Atomic Design, een tool die samenwerken vooropzet en een quasi bodemloze bron aan plug-ins maakt Figma de favoriete tool van Robin. Eentje die hij ook voor jouw UX-trajecten inzet.

Geschreven door

  • Profielfoto Robin 08125 Final
    Robin SchaessensUX/UI DESIGNER

Share this post

Wil jij meer weten over UX-design of schakel je graag onze hulp in? Neem contact met ons op!