Designer insights: werken met Figma, een UX/UI ervaring
Figma, het is een naam die niet onbekend is in de UI/UX wereld. Sterker nog, met het (op termijn) verdwijnen van concurrent XD van Adobe heeft FIgma vrijwel een monopoliepositie in handen op deze markt. Het goed beheersen van dit programma wordt dan ook steeds belangrijker in de grafische wereld.
Ik heb het genoegen gehad om enkele Figma opleidingen te mogen volgen en, ook al was ik er daarvoor niet onvertrouwd mee, heb ik er mijn kennis toch echt wel gevoelig mee kunnen uitbreiden. Hoe meer ik van dit programma te weten kom, hoe meer ik ook begin te begrijpen waarom Figma het uiteindelijk gehaald heeft van zijn tegenstrevers. Zo zijn er een aantal gevorderde functies waarmee Figma erbovenuit springt. Tegelijkertijd heb ik ook geleerd wat er beter vermeden wordt.
In deze blog deel ik, Roel, UX/UI designer bij MediaComm, graag mijn ervaring.
Wat ik als designer niet wist over Figma
Figma heeft heel wat meer mogelijkheden dan ik initieel dacht. Voordat ik aan deze opleiding(en) begon had ik nooit gedacht dat het quasi helemaal mogelijk is om een functionerende webapplicatie/website te imiteren. Component variations zijn daar het centraal gegeven in.
De meesten onder ons die al eens met een grafisch programma gewerkt hebben zijn, denk ik, wel vertrouwd met het concept van ‘Components’, een element binnen jouw design dat een ‘master’ versie heeft en, wanneer gebruikt op verschillende plaatsen, mee verandert wanneer die master aangepast wordt. Figma gaat hier een stap verder in en kent ‘Component variations’, hiermee kan je dus, zoals de naam het zegt, variaties van hetzelfde component gaan toevoegen. Een duidelijke use case hiervoor is bijvoorbeeld een hover state.
Het bovenstaande voorbeeld is relatief simpel, maar dit kan ver gaan, zo kan je iconen in die knop gaan tonen/verbergen via een variabele (Wil je dat de knop een pijltje, kruisje of helemaal geen icoon heeft, het kan!). Ook een schaal variatie is mogelijk zodat je hetzelfde component/knop in twee formaten hebt die je dan on the spot kan wijzigen, dit allemaal zodat je het maximum uit één enkel component kan halen.
Andere use cases houden in: carousels, sliders, dropdowns, accordions, etc… Een andere troef is auto layout wat ervoor zorgt dat je heel gestructureerd kan werken. Deze functie kan gebruikt worden om bijvoorbeeld de breedte van knoppen af te stemmen op de lengte van de tekst die erin staat of het volledige artboard binnen een bepaalde marge kan houden. Als je iemand bent die vertrouwd is met CSS, en dan specifiek CSS flexbox, dan is dit zeker iets dat vertrouwd gaat aanvoelen aangezien dit min of meer hetzelfde principe volgt.
Misschien ook even een extra highlight: Er is ook een optie om auto layout te negeren voor bepaalde objecten. Dit is vooral zeer handig omdat vlot dingen kunnen positioneren op je artboard echt wel een must is en in het verleden heb ik al veel meegemaakt dat de strikte natuur van auto layout soms ook in de weg kan komen te zitten. Deze kleine, maar toch handige optie bespaarde me al veel frustraties sinds. Extra dank aan de lesgeefster die me dit bijbracht.
Zijn deze dingen uniek aan Figma
Wat Figma écht oplost: de communicatiekloof tussen designer en klant
Waarom zijn die verregaande functies en flexibiliteit zo van belang? De vraag die hier bij gesteld kan worden is: waar gaat het meestal verkeerd in een samenwerking? Communicatie, of toch onvoldoende/onvolledige communicatie. Als designers communiceren we niet alleen met ons werk naar consumenten toe, (de essentie van wat we uiteindelijk doen) dat doen we ook naar onze klanten toe. De mogelijkheden van Figma en wat ik in de opleiding(en) geleerd heb, maken die designer – klant communicatie veel efficiënter. Omdat er minder aan puur ‘verbeelding’ overgelaten wordt, kunnen intenties beter gecommuniceerd worden en heeft de klant een completer beeld van het ontwerp. Zo zijn de verwachtingen beter op elkaar afgestemd.
Met de opleiding(en) die ik gevolgd heb, heb ik mijn UI/UX vaardigheden enorm vergroot en ben ik ervan overtuigd dat ik nu heel wat meer kwaliteit kan leveren dan voordien. Er is veel minder een situatie waar de klant zich moet ‘voorstellen’ of ‘inbeelden’ van hoe iets eruit gaat zien of hoe iets zou werken dankzij deze geavanceerde functies.
Mijn kritische blik op Figma
