Animasyonunuz için Figma'da hareket eklentisi nasıl kullanılır?

Figma, Web Tasarım planlama bağlantı noktaları için harika bir araçtır. Belki de bununla ilgili en iyi şey devasa yerel alandır. Plan çalışma sürecinizi daha hızlı ve daha basit hale getiren biçimler, semboller, araçlar ve modüller gibi olağanüstü varlıkların tutarlı bir şekilde ilerlemesini sağlar.

Figma , Adobe XD veya Sketch ile karşılaştırıldığında birçok avantaja sahiptir. Aşamalar arası olan ve herhangi bir programda ve işletim sisteminde çalışan program tabanlı bir arayüz yapılandırma cihazıdır. Farklı içerik oluşturucular ve iş arkadaşlarıyla sürekli ve koordineli bir çaba için en iyi ortamı sağlar.

İşbirliği işlevleri ve modüllerin yardımıyla akıllı modeller, ticari kodlar, tasarımlar ve eksiksiz formatlar oluşturma yeteneğinin yanı sıra, Figma öğelerini daha da genişletebilir - sıkıcı girişimlerin robotizasyonu gibi.

Yeni Figma varlıkları her gün Figma Topluluğuna aktarılır. Size zaman kazandırmak için doğrudan içgörümüz ışığında plan çalışma sürecinizi hızlandırmak için en iyi modüllerin ve araçların değerli bir özetini yaptık.

Her UX/UI mimarı, planlarını canlandırmaları gerektiğinde ikinci sırada gelir. Dahası, kullanıcı arayüzünde birkaç bağlantı kurmaya, birkaç göz kamaştırıcı etki eklemeye veya bir kişiye taşınabilir bir oyun için enerji vermeye karar vermemiz için hangi cihazlar tavsiye edilir?

Tüm bunları yapmak için size büyüleyici bir Figma modülü göstereceğim. Adı Hareket. Etkileşim noktasını hızla ana hatlarıyla belirleyeceğiz, canlılığın temellerini öğreneceğiz ve hatta bazı harika şeyler yapacağız.

Hadi her şeyi yuvarlayalım…

Öncelikli olarak, onu tanıtmalıyız. Figma'yı açın ve Topluluğa gidin.

Sayfanın en yüksek noktasındaki arama çubuğuna 'Hareket' ve sonuçlarda eklenti Eklentileri yazın.

Şu anda Yükle düğmesine dokunmalısınız ve kısaca bu kadar. Bir Figma belgesi daha eklemeliyiz. Açılır menüden Eklentiler/Hareket'i seçin.

Yakın zamanda Motion'a başladık. Bir sonraki aşama için hepimiz hazırız.

anahat

• Başka bir araç kullanmadan önce, onunla nasıl çalışacağımızı bulmalıyız. Etkileşim noktasını hızlı bir şekilde özetlemeliyiz.
• Figma UI gibi görünüyor, değil mi? Yeni müşteriler için harika.
• Üstte sekmelerimiz var: etkinliklerimiz, altında bir araç çubuğu, soldaki bir pano ve ana kareleri olan bir olaylar dizisi. Herhangi bir kayıt için çok sayıda hareket ekleyebilirsiniz.
• Bazı araç çubuğu düğmelerini hızlı bir şekilde özetlemeliyiz. Bunları daha sonra incelikleriyle tartışacağız.
• Ana kareleri otomatik güncelle.
• Yeniden karma/ve kesinti yok.

Oynat/Durdur

• Geçerli zaman konumu/tam çıkış zamanı.
• Soldaki panoda, adlarına göre katmanlara ve anahtar karelerle kanal katmanlarına bakabiliriz. Figma'da hiçbir şey seçilmemişse, alt katmanlar olmadan kaydın katmanlarını görebiliriz.
• Gecikebilen ağır belgeler için yapılmıştır. İstediğiniz katmanları arayın veya Figma'da katmanları seçin ve bir özet size tüm alt katmanları gösterecektir.

• Zaman çizelgesi panosunda, seçilen katmanın tüm ana karelerini göreceğiz.

Animasyon karesi ekle

Yardımıyla ticaret yapın, herhangi bir katmanı GIF, Sprite, Çerçeveler veya CSS ile takas edebilirsiniz.

Bir grup halinde çalıştığınızı varsayarsak, belgeye yaklaşan ve Motion'ı çalıştıran her kişi canlılığınızı görecektir.

Grubunuzla ve koddaki aktivitelerinizi yürütecek tasarımcılarla çapraz kullanım için harika. Herhangi bir ana kareye iki kez dokunmak, bir dönüm noktası, değer ve kolaylaştırma kapasitesi ayarlayabileceğiniz ana kare panosunu açar.

En unutulmaz canlılığınız

Hipotezden provaya. Bir kasa ve içine kare bir şekil vermeliyiz. Boyutlar ve tonlar şu an için herhangi bir fark yaratmıyor. Taşıma seçeneği üzerinde bir boşluk olması için kare şekli kasanın köşesindeki geçişe daha yakın yerleştirin.

Şu anda Motion'a gidin ve X özelliğindeki Ana kare ekle düğmesine dokunun.

Canlılığımız 500ms devam edecek. Pembe zaman çizelgesi tutamağını 500ms (0,5s) konumuna getirin.

Kare şeklimizi bir tarafa taşıyın, Hareket'e gidin ve Ana kare ekle düğmesine dokunun. Başka bir şey yok. Oynat'a tıklayın ve en unutulmaz etkinliğinizi görün. Bu yöntemlerle gördüğünüz özelliklerin her birini hızlandırabilirsiniz.

Devam edin ve Y, Genişlik, Yükseklik, Köşe süpürme, Döndürme, Opaklık ve Dolgu özelliklerini değiştirin.

