Figma Motion Tutorial: Everything You Need to Know

Figma Motion: En Introduktion til Grundlæggende Animationer

Kom godt i gang med Figma Motion

• Figma motion blev annonceret ved Config 2026, og introduktionen viser, hvordan man nemt kan bruge det.

• For at få adgang til Figma motion skal du åbne et nyt designfil og klikke på "motion" nederst for at åbne tidslinjen.

• Der er en animationssektion i designpanelet, hvor du kan tilføje animationer som position, skala, rotation osv.

Tilføjelse af Animationer

• Du kan hurtigt tilføje animationer ved at vælge en egenskab og trykke på mellemrumstasten for at se effekten.

• Tidslinjen viser nuværende tid og total varighed; looping muligheder inkluderer "play only once" eller "ping-pong".

Avancerede Animationsteknikker

• Det er muligt at kombinere flere animationer; f.eks. kan du tilføje rotation ovenpå en bevægelse.

• Keyframing giver mulighed for præcise animationsovergang fra punkt A til B, hvilket gør det lettere at skabe komplekse bevægelser.

Skabelse af Manuelle Animationer

• Eksempler på manuelle animationer inkluderer ændring af baggrund farve fra dagtil nat samt flytte objekter over skærmen.

• Bezier-kurver kan bruges til at give mere livlige og dynamiske bevægelser i animationerne.

Automatisering med Auto Keyframing

• Auto keyframing muliggør automatisk oprettelse af keyframes baseret på ændringer foretaget i elementerne.

Anvendelse af Path Trimming

• Path trimming tillader animering af stier; start med 0% synlighed og afslut med 100% for en glidende effekt.

Brug af Agenter til Animation

• Agenter kan hjælpe med at generere komplekse animationer ud fra simple kommandoer, hvilket sparer tid og kræfter.

Nesting Af Animationer i Komponenter

• Det er muligt at nestle motion-animation indenfor komponenter for bedre organisering og genbrugbarhed.

Eksportmuligheder for Animerede Elementer

• Animerede elementer kan eksporteres som MP4, WebM eller GIF via den nye eksportfunktionalitet i Figma.