Nieuwe AI-tools in Figma - zijn designers nog ‘T-shaped’?.

T-shaped designers: startpunt in de industrie

T-shaped designers zijn designers die van veel verschillende taken of disciplines een beetje kunnen, en in één ding gespecialiseerd zijn. Dit is vaak het geval als iemand begint met diens carrière als designer. Naarmate de designer meer ervaring krijgt zal de skillset zich organisch uitbreiden, afhankelijk van de werkzaamheden en persoonlijke inzet van het individu.

T-shape: “ik kan veel dingen prima, en één discipline echt goed.”

Er zijn ook andere ‘shapes’ bekend, zoals de I-shape (“ik ben goed in 1 ding”), maar de T-shape is het bekendste voorbeeld, dat we verder zullen bespreken aan de hand van de nieuwe AI-tools. Wat doen deze nieuwe tools met de vorm van dit diagram? Eerst lopen we door wat van de functionaliteiten heen, om vervolgens een oordeel op te kunnen stellen.

Nieuwe Figma-functionaliteiten

Voorbeelden van nieuwe functionaliteiten zijn de Figma Design Agent en toevoegingen aan Figma Make. Daarnaast is er een aantal indrukwekkende Figma Weave-tools toegevoegd, die kunnen helpen met het genereren van mockups en andere visuele content. Figma’s Design Agent kan je in het ontwerpcanvas helpen met allerlei taken; van het genereren van varianten voor een ontwerp, tot het maken van animaties en het geven van feedback vanuit een bepaalde rol - en tijdens de ‘denktijd’ kan je rustig met andere taken aan de slag. Bij Figma Make, de (visuele) vibecode-omgeving van Figma, zijn juist ‘normale’ design editing tools toegevoegd, wat kan helpen met het besparen van AI-credits.

Figma Design Agent

De Design Agent kan context uit verschillende (externe of interne) bronnen meenemen bij (bijvoorbeeld) het genereren van schermen; denk aan een PRD-document met belangrijke achtergrondinformatie over het project, de doelgroep en het doel van het product. Ook kan je de agent feedback laten geven of aanpassingen laten doen vanuit een persona; bijvoorbeeld vanuit de rol van een (fictieve) stakeholder. Dit kan helpen om blinde vlekken duidelijk te maken, maar het vervangt gedegen gebruikersonderzoek niet.

Wat betreft UX Research is het sowieso de vraag in hoeverre AI hier een vervanging kan zijn. Online prototyping tools met bijbehorende taken en enquêtes bestaan al langere tijd, en kunnen met AI mogelijk nog slimmer worden. Maar stel; je moet usability tests van een nieuwe app afnemen met een doelgroep met een gemiddelde leeftijd van 80 jaar - zou je die ook een online tool laten gebruiken om dat te doen? UX Research gaat om menselijk onderzoek, en vereist specialistische kennis. AI kan echter wel ondersteunend zijn bij routinetaken (transcriberen van interviews, inzichten samenvatten) of bij het bedenken van interviewvragen voor een specifieke doelgroep.

De Design Agent kan ook helpen met het maken van eigen plugins en shaders voor op maat gemaakte visuals, en bij taken zoals het vervangen van content of het hernoemen van layers in het bestand. Dit soort taken zijn een goede aanvulling op het werk van designers, omdat het ofwel over routinetaken gaat of over zaken die vaak te technisch zijn voor veel designers. 

Uiteindelijk zijn de prompts en achtergrondinformatie voor de prompts het best als er strategisch wordt nagedacht vanuit degene die de prompts opstelt. In hoeverre wordt er echt rekening gehouden met de doelgroep? Wie keurt goed of een ‘vibe design’ goed in elkaar zit? In die zin heeft de nieuwe manier van werken ook wat weg van art direction/projectleiding.

Figma Weave: visuals genereren en aanpassen

