Figma Motion 2026: Timeline, Keyframe ve Teslim

Figma Motion’ın Haziran 2026 açık beta özelliklerini, plan ve koltuk sınırlamalarını, export seçeneklerini ve ekip içi motion sistemi kurmayı anlatan güncel rehber.

Figma Motion timeline, keyframe ve geliştirici teslimi rehberi

Figma, 24 Haziran 2026’daki Config duyurularıyla Motion’ı tasarım dosyalarının içine taşıdı. Yeni alan, statik ekranlar ile üretime hazır animasyon tarifleri arasındaki kopukluğu azaltmayı hedefliyor. Ancak “Figma artık her animasyonu otomatik yapıyor” demek doğru değil: özellik açık beta aşamasında, bazı yetenekler koltuk ve plan koşullarına bağlı, ayrıca geliştirici doğrulaması hâlâ gerekli.

Figma Motion tam olarak ne sunuyor?

Figma’nın resmi yardım sayfasına göre Motion, tasarım dosyasında timeline üzerinden animasyon oluşturmayı sağlıyor. Hazır animasyonlarla hızlı başlangıç yapılabilir veya keyframe’ler kullanılarak sıfırdan hareket kurulabilir. Easing eğrileri ve spring animasyonlarıyla zamanlama hissi ayarlanabilir. Amaç yalnızca tanıtım videosu çıkarmak değil; tekrar kullanılabilir motion kararlarını tasarım sisteminin parçası haline getirmektir.

Figma agent’a istenen hareket tarif edilerek timeline üzerinde ilk keyframe geçişi üretilebilir. Bu sonuç final kabul edilmemeli; süre, vurgu, okunabilirlik ve platform davranışı manuel olarak incelenmelidir. Agent ile üretim bir başlangıç hızlandırıcısıdır, hareketin iletişim amacını belirleyen yaratıcı kararın yerine geçmez.

Kimler erişebiliyor ve sınırlar neler?

Resmi Config 2026 yardım belgesinde Figma Motion’ın 24 Haziran 2026’dan itibaren kademeli dağıtıldığı ve tüm planlarda açık beta olduğu belirtiliyor. Bir tasarım dosyasında Motion’a geçmek için dosyada düzenleme yetkisi gerekir. Belgedeki “all plans” ifadesi özelliğin genel beta erişimini anlatırken, bazı gelişmiş işlemler ayrıca sınırlandırılmıştır.

Animated component yayınlama, Figma agent ile animasyon üretme ve yüksek çözünürlüklü video export işlemleri ücretli planda Full seat gerektirir. Figma for Government planlarında Motion bulunmaz. Bu ayrımlar proje planına yazılmalıdır; ekipte bir kişinin gördüğü export veya yayınlama seçeneğinin bütün kullanıcılar için açık olduğu varsayılmamalıdır.

Timeline ve keyframe ile karar vermek

Timeline, nesnenin yalnızca başlangıç ve bitiş halini değil aradaki ritmi görünür kılar. Opacity, position, scale veya diğer desteklenen özellikler zaman içinde düzenlenebilir. Keyframe sayısını artırmak her zaman daha iyi hareket üretmez. Az ve niyetli anahtar kare, geliştiriciye daha okunur bir davranış aktarabilir.

Her hareket için üç soru sorulmalıdır: Kullanıcının dikkatini nereye taşıyor? Arayüzde neyin değiştiğini açıklıyor mu? İşlemi gereksiz yere geciktiriyor mu? Bir menünün açılışında yön ilişkisi kurmak anlamlıdır; form kaydı sonrasında uzun bir gösteri yapmak ana görevi yavaşlatabilir.

Easing ve spring bir stil değil davranış kararıdır

Doğrusal, ease veya spring değerleri marka hissini etkiler; fakat öncelikle etkileşim türüne uygun olmalıdır. Sistem geri bildirimi hızlı ve belirgin, sahne geçişi daha yumuşak olabilir. Motion içinde timing ve easing değişkenleriyle ekip genelinde ortak davranış kurulabilmesi, hareket sistemleri için önemli bir adımdır.

Bir “fast”, “standard” ve “expressive” süre seti oluşturmak tek başına yeterli değildir. Hangi bileşenin hangi tokenı kullandığı ve istisnanın ne zaman kabul edildiği belgelenmelidir. Spring değerleri farklı cihazlarda ve gerçek içerik uzunluklarında test edilmelidir. Tasarım dosyasındaki akıcı önizleme, düşük performanslı cihazdaki sonucu garanti etmez.

