Figma Motion, Figma'nın tasarım tuvaline eklediği zaman çizelgesi (timeline) tabanlı animasyon aracıdır; artık bir ekranı, butonu ya da sosyal medya görselini ayrı bir programa geçmeden aynı dosyada hareketlendirebiliyorsunuz. 30 Eylül 2026'da gelen güncellemeyle Motion; yeniden kullanılabilir animasyon stilleri, ses desteği, metin animasyonu ve Lottie dışa aktarımı kazandı. Bu da hareketli tasarımı, marka kimliğinin ölçeklenebilir bir parçası hâline getirme fırsatı demek.
2015'ten beri web, grafik ve video tasarımın içindeyim. Yıllar boyunca en çok yaşadığım sorunlardan biri şuydu: statik tasarım bir yerde, animasyon başka bir yerde, geliştiriciye giden versiyon ise bambaşka bir yerde yaşıyordu. Figma Motion'ı önemli bulmamın sebebi tam olarak bu kopukluğu azaltmaya aday olması. Bu yazıda neyin değiştiğini, nerede işe yaradığını ve bir markanın bugün nasıl başlayabileceğini anlatıyorum.
Figma Motion nedir ve ne zaman geldi?
Figma, Motion'ı 24 Haziran 2026'da Config etkinliğinde duyurdu. Bir çerçeveyi Motion moduna aldığınızda tasarımın yanında bir zaman çizelgesi açılıyor. Katmanları sürükleyerek zamanlamayı ayarlayabiliyor; konum, ölçek, döndürme ve opaklık için bağımsız keyframe'ler oluşturabiliyorsunuz. Oynatma çubuğu ilerlerken yaptığınız değişiklikleri otomatik keyframe olarak kaydeden bir mod da var.
Benim için asıl kritik nokta bileşenler: Bir bileşene eklediğiniz animasyon, o bileşenle birlikte dosyalar arasında taşınıyor. Yani bir butonun "basılma" hareketini bir kez tanımlıyorsunuz, o buton nerede kullanılıyorsa hareket de onunla geliyor. Easing gibi değerler için motion değişkenleri tanımlanabiliyor ve sayfa düzeyinde değiştirildiğinde bu değişkene bağlı tüm animasyonlar güncelleniyor.
Eylül güncellemesiyle ne değişti?
Haziran'daki ilk sürüm sağlam bir temeldi ama özel stiller "yakında" olarak duruyordu. 30 Eylül'de yayımlanan güncellemeyle Motion açık betada şu yetenekleri kazandı:
- Özel animasyon stilleri: Easing, süre ve değişkene bağlı diğer özellikleri bir stil olarak kaydedip tüm tasarımlarda kullanabiliyorsunuz. Stiller birleştirilip tek bir kalıp olarak saklanabiliyor ve kütüphanelere yayımlanabiliyor.
- Zaman çizelgesinde ses: Bir ses dosyasını doğrudan klibe sürükleyip kırpabiliyor, bölebiliyor ve keyframe'lere göre konumlandırabiliyorsunuz. Sesli dışa aktarım MP4 ve WebM ile sınırlı.
- Metin animasyonu: Bir metin katmanında karakter, kelime ya da satır bazında animasyon yapılabiliyor; metin animasyondan sonra da düzenlenebilir kalıyor.
- Lottie ve dotLottie dışa aktarımı: Desteklenen animasyonlar artık bu formatlarda dışa aktarılabiliyor.
Markalar için neden önemli?
Marka kimliği uzun süre logo, renk ve tipografiden ibaret düşünüldü. Bugün ise bir markanın nasıl "hareket ettiği" de kimliğin parçası: Bir uygulama açılırken, bir ürün kartı belirirken ya da bir Reels videosundaki başlık ekrana girerken aynı ritmi hissettirmek tutarlılık yaratıyor. Ajans tarafında büyük perakende ve lüks markalarla çalışırken gördüğüm şey, bu ritmin çoğu zaman yazılı bir kurala değil, birkaç kişinin hafızasına emanet edildiğiydi.
Animasyon stillerinin kütüphanelere yayımlanabilmesi bu durumu değiştirebilir. Renk ve yazı stillerinde yaptığımız gibi, hareketi de tanımlı, isimli ve paylaşılan bir sisteme dönüştürmek mümkün hâle geliyor. Bu, hem web ve uygulama arayüzleri hem de sosyal medya içerikleri için aynı hareket dilini kullanmayı kolaylaştırıyor.
Tasarımdan geliştiriciye teslim: daha az yorum farkı
Figma'nın duyurusuna göre Dev Mode'daki Motion sekmesi tüm zaman çizelgesini gösteriyor ve geliştiriciler animasyonu CSS, JSON, React ya da motion.dev kodu olarak kopyalayabiliyor. Statik görseller için MP4, GIF, SVG ve WebM dışa aktarımı da mevcut.
Lottie tarafında dikkatli olmak gerekiyor. LottieFiles'ın rehberine göre yaylar (spring), shader'lar, ses senkronu ve karmaşık maskeler temiz dönüşmeyebiliyor; bazı hareketleri elle yeniden kurmak gerekebiliyor. Benim önerim basit: İzlenecek içerikler (sosyal medya, sunum, demo) için video formatı, arayüzde çalışacak hafif animasyonlar için Lottie veya dotLottie. Dönüştürülen dosyayı mutlaka orijinaliyle karşılaştırın.
Hemen başlamak için pratik öneriler
- Önce küçük başlayın. Buton, sekme geçişi, bildirim gibi en çok kullanılan üç-dört bileşeni seçin ve onların hareketini tanımlayın.
- Bir "hareket sözlüğü" çıkarın. Hızlı, orta ve yavaş için üç süre; giriş, çıkış ve vurgu için birkaç easing belirleyin. Bunları animasyon stili olarak kaydedin.
- Hedefi baştan belirleyin. Animasyon izlenecek mi, sayfaya gömülecek mi, kullanıcı tarafından kontrol edilecek mi? Format seçimi buna göre yapılır.
- Erişilebilirliği unutmayın. Bazı kullanıcılar cihazlarında hareketi azaltma tercihini açıyor. Web'de prefers-reduced-motion medya sorgusuyla bu kişilere sade bir versiyon sunulabilir.
- Abonelik durumunuzu kontrol edin. Figma'ya göre Starter kullanıcıları sınırlı dışa aktarımla Motion'a erişebiliyor; tam tasarım sistemi entegrasyonu ve Motion için Figma agent ise yalnızca ücretli planlarda.
- Beta olduğunu hesaba katın. Kritik bir kampanyayı tamamen beta bir araca bağlamadan önce, iş akışınızı küçük bir projede test edin.
Sonuç
Figma Motion, After Effects gibi profesyonel video araçlarının yerini almıyor; footage ve kompozisyon gerektiren işlerde onlar hâlâ gerekli. Ama arayüz animasyonu, mikro etkileşimler ve hızlı sosyal medya içerikleri için tasarım ile hareketi aynı yerde toplaması, özellikle küçük ve orta ölçekli ekipler için ciddi bir zaman kazancı. Türkiye'de dijitalleşmeye yeni yatırım yapan markalar için de iyi bir an: Tasarım sistemini kurarken hareketi baştan dahil etmek, sonradan eklemekten çok daha kolay. Markanızın hareket dilini birlikte kurgulamak isterseniz bana sitedeki iletişim sayfasından ulaşabilirsiniz.
