Figma Motion Tutorial: Everything You Need to Know

Figma Motion Tutorial: Everything You Need to Know

Figma Motion का परिचय

Figma Motion का उपयोग कैसे करें

  • Figma Motion की घोषणा Config 2026 में हुई। इसे उपयोग करना बहुत आसान है, बस एक नया डिज़ाइन फ़ाइल खोलें और नीचे "motion" पर टैप करें।
  • जब आप "motion" पर क्लिक करते हैं, तो टाइमलाइन खुल जाती है, जो अभी भी बीटा में है।

एनिमेशन जोड़ना

  • पहले एनिमेशन को जोड़ने के लिए, डिज़ाइन पैनल में दाईं ओर एनिमेशन सेक्शन पर जाएं और "+" पर क्लिक करें। इससे टाइमलाइन में एनिमेशन जुड़ जाएगा।
  • विभिन्न प्रकार के एनिमेशन जैसे स्थिति, स्केल, रोटेशन आदि उपलब्ध हैं। उदाहरण के लिए, यदि आप चाहते हैं कि कोई ऑब्जेक्ट बाईं ओर से स्लाइड करे तो उसकी स्थिति सेट करें।

टाइमलाइन की संरचना

  • टाइमलाइन को ज़ूम इन और आउट करने के लिए नियंत्रण होते हैं; आप ट्रैकपैड या माउस का उपयोग कर सकते हैं। वर्तमान समय मिलीसेकंड में दिखता है और इसे सेकंड में बदला जा सकता है।
  • टाइमलाइन की कुल अवधि दिखाई देती है; यदि कुछ लूप हो रहा है तो वह केवल निर्धारित समय सीमा के भीतर लूप करेगा।

एनिमेशनों का संयोजन

  • एक ही ऑब्जेक्ट पर कई एनिमेशनों को जोड़ना संभव है; उदाहरण के लिए, एक कुत्ते को घुमाने वाला एनिमेशन जोड़ें जबकि वह चल रहा हो।
  • Figma Motion में कई पूर्वनिर्धारित एनिमेशनों की लाइब्रेरी भी उपलब्ध है जिसे एक्सप्लोर किया जा सकता है।

कीफ्रेमिंग क्या होती है?

  • कीफ्रेमिंग का मतलब होता है कि किसी विशेष समय पर ऑब्जेक्ट A से B तक जाना होगा; Figma इस प्रक्रिया को स्वचालित रूप से सुचारू बनाता है।
  • जब आप किसी ऑब्जेक्ट को स्थानांतरित करते हैं और नए कीफ्रेम्स जोड़ते हैं, तो सॉफ़्टवेयर यह सुनिश्चित करता है कि सभी परिवर्तन सही ढंग से जुड़े हों।

जटिल मैनुअल एनीमेशन बनाना

  • दिन और रात के बीच बदलाव करने वाले जटिल एनीमेशन बनाने के लिए बैकग्राउंड रंग बदलें और अन्य तत्वों को स्थानांतरित करें ताकि वे समन्वयित तरीके से काम करें।
  • एनीमेशन प्रभावी बनाने के लिए बेज़ियर कर्व्स का उपयोग किया जा सकता है जिससे गति अधिक प्राकृतिक लगती है।

स्वचालित कीफ्रेमिंग

  • स्वचालित कीफ्रेमिंग फीचर सक्रिय करने पर सॉफ़्टवेयर अपने आप सही कीफ्रेम्स सेट करता है जब आप किसी तत्व को स्थानांतरित करते हैं या उसका आकार बदलते हैं।

पथ ट्रिमिंग तकनीक

  • पथ ट्रिमिंग तकनीक का उपयोग करके आप किसी आकृति को धीरे-धीरे प्रकट कर सकते हैं; इसके लिए आपको प्रारंभिक स्थिति सेट करनी होगी और फिर अंतिम स्थिति निर्धारित करनी होगी ताकि यह सुचारू रूप से चले सके।

एजेंटों द्वारा सहायता प्राप्त करना

  • एजेंटों का उपयोग करके जटिल एनीमेशनों को आसानी से बनाया जा सकता है; उदाहरण स्वरूप, टेक्स्ट नोड्स को मजेदार तरीके से एनीमेट किया जा सकता है बिना ज्यादा प्रयास किए हुए।

कंपोनेंट्स में मोशन एनीमेशन्स

  • मोशन एनीमेशन्स को कंपोनेंट्स में नेस्ट किया जा सकता है जिससे उन्हें अलग-अलग समय पर नियंत्रित करना आसान होता है तथा साफ-सुथरी टाइमलाइन मिलती है।।

निर्यात विकल्प

  • Figma Motion में बनाए गए एनीमेशन्स को MP4, WebM या GIF फॉर्मेट में निर्यात किया जा सकता ہے जिससे डेवलपर्स आसानी से उनका उपयोग कर सकें।।
Video description

Follow along → https://www.figma.com/community/file/1651770184316512504 Thanks for watching, TD 💛 ⭐️ Sign up to Figma Weave → https://weavy.ai?ref=tdsunshine ☕️ Buy me a tea → https://buymeacoffee.com/tdsunshine 🔎 Get 20% off Mobbin → https://mobbin.com/tdsunshine 🌼 _CHAPTERS_ : 00:00 Intro 00:07 Where is it 00:20 Animation 01:13 Timeline controls 02:18 Stacking animations 02:41 Animation library 03:18 Manual animation (key framing) 05:15 Complex key framing 07:40 Easing 09:10 Auto key framing 10:06 Path trim 11:48 Arc animation 12:58 Animate with Agents 13:47 Motion in components 15:50 Exporting 🤗 Disclosure: This video and description may contain affiliate links, meaning I'll receive a small commission if you click on one of the product links. I'm also an Amazon Associates affiliate and will earn a commission on qualifying purchases. 💛 This is at no additional cost to you. #figmatutorial #figmadesign #figma_tutorial #figmatutorial #figmatips #figma #figmamotion #config #figma2026