Figma प्रोटोटाइप और डेवलपर हैंडऑफ़ में मैस्कॉट एनिमेशन

क्या Figma prototypes, Rive फ़ाइलें चला सकते हैं?

नहीं। Figma फ़ोरम में Rive embeds और prototype playback की माँगें मार्च 2024 से हैं। फ़रवरी 2025 में एक community developer ने beta Rive plugin की घोषणा की, और मई 2025 में एक दूसरे जवाब में बताया गया कि यह prototypes में Rive एनिमेशन नहीं चला सकता, साथ ही Rive founder की राय बताई गई कि "Figma का code वहाँ access नहीं देता जहाँ Rive फ़ाइलें embed करके चलाने के लिए ज़रूरी है।" Thread में Figma staff का कोई जवाब नहीं है।

इसलिए prototype की योजना ऐसे stand-ins के साथ बनाएँ जिन्हें Figma चला सके, और असली interactive फ़ाइल build के लिए रखें। यह बँटवारा वैसे भी अच्छा है: prototype से stakeholders के साथ flow और timing टेस्ट होती है, और .riv असली state logic developers तक पहुँचाती है।

Figma prototype में GIF इस्तेमाल करूँ या वीडियो?

दोनों काम करते हैं; बस उनका व्यवहार अलग है।

इसके दो व्यावहारिक नतीजे हैं। पहला, ट्रांसपेरेंट VP9 WebM, जो alpha वाले कैरेक्टर के लिए आम web format है, Figma की सूची में नहीं है, और Figma के वीडियो लेख में transparency का ज़िक्र नहीं है, इसलिए solid बैकग्राउंड की उम्मीद रखें और उसे frame से मिलाएँ। दूसरा, अगर stakeholders फ़ोन पर Figma mobile app में review करते हैं, तो GIF इस्तेमाल करें, क्योंकि वहाँ वीडियो नहीं चलता।

स्टेट बदलने वाले मैस्कॉट का prototype कैसे बनाएँ?

मैस्कॉट को हर स्टेट के लिए एक variant (idle, loading, success, error) वाला component बनाएँ, जिसमें हर variant उस स्टेट का GIF या वीडियो रखे। फिर interactive components इस्तेमाल करें, जो variants के बीच switch करने के लिए Change to action जोड़ते हैं:

• लूप (idle, loading, listening) GIF के रूप में, या Loop चालू वाले वीडियो के रूप में, हमेशा लूप होते रहते हैं।
• वन-शॉट (success, error, yes) एक बार चलकर वापस लौटने चाहिए। वीडियो में Loop बंद करें और When video ends को Change to idle से जोड़ें। GIF में After delay को clip की लंबाई (milliseconds में) पर सेट करें।
• Screen events से switch होते हैं: button tap करने पर मैस्कॉट loading में बदलता है, और frame पर After delay, server response की जगह काम करके उसे success में बदल देता है।

सभी variants का साइज़ एक जैसा और कैरेक्टर की position एक ही रखें, वरना स्टेट बदलते समय वह उछलेगा। Variants के नाम असली स्टेट्स पर रखें (mood=loading, trigger=success), ताकि prototype पहले से developers की भाषा बोले।

GIF के बजाय designers, developers को क्या दें?

.riv और एक state contract। GIF सिर्फ़ stand-ins थे; build में असली फ़ाइल इस्तेमाल होती है, इसलिए developers को पता होना चाहिए कि कौन सी स्टेट मशीन चलानी है, कौन सी properties मौजूद हैं, हर value का मतलब क्या है और उसे कौन सा screen event सेट करता है। इसे frame के पास note या annotation के रूप में रखें:

File:           character.riv
Artboard:       default
State machine:  CharacterViewModelMachine   (autoBind: true)
View model:     Character
  mood (number) 0 idle, 1 happy, 2 wave, 3 thinking, 4 sad,
                5 loading, 6 listening, 7 talking, 8 sleeping, 9 attention
  triggers      success, error, yes, no, enter, exit
Screen events:
  Upload starts        -> mood = 5
  Upload succeeds      -> trigger success, then mood = 0
  Upload fails         -> trigger error, then mood = 4
  Empty inbox          -> mood = 8
Size:           120 x 120 pt, fit Contain
Reduced motion: autoplay off, show poster.png
Fallbacks:      poster.png, idle.mp4

एक contract को उपयोगी क्या बनाता है:

• सटीक नाम। Code में स्टेट मशीन, व्यू मॉडल और property names case-sensitive होते हैं।
• Events, एनिमेशन नहीं। Developers ऐप events को इनपुट से जोड़ते हैं; transitions कैसे दिखेंगे, यह फ़ाइल तय करती है।
• साइज़ और fit। Layout में point size और आर्टबोर्ड उसमें कैसे fit हो।
• मोशन कम करें और fallbacks। Motion बंद होने या फ़ाइल load न होने पर क्या दिखाना है।

प्लेटफ़ॉर्म गाइड इस contract का दूसरा पहलू दिखाती हैं: SwiftUI में Data Binding, React और Next.js और स्टेट मशीन का ओवरव्यू।

मैस्कॉट आर्टवर्क को Figma से Rive में कैसे ले जाएँ?

कॉपी और पेस्ट करें। Rive के docs कहते हैं "You can use Copy as SVG and paste it directly into the Rive editor," (आप Copy as SVG इस्तेमाल करके इसे सीधे Rive editor में पेस्ट कर सकते हैं), और Rive ने फ़रवरी 2023 में अपने ब्लॉग पर इस वर्कफ़्लो की घोषणा की थी। पेस्ट किया गया हिस्सा नेटिव Rive वेक्टर ऑब्जेक्ट बन जाता है, जिन्हें आप रिग और एनिमेट कर सकते हैं।