Animated component ile tekrar kullanılabilirlik

Animated component yaklaşımı, aynı düğme, bildirim veya menü davranışını her prototipte yeniden kurma ihtiyacını azaltabilir. Bileşenin hover, pressed, loading, success ve error durumları görsel varyantlarla birlikte hareket kurallarına bağlanabilir. Böylece motion, video ekibinin ayrı bir katmanı değil ürün bileşeninin sözleşmesi olur.

Yine de her bileşeni animasyonlu yapmak gerekmez. Kullanım sıklığı yüksek mikro etkileşimlerde sürelerin toplamı deneyimi ağırlaştırabilir. Kullanıcı hareket azaltma tercihini açtığında hangi geçişin tamamen kalkacağı, hangisinin sade bir opacity değişimine döneceği belirlenmelidir.

Dev Mode ve export akışı

Figma, Dev Mode içinde salt okunur timeline ile animasyonların tam haliyle incelenebildiğini; CSS, JSON veya React kodunun kopyalanabildiğini belirtiyor. Motion bağlamı Figma MCP server üzerinden kodlama araçlarına da gönderilebiliyor. Bu çıktıların üretim koduna doğrudan yapıştırılması yerine proje mimarisi, tarayıcı desteği ve performans bütçesi açısından gözden geçirilmesi gerekir.

Ağustos 2026 itibarıyla resmi yardım sayfası MP4, GIF, WEBM ve Animated SVG export seçeneklerini listeliyor; Lottie desteğinin ileride geleceğini söylüyor. “Gelecek” ifadesi mevcut destek anlamına gelmez. Lottie zorunlu bir teslimse güncel hesapta seçenek doğrulanmalı veya ayrı üretim hattı planlanmalıdır.

Açık beta gerçeği ve sürüm yönetimi

Açık beta özelliklerinin arayüzü, plan sınırları ve çıktı davranışı değişebilir. Motion kullanan ekip; dosya sürümünü, export formatını, tarayıcı hedeflerini ve fallback davranışını proje notunda saklamalıdır. Kritik bir müşteri teslimi yalnızca beta özelliğine bağımlı bırakılmadan yedek üretim yöntemi belirlenebilir.

Figma, agent ile Motion üretiminin beta döneminde AI kredisi tüketmediğini; agent genel kullanıma geçtiğinde standart AI kredi kullanımının uygulanacağını belirtiyor. Manuel olarak agent üretimi hareketi düzenlemek kredi tüketmiyor. Bütçe planı yaparken bu koşulun zamanla değişebileceği not edilmelidir.

Ekip için küçük bir motion sistemi

Önce ürün içindeki tekrar eden hareketler envanterlenir: sayfa geçişi, modal, menü, accordion, loading, başarı ve hata geri bildirimi. Sonra süre, easing, mesafe ve opacity ilkeleri sınırlı token setine bağlanır. Bir veya iki bileşen pilot seçilir; Figma timeline, Dev Mode teslimi ve canlı kod karşılaştırılır.

Performans, erişilebilirlik ve anlatım başarısı ölçüldükten sonra kütüphane genişletilir. Motion’ın değeri, her yüzeye hareket eklemesinde değil; tasarımcı ile geliştiricinin aynı zamanlama ve davranış dilini konuşmasını sağlamasındadır. 2026 yenilikleri bu ortaklığı güçlendiriyor, fakat kalite hâlâ amaç, test ve doğru sınırlandırma gerektiriyor.

Timeline ve keyframe'i takım içinde sürdürülebilir bir motion diline dönüştürmek, araçtan çok yöntem meselesi. Video ve motion tasarımı hizmetimde storyboard, motion dili ve teslim formatlarını tek bir akışta kuruyorum.

Kaynaklar

Onur DemircanÇevrimiçi
WhatsApp
Onur Demircan profile portrait
Webflow ve Next.js tarafında güçlü dijital çözümler üreten freelancer.

Webflow development, Figma tasarımı ve Next.js projelerinde yaratıcı, dinamik ve kullanıcı odaklı web çözümleri geliştiriyorum.

Figma Motion 2026: Timeline, Keyframe ve Teslim | Onur Demircan | Art Director