İlkeler

Devam etmeli ve inceliklere daha fazla atlamalıyız.

Devrim noktası

En önemlisi, bir devrim noktasının veya bir çapa noktasının ne olduğunu kavramamız gerekir. İçinde bir kenarımız ve bir kare şeklimiz olduğunu varsaymalıyız. Kare şekli: genişlik = 100, seviye = 100, x = 100, y = 100, devir = 0°.

Motion'a gidin ve X özelliği için bir ana kare ekleyin. Yeni bir animasyon karesine iki kez dokunun. Şu anda belirli özellikler için ana kare panosunu görüyoruz. Burada bir pivot noktası veya bir bağlantı noktası, bir özellik tahmini ve bir kolaylaştırma kapasitesi ayarlayabilirsiniz.

Figma özellikler panosunda, X'i 100'e eşdeğer olarak tanımladık; ancak burada 150 görüyoruz. Neden?

Açıklama, X ve Y eksenine odaklanmak üzere ayarlanan devir noktasıdır. Bu çizgiler boyunca konum: X + (Genişlik/2) = 100 + (100/2) = 150. Figma ile benzer kaliteleri yönetmek için, pivot noktasının sol üst köşesini seçmelisiniz. Yine de acele etmeyin!

Kare şeklimizi X boyunca bir tarafa 100 kadar hareket ettirmeli ve - 45° döndürmeliyiz.

Oynat'a tıklayın ve hareket ettiğini ve döndüğünü görün. Ancak, sol üst köşeyi vurgulamak için devrimi değiştirdiğimiz bir senaryo hayal edin.

Pivot noktasını hangi ana kareyi değiştireceğiniz konusunda herhangi bir fark yaratmaz. Katmanın tüm ana kareleri için tipiktir.

Katmanın sol üst köşesine göre yuvarlanıp döneceğiz.

Figma, katmanın bir dönüş noktasının sol üst köşesinde gösterildiği gibi size X ve Y değerlerini gösterir; ancak, Rotasyon saygısı - orta noktaya göre. Bir şeyi canlandırırken bunu hatırlamalısın. Ancak, bir kural olarak, onu Motion'daki ana konudan dönüştürmek zorunda kalmayacaksınız.

Kolaylaştırıcı kapasiteler

Kolaylaştırıcı kapasiteler hız artışını ve yavaşlamayı kontrol eder. Dört kolaylaştırıcı kapasite vardır:

• doğrudan
• Başlangıçta kolay hız artışı
• Geri çekil - sonunda yavaşlama
• Geri giriş-çıkış - başlangıçta hız artar ve sonunda yavaşlama.

Burada başka bir seçenek var - Adımlar. Pratikte hiçbir ilerleme olmadan hemen saygıları değiştirecek. Denemeye ne dersiniz. Geçilen taraftan kenarın sağ yarısına doğru hareket eden kare şeklimiz var. Bitiş ana karesini seçin ve ana kare panosunu açın. Kolaylaştırıcı kapasiteleri değiştirin ve sonucu görün.

Çoğalt/Yapıştır

Ana kareleri yeniden sıralamak da basittir. Ana kareleri seçin, Ctrl/Cmd+C tuşlarına basın veya ana kareleri seçmek için açılır menüden Kopyala'yı tıklayın. Bundan sonra, bunları herhangi bir katmana yapıştırabilirsiniz. Bazen birkaç katmanı aynı şekilde canlandırmakta fayda var.

Düzelt/Yinele

Aktivitelerdeki ilerlemeleri düzeltebilir ve yeniden deneyebilirsiniz. Geri Al için Ctrl/Cmd+Z ve Yinele için Ctrl/Cmd+Y size yardımcı olacaktır.

Ana kareleri otomatik güncelle

Bu düğme dinamikse, Hareket devreye girdikten sonra ana kare değerleri geçerli zaman konumunda yenilenecektir. Modül penceresi devre dışı bırakmak için kiralandıktan sonra 1 saniyelik bir gecikmeniz var veya Oynat düğmesine basın ve pencerenin odağını kaldırın.

Böylece, ana kareler ekleyebilir, zaman konumuna gidebilir, Figma'daki katmanlarınız için özel iyileştirmeler sunabilir ve modül penceresini ortalayabilirsiniz. Hareket her şeyi yapacak.

fps'ye bakın

Figma'da gerçek zamanlı olarak göreceğiniz kasa sayısını 24 veya 60 gibi ayarlayabilirsiniz. Canlılığın gecikmeli olduğu durumlarda 60'dan 24'e çevirebilirsiniz. Bunun ticareti etkilemeyeceğini vurgulamamaya çalışın.

yeniden karma

Burada üç kapasite vardır:

• Tekrarlama yok
• yeniden karma
• Yeniden düzenleme ve kesinti

Sonuncusu büyüleyici. Hareketin bitiminde 1 saniye durur ve ancak bundan sonra tekrar eder. Ara sıra Tekrarla'yı ayarladığınızda, hareketinizin sonucunu göremezsiniz. Başka bir etkinlik turu başlamadan önce ertelemeniz daha iyi olur.

İhtiyacınız olan dönem için bir ana kare ekleyebilirsiniz. Her durumda, Motion size bu tür enstrümanları verir - Tekrarla ve geciktir.

toparlamak

Bu blog, bugün Figma'daki canlılık hakkında tonlarca yararlı bilgi topladı. Şu anda pratik yapmak ve serin canlılığınızı yapmak için fırsat ve iradeye sahip olun.

Daha fazlasını öğrenmek ister misiniz? Hizmetlerimizden yararlanmak için www.webdew.com adresini ziyaret edin veya bizimle iletişime geçin!

Editör: Tamanna