• Flatten या outline जैसे इफ़ेक्ट Rive शायद उसी तरह न पढ़े, इसलिए Rive के docs सुझाव देते हैं कि ऐसे हिस्सों को पहले "आपके डिज़ाइन टूल में एडिट होने वाले paths" में बदल लें।
• कॉपी करने से पहले Figma में लेयर्स के नाम रखें; ये नाम साथ आते हैं और रिगिंग आसान बनाते हैं।
• पूरी स्क्रीन की जगह एक बार में एक कैरेक्टर पेस्ट करें।

फ़ोरम थ्रेड वाला "Rive for Figma" प्लगइन एक कम्युनिटी प्रोजेक्ट है, Rive की आधिकारिक रिलीज़ नहीं, और यह प्रोटोटाइप प्लेबैक नहीं जोड़ता।

Charmotion के कौन से एक्सपोर्ट Figma में काम करते हैं?

Charmotion अपने 17 एनिमेशन में से हर एक को अलग फ़ाइल के रूप में देता है, जो सीधे हर स्टेट के लिए एक वेरिएंट से मेल खाता है। GIF (480 px, सॉलिड बैकग्राउंड) हर Charmotion सेट में है और Figma मोबाइल ऐप में चलता है; फ़्रेम का रंग GIF के बैकग्राउंड से मिलाएँ या उसे किसी टाइल पर रखें। जब आपको ज़्यादा स्मूद मोशन चाहिए, तो 1080×1080 MP4 वीडियो फ़िल के लिए सही है, और 9:16 MP4 लॉन्च जैसे फ़ुल-स्क्रीन पलों के लिए। Character व्यू मॉडल (mood 0 से 9 और success, error, yes, no, enter और exit ट्रिगर) वाली .riv, साथ में वेब, React और SwiftUI कोड, हैंडऑफ़ फ़ाइल है, इसलिए ऊपर का ढाँचा ज़्यादातर पहले से भरा हुआ है। .riv हर पेड प्लान पर है ($20/माह से), साथ में सॉलिड बैकग्राउंड पर MP4, GIF और 9:16 लॉन्च वीडियो।

Figma में मैस्कॉट का प्रोटोटाइप कैसे बनाएँ और Rive फ़ाइल हैंड ऑफ़ कैसे करें

1. स्टैंड-इन एक्सपोर्ट करें. हर स्टेट के लिए एक GIF या H.264 MP4 एक्सपोर्ट करें, सभी एक ही साइज़ में और कैरेक्टर एक ही जगह पर।
2. कंपोनेंट बनाएँ. हर स्टेट के लिए एक variant वाला मैस्कॉट कंपोनेंट बनाएँ और हर GIF या वीडियो को उसके variant में रखें।
3. स्टेट जोड़ें. Variants बदलने के लिए टैप के साथ Change to, After delay और When video ends का इस्तेमाल करें।
4. Presentation view में रिव्यू करें. प्रोटोटाइप को presentation view में चलाएँ, जहाँ GIF एनिमेट होते हैं।
5. Contract लिखें. फ़्रेम के बगल में स्टेट मशीन, व्यू मॉडल, properties, ट्रिगर और उन्हें सेट करने वाले स्क्रीन इवेंट की सूची लिखें।
6. handoff करें. .riv और फ़ॉलबैक फ़ाइलें अटैच करें, और डेवलपर्स को उनके स्टैक की प्लेटफ़ॉर्म गाइड का लिंक दें।

अक्सर पूछे जाने वाले सवाल

Figma में मेरा GIF हिल क्यों नहीं रहा?

Figma एनिमेटेड GIF सिर्फ़ presentation view में चलाता है। इसके help center के अनुसार editor में ये स्थिर इमेज की तरह दिखते हैं। एनिमेशन देखने के लिए present बटन से प्रोटोटाइप खोलें। Figma से GIF को एनिमेशन के रूप में एक्सपोर्ट भी नहीं किया जा सकता; Figma इन्हें स्थिर इमेज के रूप में एक्सपोर्ट करता है।

क्या Figma प्रोटोटाइप में ट्रांसपेरेंट WebM इस्तेमाल कर सकते हैं?

Figma VP8 एन्कोडिंग वाले .webm को सपोर्टेड बताता है, जबकि ट्रांसपेरेंट कैरेक्टर वीडियो आमतौर पर VP9 होते हैं, और इसके वीडियो वाले आर्टिकल में अल्फ़ा सपोर्ट का ज़िक्र नहीं है। फ़्रेम से मेल खाते बैकग्राउंड वाला H.264 MP4 या GIF इस्तेमाल करें, और ट्रांसपेरेंट फ़ाइलें असली बिल्ड के लिए रखें।

क्या Figma प्रोटोटाइप के वीडियो Figma मोबाइल ऐप में चलते हैं?

नहीं। Figma के help center के अनुसार Figma मोबाइल ऐप में वीडियो अभी सपोर्टेड नहीं हैं। अगर रिव्यूअर फ़ोन पर प्रोटोटाइप खोलेंगे, तो मैस्कॉट स्टेट्स के लिए एनिमेटेड GIF इस्तेमाल करें, जो presentation view में चलते हैं, या वीडियो के लिए डेस्कटॉप लिंक शेयर करें।

इस गाइड से झटपट जवाब

• क्या Figma prototypes, Rive फ़ाइलें चला सकते हैं?

स्रोत

• Rive animation embed, Figma Forum
• Use videos in prototypes, Figma Learn
• Use animated GIFs in prototypes, Figma Learn
• Create interactive components with variants, Figma Learn
• Prototype triggers, Figma Learn
• SVG and vector assets, Rive
• Copy and paste from Figma to Rive, Rive