Figma Weave (voorheen ‘Weavy’) is een bedrijf gespecialiseerd in visuele generatieve AI en ‘artistic intelligence’ dat is overgenomen door Figma en met de laatste updates een plek in Figma’s designprogramma heeft gekregen. Er zijn verschillende Weave-tools toegevoegd, waarmee je verschillende visuele uitingen kan genereren. Zo kun je de textuur van een object veranderen en mockups en digitale fotoshoots genereren. Ook kan je de belichting van foto’s veranderen en achtergronden van afbeeldingen vervangen. Met text prompts kan je daarnaast vector-illustraties of beelden in een bepaalde art style (zoals Art Nouveau) genereren.

Verander makkelijk de textuur van een beeld.

De Weave-tools zijn erg handig als je snel een beeld wil genereren of als je niet met Photoshop-mockups wil of kan werken. Je kan de stijl van bestaande afbeeldingen aanpassen zodat ze beter bij een dark mode-instelling van je ontwerp passen. Als een visual bijna perfect is maar niet helemaal, is het desondanks nog steeds handig om enige photoshop-skills (of skills voor een vergelijkbaar programma) te hebben; als je naast prompten ook handmatig beelden weet te bewerken tot ze 'kloppen', heb je nu nog een klein stapje voor. Want uiteindelijk gaat het ook bij dit soort uitingen om een stukje art direction en intentioneel zijn met de keuzes in visuele uitingen; als je weet wat je wil, weet je ook wanneer het af is, en ga je niet te snel akkoord met een eerste versie die AI voor je heeft gegenereerd.

Pas de belichting van een foto aan met Figma Weave.

Figma motion

Figma had tot voor kort vrij beperkte opties voor het instellen van animaties. Je had een paar basis-opties voor animatiestijlen, waarbij je de duur van de animatie en de easing kon instellen. De introductie van Figma Motion heeft daar verandering in gebracht. Je hebt meer controle over de animatie en kan per geanimeerde onderdeel de sub-onderdelen met meer precisie animeren. De Design Agent werkt hier ook in mee; je kan simpelweg aan de agent vragen of deze een animatie toe wil voegen. Deze kan je vervolgens naar wens aanpassen. Het opzetten van een animatie is hiermee erg versneld, en animaties toevoegen aan een ontwerp is toegankelijker geworden dan ooit.

Met een simpel prompt kan je een animatie toevoegen. De Figma Agent heeft hierbij geen andere animatie toegevoegd voor de verschillende ‘materialen’ van de logo’s - dit had misschien duidelijker in het prompt moeten zijn opgenomen.

De animatie.

Het instellen van deze animatie duurde met de design agent + figma motion slechts 1 minuut en 3 seconden.

Figma Make

Figma Make bestaat al langere tijd en wordt steeds verder uitgebreid. Met een simpele prompt en eventuele bijgevoegde documenten, designs of make kits, zet de tool snel een werkend interface in elkaar. Dit gaat niet meer om een simpel prototype, maar om een interface dat echt uit code is opgebouwd. Zoals bij andere AI-tools is de output het best als je een duidelijke prompt schrijft en de juiste context toevoegt (voor meer tips voor het schrijven van prompts, zie deze pagina van Figma). Figma Make stelt ontwerpers in staat om realistischere prototypes te maken, wat zeer waardevol kan zijn in een onderzoeks- of testfase. Daarnaast maken vibecoding-tools zoals Figma Make programmeren toegankelijker voor mensen zonder development-achtergrond, en dus ook voor designers. Figma Make maakt het nu ook mogelijk om onderdelen visueel aan te passen. Door dit soort keuzes lijkt de barrière tussen design en code steeds verder te vervagen.

Figma Make-designs zien er het beste uit als je het zelf hebt opgebouwd of genoeg instructies, context of een make kit toevoegt. Veel AI-gegenereerd ontwerp ziet er netjes, maar eentonig uit, dus het is ook hierbij belangrijk om een duidelijk beeld voor je te zien van waar het ontwerp aan moet voldoen. Blijf dus ook bij deze tool de regie houden en zorg ervoor dat het aansluit bij de voorwaardes van het project - of dat nou gaat om gebruikersbehoeftes of business goals. Ga niet voor de eerste de beste versie van een Figma Make-design; het beste ontwerp ontstaat iteratief.

