Figma, de samenwerkingstool voor UX/UI-ontwerp

In september 2022 kondigde Adobe de overname aan van Figma, uitgever van een webapplicatie die concurreert met Adobe XD… voordat hij van koers veranderde. Tegenwoordig heeft Figma zichzelf gevestigd als het vlaggenschip voor het ontwerpen van digitale interfaces. Gaande van het ontwerp van een eenvoudig wireframe om een idee te testen tot de creatie van een interactief prototype dat precies lijkt op de definitieve versie van een product, is de plaats in de harten van ontwerpers alleen maar gegroeid. Dus hoe en waarom heeft Figma zo'n plaats voor zichzelf veroverd op de competitieve markt voor ontwerptools? Uitleg met Florent Bachelier, UX designer.

Figma is een professionele tool die oorspronkelijk bedoeld was voor interface-ontwerpers (UX-ontwerper). Het heeft verschillende versies, afhankelijk van de behoeften: een gratis versie en drie betaalde versies: een “Professionele” versie, een “Organisatie” versie en een op maat gemaakte “Business” versie.

Je hebt gratis toegang tot Figma en kunt zo de overgrote meerderheid van deze functies verkennen. Als je het professioneel wilt gebruiken, zul je uiteraard moeten upgraden naar een betaalde versie. De initiële prijs van Figma Professional is 12 euro per maand voor een uitgever.

Dat gezegd hebbende, trekt een aantal functies ontwerpprofessionals naar Figma, zoals: het gemak van realtime samenwerking, de mogelijkheid om uitgebreide interactieve prototypes te maken en zelfs integratie met andere populaire tools.

Het samenwerkingsaspect, de sleutel tot de gebruikersgerichte aanpak

De applicatie is cloudgebaseerd, waardoor u overal eenvoudig toegang heeft tot alle werkdocumenten. Figma is toegankelijk via webbrowsers, op alle grote besturingssystemen. De grote kracht van Figma ligt allereerst in een effectief samenwerkingsniveau.

Werk in realtime samen

Door in realtime samen te werken en te communiceren, kunnen projectbelanghebbenden efficiënter worden. Figma heeft deze samenwerking altijd graag willen stimuleren. Het instrument mag geen belemmering vormen, integendeel.

“Figma maakt het gemakkelijk voor teams om samen te werken, waar ze zich ook bevinden. »

De tool stuwt deze samenwerking steeds verder. Dit blijkt bijvoorbeeld uit de recente integratie van een interface speciaal voor ontwikkelaars.

Figma integreert ook een collaboratief whiteboard (Figjam) waarmee u workshops, vergaderingen kunt houden of informatie over gebruikers kunt verzamelen.

“We delen alles in één tool. »

Deze effectieve samenwerking vloeit ook voort uit de mogelijkheid om eenvoudig werk te delen, live commentaar en wijzigingen aan te brengen en een gemeenschappelijke taal (CSS) te gebruiken. Of om veel mensen aan hetzelfde bestand te laten werken zonder bugs of deelnamebeperkingen.

Integreer andere samenwerkingstools in Figma

Figma biedt de mogelijkheid om andere ontwerp-, projectmanagement- en ontwikkelingstools te integreren, zoals Schetsen, Adobe XD, Jira, Slack, Photoshoppen of zelfs Illustrator. Er is een zeer goede communicatie tussen de Adobe-suite en Figma. Bijvoorbeeld: het is mogelijk om Adobe XD-bestanden te kopiëren en in Figma te plakken.

Met een aantal plug-ins kunt u deze ontwerpen verbeteren of bronnen gebruiken die door andere ontwerpers beschikbaar zijn gesteld.

Tenslotte is het mogelijk om al deze werken te exporteren. Het vectorformaat dat door de tool wordt mogelijk gemaakt, maakt het interoperabel.

Een gebruikersgerichte aanpak

Het andere sterke punt van Figma ligt in de gebruikersgerichte aanpak, die erg belangrijk is voor ontwerpers. Het Figma-team vraagt de community om feedback, luistert en test functies. Hierdoor kan het een hoge snelheid hebben en de ontwerperervaring bij elke update verbeteren.

Complexiteit verborgen in eenvoud

De interfacestructuur is gemakkelijk te begrijpen. Op het eerste gezicht is het gebruik van Figma vrij eenvoudig.

De essentiële kenmerken van Figma 

Met Figma kunt u modellen maken, in realtime samenwerken en opmerkingen en annotaties maken. Maar ook om bibliotheken met kant-en-klare componenten te gebruiken of om vanaf het begin een ontwerpsysteem te creëren. Gebruikers kunnen ook interactieve prototypes maken, wat de onderdompeling verbetert en gebruikerstesten mogelijk maakt.

