Vorig jaar is Figma overgenomen door Adobe. Ik was zelf even bang dat deze langzaam uitgefaseerd zou worden en Adobe XD de volle focus zou krijgen. Maar gelukkig blijkt 9 maanden later het tegenovergestelde waar te zijn, want Figma is nog steeds ongekend populair onder UX Designers en blijft zich ontwikkelen. Op 21 en 22 juni was Config 2023, de jaarlijkse conferentie van het bedrijf. Tijdens deze conferenties werden nieuwe features vertoond die ervoor zorgen dat bedrijven moeten nadenken over het belang van een Design System. Wij waren erbij en er was een belangrijke feature die ik met je wil bespreken: Variables in Figma.
Met de introductie van Variables in Figma lijkt het bedrijf een nieuwe stap te zetten richting het waarborgen van design tokens. Ook developers worden het leven steeds makkelijker gemaakt met de introductie van Dev Mode. In dit blog vertel ik je wat je moet weten over het gebruik van Variables in Figma.
Variables in Figma: wat is het precies?
Met de toevoeging van de “Variables” functionaliteit wordt het leven van veel UX-Designers een stuk gemakkelijker gemaakt. Het zorgt er namelijk voor dat ontwerpers in staat zijn om consistentie te behouden in hun ontwerp binnen complexe (design)systemen. Waarden zoals kleuren, typografie en afmetingen kunnen als variabelen gedefinieerd worden. Met slechts één aanpassing kunnen direct alle elementen die aan deze variabelen gekoppeld zijn direct aangepast worden. Zo zorg je dat alle componenten ten alle tijden consistent en up-to-date zijn, óók voor developers.
Design System: van klein naar groot
Wanneer je werkt aan omvangrijke ontwerpprojecten is het slim om zo veel mogelijk stijlen en componenten gestructureerd uit te werken in een design system. In een design system leg je zoveel mogelijk kenmerken van je ontwerp vast: kleuren, lettertypes, grids, iconen. Zie het als een ontwerp bibliotheek. Met deze kenmerken creëer je vervolgens elementen waarvan je verwacht dat je ze veelvuldig gaat gebruiken. Denk daarbij aan buttons, formuliervelden en titels. Vanuit deze elementen maak je vervolgens componenten: een product tegel, een formulier. Wanneer je componenten samenvoegt tot bepaalde functionaliteiten ontstaat er een module. Bijvoorbeeld de header van een pagina of mobiele navigatie. Wanneer je deze modules samenvoegt heb je een template. Deze manier van werken wordt ook Atomic Design genoemd. Met de introductie van Variables in Figma speelt het bedrijf goed in op de wensen van de UX’er.
Meer over Design System lees je in dit blog.
Perfect voor de experimenteer-cultuur!
Het kost wat tijd om te investeren in een design system, maar zodra deze eenmaal staat, zorgt dit ervoor dat jij als UX-designer nog sneller iteraties kunt ontwikkelen voor verschillende A/B testen. Wil je verschillende knop-stijlen uitproberen? Maak een kopie van een variabele en pas deze aan. Heb je een winnende test? Voer de wijziging door in de variabele en deze wordt op elke plek toegepast. Developers zien de wijziging dan ook op elke plek terugkomen. Win-win, right?
Ready for development. Simpel, maar tóch effectief.
Het maken van ontwerpen gaat vaak niet over één nacht ijs. Er worden verschillende iteraties gemaakt en er ontstaan last-minute wijzigingen door nieuwe inzichten of wensen vanuit de business. Dit alles zorgt soms voor een rommelig proces, waarbij het risico ontstaat dat developers deze wijzigingen niet meer zien of mee krijgen. Óf, er staat nog een iteratie in het document wat niet meer de meest recente versie is.
Met Dev Mode is de samenwerking tussen Designer en Developer een stuk gemakkelijker geworden. Uiteraard zijn er meerdere wegen naar Rome en was het eerder ook mogelijk om bijvoorbeeld een nieuwe pagina aan te maken, maar met de introductie van deze nieuwe feature is het proces vele malen makkelijker geworden!
Een ontwerper geeft met 1 druk op de knop aan welke ontwerpen er “ready for dev” zijn. Deze ontwerpen worden gebundeld weergegeven om als developer terug te vinden en er ontstaat geen verwarring meer welke ontwerpen er ontwikkeld moeten worden. Mooie toevoeging; een developer ziet wanneer het design voor het laatste is aangepast, en kan vanuit versiebeheer zien welke wijzigingen er aangebracht zijn! Samenwerken was nog nooit zó gemakkelijk..
… Even tussendoor: we sturen elke drie weken een nieuwsbrief met daarin de laatste blogs, teamupdates en natuurlijk nieuws over het aanbod in onze academy. Klik hier om je in te schrijven.
Wil je meer weten over hoe je deze nieuwe ontwikkelingen in kunt zetten in jouw organisatie?
Onze UX-designers en developers denken graag met je mee. Heb je vragen over Figma of wil je weten hoe je systematisch te werk kunt gaan binnen jouw project? Neem dan contact met ons op. Op de hoogte blijven van onze laatste blogs, events of nieuws? Schrijf je dan in voor onze 3-wekelijkse nieuwsbrief. Hierin delen we de hoogtepunten van ons bedrijf, maar ook relevante inzichten uit het vakgebied, interessante vacatures uit ons netwerk en natuurlijk ook de laatste berichten op het gebied van UX en CRO-design.