Met Figma Make maak je met prompts apps en websites. Aan de rechterkant zie je de visuele editor. Het duurde 2 minuten en 38 seconden om deze eerste versie van een losse webpagina te genereren. Het ontwerp bevat verschillende slordigheden en onderdelen waar niet om is gevraagd, waardoor deze eerste versie zeker niet gelijk de beste is, maar het vormt een prima startpunt.

Conclusie

Voor UX-designers betekenen de nieuwe AI-functies vooral het volgende:

Ik benoem hier expres ‘laten’ bij elk punt, en dat komt door het volgende. Uiteindelijk is veel het formuleren van de juiste prompts. Designers kunnen door AI niet opeens 3D video-editor in de klassieke zin worden met enkel een aantal woorden. Het aanpassen van gegenereerde content kan alsnog te technisch zijn of veel prompts vereisen (wat ook geld kost). Dit creëert een afhankelijkheid op AI en de bijbehorende business-modellen, maar verhoogt voor nu de basisproductiviteit voor een breder scala aan vaardigheden. AI kan helpen met het opstellen van een gebruikersonderzoek, maar een doorgewinterde UX Researcher zal meer ervaring en kennis hebben over of dit plan goed aansluit bij de probleemstelling en hoe dit het best uitgevoerd kan worden. Wel is AI erg handig bij het transcriberen van interviews en het clusteren en samenvatten van onderzoeksbevindingen. Ook dit kan uiteindelijk de productiviteit verhogen, als het slim (en ethisch) ingezet wordt. Uiteindelijk blijven specialisten waardevol, of het nou om het beoordelen van AI-output gaat of om het werk dat beter handmatig kan worden verricht. De vaker genoemde human in the loop-richtlijn is hierdoor nog geen verleden tijd.

Deze AI-functionaliteiten zorgen er dus voor dat designers meer verschillende soorten output kunnen leveren. De diepere kennis ontbreekt echter vaak nog; het prompten van een animatie is wat anders dan het handmatig in kunnen stellen en snappen hoe alle onderdelen werken. Deze afhankelijkheid maakt deze nieuwe mogelijkheden relatief fragiel; wat gebeurt er als AI te duur wordt of wegvalt? 

Voor nu verbreedt het aantal types werk dat kan worden gedaan en de output van veel types werk wordt uitgebreider. Hierdoor gaat de klassieke T-shape meer op een soort kam lijken. Een kam, waarbij niet alle tanden even lang zijn, en de ‘originele’ tand uit de T-shape het meest robuust is; dat is waar de echte kennis zit. Je zou zelfs kunnen stellen dat het geen kam-vorm is en dat er in essentie eigenlijk maar twee skills bij zijn gekomen; goede prompts schrijven voor AI-tools, en werk regisseren. 

Designers kunnen meer verschillende soorten output leveren en betere/meer output leveren per onderdeel. 

Figma’s AI-tools voelen een beetje als een geest in de fles waar je je wens aan uit kan leggen; ook zonder dat je begrijpt wat er achter de schermen gebeurt, worden je wensen in vervulling gebracht.

Uiteindelijk verschilt de precieze vorm van het diagram per individuele ontwerper; iedereen heeft diens eigen unieke skillset. Als je al een beetje kon programmeren, maakt AI dat nu nog makkelijker. En als je nog nooit met motion design-tools hebt gewerkt, is het prompten van animaties meer een soort 'geest in de fles’-gevoel, totdat je zelf meer leert over hoe het werkt. Voor nu wordt er in ieder geval steeds meer verwacht van ontwerpers, omdat er ook steeds meer kan. Maar in de kern blijft de realiteit bestaan dat de achtergrondkennis, ontwerpvaardigheden, art direction en smaak van designers - de human in the loop-eigenschappen  - onmisbaar zijn als je echt kwalitatief hoogstaande producten wil ontwikkelen.

De tekst uit dit artikel is zonder AI geschreven ;).