• oktober 5, 2026
• Brian

Beweging in een ontwerp was lang iets voor de specialist met een apart animatieprogramma. Figma probeert daar al een paar maanden verandering in te brengen met Figma Motion, en op 30 september kwam er een flinke update bij. Animaties kun je nu opslaan als herbruikbare stijlen, je kunt audio onder je keyframes leggen, tekst per letter of woord laten bewegen en het resultaat exporteren als Lottie-bestand. Wat betekent dat voor merken, ontwerpers en websites?

Eerst even terug: wat is Figma Motion?

Figma introduceerde Motion op 24 juni 2026 tijdens Config, de jaarlijkse conferentie van het bedrijf. Zet je een frame in de Motion-modus, dan verschijnt er een tijdlijn onder je ontwerp. Daarop stel je keyframes in voor positie, schaal, rotatie en transparantie, of je begint met kant-en-klare animaties zoals fade, move en scale. Componenten kunnen hun animatie meenemen naar elk scherm, en met variabelen voor easing en timing pas je in één keer alle animaties in een bestand aan.

Ook de overdracht naar ontwikkelaars is meegenomen. In Dev Mode is de volledige tijdlijn te bekijken en kan een developer animatiecode kopiëren als CSS, JSON of React met motion.dev. Volgens het helpcentrum van Figma is Motion beschikbaar op elk abonnement voor iedereen met bewerkrechten op een bestand, al is de export op het gratis Starter-plan beperkt en zitten de volledige koppeling met je design system en de Figma-agent voor animatie alleen in betaalde plannen. Belangrijk om te weten: Motion is nog steeds een open bèta.

Wat is er nieuw sinds 30 september?

De update van eind september draait om herbruikbaarheid en om animaties die ook buiten Figma bruikbaar zijn. De belangrijkste vernieuwingen volgens de release notes:

1. Eigen animatiestijlen. Je bewaart een animatie met een eigen easing, duur en andere instellingen als stijl en past die overal toe. Stijlen kun je combineren tot één patroon en publiceren in je bibliotheek, zodat elk bestand uit dezelfde set put.
2. Audio op de tijdlijn. Sleep een audiobestand op een clip of de tijdlijn, en knip, splits en verschuif het tot de timing klopt. Bij export als MP4 of WebM gaat het geluid mee.
3. Tekstanimatie. Animeer losse letters, woorden of regels binnen een tekstlaag. De tekst blijft daarna gewoon bewerkbaar.
4. Export naar Lottie en dotLottie. Ondersteunde animaties kun je opslaan als Lottie-bestand, een formaat dat veel gebruikt wordt voor lichte, schaalbare animaties op websites en in apps.

Figma noemt daarnaast dat animatiestijlen ook automatisch kunnen worden toegepast door de Figma-agent en door codeerassistenten. Voor de meeste teams is het grotere nieuws echter simpelweg dat beweging nu net zo netjes te beheren is als kleur en typografie. Houd er rekening mee dat functies gefaseerd uitrollen: op het moment van schrijven staat audio in het helpcentrum nog als “binnenkort” vermeld.

Waarom dit interessant is voor je merk

Een huisstijl gaat allang niet meer alleen over logo, kleuren en lettertype. Hoe een knop reageert, hoe een menu openschuift en hoe een logo in beeld komt, zegt ook iets over een merk. Rustig en zorgvuldig, of juist speels en snel. Tot nu toe werd die beweging vaak per project opnieuw bedacht.

Met animatiestijlen in een gedeelde bibliotheek kun je beweging vastleggen zoals je dat ook met een kleurenpalet doet. Eén keer bepalen hoe snel en met welke curve elementen bewegen, en daarna overal hetzelfde gebruiken. Dat maakt een merk herkenbaarder, ook online.

Praktische tips voor ontwerpers en opdrachtgevers

• Maak een kleine bewegingsset. Begin met een handvol stijlen, bijvoorbeeld voor verschijnen, verdwijnen en een hover-effect. Geef ze namen op basis van hun functie, niet op basis van hoe ze eruitzien.
• Test Lottie-exports altijd. Niet alles vertaalt één op één. In de documentatie van LottieFiles over het exporteren van Figma Motion-animaties staat bijvoorbeeld dat positie, transparantie, formaat, hoekafronding en effen kleuren betrouwbaar meegaan, terwijl geanimeerde verlopen, achtergrondvervaging en shader-effecten niet behouden blijven. Controleer daarom de preview voordat een animatie op de website komt.
• Denk aan toegankelijkheid. Sommige bezoekers krijgen klachten van grote bewegingen op het scherm en zetten op hun apparaat de optie aan om beweging te beperken. Websites kunnen die voorkeur uitlezen via de CSS-mediaquery prefers-reduced-motion. Spreek af wat een animatie in dat geval doet, bijvoorbeeld een simpele fade in plaats van een zoom.
• Gebruik geluid met mate. Audio is handig voor social video’s en presentaties, maar op een website wil vrijwel niemand ongevraagd geluid horen. Laat het daar dus achterwege of maak het bewust aan te zetten.
• Bouw niet je hele werkwijze op een bèta. Motion is nog in ontwikkeling en functies kunnen veranderen. Leg de belangrijkste afspraken (snelheden, curves, wanneer je beweging inzet) daarom ook vast in je merkrichtlijnen, los van één tool.

Tot slot

Met deze update wordt beweging een volwaardig onderdeel van het ontwerpbestand in plaats van een losse eindklus. Dat is goed nieuws voor iedereen die wil dat een website, app of campagne als één geheel aanvoelt. De kunst blijft wel om beweging doelgericht in te zetten: subtiel waar het moet, opvallend waar het iets toevoegt. Wil je weten hoe animatie past bij jouw huisstijl of website? Dan denken we bij Anblick graag met je mee via onze contactpagina.

Bronnen: Figma Release Notes (30 september 2026), Figma Forum: Motion adds custom styles, audio, text animations and Lottie export, Figma Blog: Introducing Figma Motion, Figma Learn: Explore Figma Motion, LottieFiles Docs: Figma Motion export, MDN: prefers-reduced-motion.