Essentiële kenmerken

Geavanceerde functies

Figma brengt de meest gebruikte ontwerpparameters op de voorgrond. Maar we kunnen altijd dieper ingaan op de granulariteit van de parameters. Dit is bijvoorbeeld het geval bij aspecten bewegingsontwerp interacties of details van een typografie (de basislijn).

Voorbeeld: een nieuwe geavanceerde prototyping-functie

Met variabelen kunt u complexe prototypes maken.

Meiso: geavanceerde prototypingmogelijkheden

Voorbeeld: gebruik van Figma voor gebruikerstests (nieuwe functionaliteit).

Er zijn dus geen grote problemen bij het gebruik van Figma, omdat de mate van complexiteit afhangt van de behoeften van de gebruiker. Het is niet nodig om complexe functies te gebruiken als eerste stap om een low-fidelity mock-up te maken en een concept te testen.

Een aanbod aangepast en attent op zijn gebruikers

Figma staat heel dicht bij zijn gebruikers. Het hele jaar door worden er regelmatig kleine wijzigingen in de software aangebracht. Nog een voordeel: gebruikers worden ondersteund tijdens deze jaarlijkse updates, die bovendien erg snel zijn.

“De redacteuren van Figma hebben een continue verbeteringsaanpak gehanteerd. »

Voorbeeld: Met de nieuwste update kunnen gebruikers in de Typografieverkenner over typografieën bewegen om direct op hun werk te zien hoe ze eruitzien. Het was een tekortkoming die was verholpen.

Op deze manier worden Figma-gebruikers betrokken en dragen ze bij aan het continue verbeteringsproces. Uitgevers, die naar hun gebruikers luisteren, vragen hen regelmatig om feedback. De gebruikerservaring is hierdoor optimaal.

Op Figma vormen gebruikers een actieve community.

Opmerking over de beveiligingskant: er is een instelling voor het maken van wachtwoorden, zelfs bij de professionele versie.

De gebruikerservaring van Florent Bachelier

Hoe ik Figma gebruik 

L'ontwerp van gebruikerservaring (UX) overheerst in mijn vak, ten koste vangebruikersinterfaceontwerp (UI). De basis is eerder informatiearchitectuur. Ik gebruik daarom eerst de functionaliteiten waarmee ik low-fidelity-modellen kan maken (kleuren in grijstinten, hiërarchie van typografieën, basisinteracties) voordat ik verder ga in het ontwerpproces (meer geavanceerde gebruikersinterface, prototypes).

Mijn tips voor het optimaliseren van interactief ontwerp

Ik gebruik drie soorten pagina's in een Figma-bestand (gratis):

• Modellenpagina;
• Componentenpagina;
• Pictogram Bibliothekenpagina.

U moet altijd een duidelijk onderscheid maken tussen mastercomponenten en gebruikte componenten (bijvoorbeeld: instances). Ik maak een batch componenten of ik gebruik een reeds gemaakte batch. Het doel is om de elementen zoveel mogelijk in factoren te verwerken om langdurig aanpassingswerk te voorkomen. Het idee is ook om de werklogica van ontwikkelaars te gebruiken om barrières te verminderen en samenwerking te bevorderen.

Ik produceer mijn ontwerpen alleen in automatische lay-out. Met deze lay-outfunctie kunnen elementen automatisch worden verplaatst en van grootte worden veranderd. Het werk is rigoureuzer, maar het ontwerp is harmonischer en vooral gemakkelijker over te zetten naar productie.

Mijn advies voor nieuwe gebruikers om Figma volledig te benutten in hun ontwerpwerk

• Geef de voorkeur aan eenvoudige functionaliteiten om te beginnen met modelleren. 
• Soms is het beste de vijand van het goede: open jezelf voor verschillende methoden om creativiteit te stimuleren.
• Wees strikt vanuit het oogpunt van afstand (marges). Gebruik richtlijnen die al bestaan. Gebruik bijvoorbeeld een veelvoud van 4 voor de afstand en zorg dus altijd voor een afstand van 8 pixels tussen afbeelding en tekst.
• Gebruik waar mogelijk automatische lay-out wanneer mockups dienen als specificaties voor ontwikkelaars.

Figma vertegenwoordigt een essentieel hulpmiddel voor het ontwerpen van digitale interfaces dankzij de talrijke functies, het principe van realtime samenwerking en de gebruikersgerichte aanpak, waarbij een actieve gemeenschap wordt betrokken bij het continue verbeteringsproces. Figma biedt een flexibel en collaboratief platform dat voortdurend evolueert om te voldoen aan de verwachtingen van ontwerpers en professionals op het gebied van digitale interface-ontwerp.