Use Framer X to build interactive prototypes

Use Framer X to build interactive prototypes

एक डिजाइनर के रूप में, अक्सर सवाल होते हैं कि आपको अपने प्रोजेक्ट के लिए कौन से प्रोटोटाइप टूल का उपयोग करना चाहिए।

वायरफ्रेमिंग (हमारे शीर्ष वायरफ्रेमिंग टूल देखें), प्रोटोटाइपिंग और जटिल इंटरैक्शन जैसे कार्यों के लिए बहुत सारे सॉफ़्टवेयर हैं। हालांकि, बहुत कम डिवाइस हैं जो इन सभी चीजों को संभाल सकते हैं। कार्यकर्ता एक ऐसा उपकरण है जिसमें ये सभी कार्य हैं और एनिमेशन और छोटे इंटरैक्शन बनाने की प्रक्रिया को तेज करते हैं।

फ्रैमर एक्स का नवीनतम पुनरावृत्ति अब छोटी बातचीत और एनिमेशन विकसित करने के लिए कॉफीस्क्रिप्ट के बजाय रिएक्ट और जावास्क्रिप्ट का उपयोग करता है।

जो तेज लोडिंग और बेहतर प्रदर्शन की अनुमति देता है। इसके अलावा, रिएक्ट घटकों के उपयोग से उपयोगकर्ताओं को रियल-टाइम मीडिया प्लेयर्स और ग्राफ़ को कस्टमोटाइप में एम्बेड करने सहित स्कोप और विस्तार करने की अनुमति मिलती है।

परीक्षण प्रोटोटाइप प्रक्रिया का एक मुख्य हिस्सा है और जबकि फ्रामर एक्स इंटरैक्टिव प्रोटोटाइप बनाने में महान है। लेकिन रचना कितनी अच्छी है यह देखने के लिए कुछ मदद की ज़रूरत है। Framer के पूरक और वास्तविक दुनिया में प्रोटोटाइप की मदद करने के लिए सबसे अच्छा टूल खोजने के लिए हमारे उपयोगकर्ता परीक्षण पोस्ट को देखें।

Framer X के साथ ऐप कैसे बनाएं

फ्रैमर एक्स की शक्ति की पूरी तरह से सराहना करने के लिए, हम एक वास्तविक जीवन परियोजना बना रहे हैं: कुछ अवयवों और मीडिया के साथ एक सरल नुस्खा आवेदन। पहली बात यह है कि पहला पृष्ठ है। हम निम्नलिखित तत्वों के साथ चीजों को सरल रखेंगे:

आरंभ करने के लिए, आपको बाईं नेविगेशन पट्टी पर + आइकन पर क्लिक करके एक नया फ़्रेम (आर्टबोर्ड) बनाने की आवश्यकता है। सही रेल पर मानक iPhone / Android टेम्पलेट्स की सूची से एक आर्टबोर्ड शैली का चयन करें। अब आप जाने के लिए तैयार हैं।

01. एक सर्च बार बनाएं

खोज बार बनाकर प्रारंभ करें। एक आयत बनाने और एक खोज आइकन जोड़ने के बजाय जैसे कि हम सामान्य रूप से करते हैं, हम जल्दी से पुन: उपयोग कर सकते हैं पुन: प्रयोज्य घटकों में Framer X, इन्हें पैकेज कहा जाता है।

हजारों पैकेज हैं जो स्टोर के नीचे बाएं नेविगेशन बार में मिल सकते हैं। स्टोर पर क्लिक करें, एंड्रॉइड किट और उदाहरण किट खोजें और फिर इसे इंस्टॉल करें।

इन पैकेजों में कार्ड, कीबोर्ड बटन, इनपुट स्लाइडर्स और नेविगेशन मेनू आइटम जैसे तत्व शामिल हैं। जब आप इन पैकेजों को स्थापित करते हैं, तो आप बाईं ओर घटक मेनू से उनके घटकों तक पहुंच सकते हैं।

फ़िल्टर में खोजकर आप जो तत्व चाहते हैं – इस स्थिति में खोज पट्टी, जो कि स्वैच में है, बस फ्रेम पर खींचें और छोड़ें। अब आप सही पट्टी का उपयोग करके प्लेसहोल्डर पाठ, फ़ॉन्ट आकार और रंग जैसे गुणों को संपादित कर सकते हैं।

02. सामग्री का ढेर बनाएँ

इस हाल की गतिविधि के लिए, एक संदेश जोड़ें। “हाल की गतिविधि” पहले, जो बहुत सीधी है। अब हम Framer X की एक नई सुविधा का उपयोग कर सकते हैं जिसे Stacks कहा जाता है।

आप ऐसा कर सकते हैं + आइकन पर क्लिक करके और मेनू से स्टैक एस का चयन करें। स्टैक का चयन करने के बाद, स्टैक बनाने के लिए काम के फ्रेम पर एक 600 x 300 क्षेत्र को खींचें और छोड़ें। यह ढेर नीले रंग में दिखाया गया है।

अब अवयव अनुभाग पर वापस जाएं और एंड्रॉइड किट में, कार्ड -5 घटक को ढूंढें और इसे स्टैक में खींचें जिसे हमने अभी बनाया है। इन कार्डों को दो बार दोहराएं और सुनिश्चित करें कि सभी तीन कार्ड स्टैक में हैं।

जब तक वे ढेर में होते हैं, तब तक आप इन तीन कार्डों को आसानी से ताज़ा किए बिना रिक्ति के बारे में चिंता कर सकते हैं।

यदि आप कार्ड के बीच की जगह बढ़ाना चाहते हैं, तो आप पूरे स्टैक की चौड़ाई बढ़ा सकते हैं। यह कितना आसान है। आप अपनी पसंद के हिसाब से शीर्षक, शीर्षक और पृष्ठभूमि को बदलकर इन कार्डों को निजीकृत भी कर सकते हैं।

अब जब हमने स्टैक बनाया है, तो इसे स्क्रॉल करने योग्य बनाते हैं। फ्रेम / आर्टबोर्ड से दूर कदम

बाएं नेविगेशन से + आइकन पर क्लिक करें और स्क्रॉल विकल्प पर क्लिक करें। जैसे हम एक स्टैक्ड क्षेत्र बनाते हैं, फ्रेम / आर्टबोर्ड पर एक स्क्रॉल करने योग्य क्षेत्र बनाते हैं जो स्टैक के समान आकार होता है।

अब दाईं पट्टी में दिशा तीर को बदलकर स्क्रॉलिंग गुण क्षैतिज स्क्रॉलिंग बनाएं।

हमारी स्क्रॉल रिपॉजिटरी बनाने के बाद हमें उस सामग्री की आवश्यकता होती है जिसे हमने पहले बनाए गए स्टैक द्वारा परोसा है। तो बस स्लाइडिंग कंटेनर पर तीर प्रॉम्प्ट का उपयोग करके स्लाइडिंग कंटेनर को स्टैक से कनेक्ट करें। स्टैक पर माउस पॉइंटर को खींचकर काम करें।

03. गिल्ड ऊर्ध्वाधर ढेर

रेसिपी कार्ड्स के लिए, आपको स्टेप 2 के लिए एक समान विधि का पालन करने की आवश्यकता है, लेकिन एक क्षैतिज कार्ड शिफ्ट बनाने के बजाय, आपको एक समान वर्टिकल, अनिवार्य रूप से थंबनेल के साथ लोकप्रिय व्यंजनों की सूची बनाने की आवश्यकता होगी।

इस अभ्यास के लिए, नुस्खा के लिए प्रत्येक कार्ड में चार तत्व होते हैं: थंबनेल, रेटिंग, नुस्खा नाम और तैयारी का समय।

प्रत्येक कार्ड के विवरण के बारे में चिंता मत करो। यह आपके डिजाइन स्वाद के अनुसार समायोजित किया जा सकता है। डुप्लिकेट घटकों से कार्ड का उपयोग करने के लिए एक ही विधि का पालन करें और उन सभी को ऊर्ध्वाधर स्क्रॉलिंग के साथ स्टैक में जोड़ें।

04. एक नया पेज बनाएँ

अब विशिष्ट व्यंजनों के विवरण के लिए एक नया पृष्ठ बनाते हैं। उदाहरण के लिए, चलो एक और कार्ड का मामला यहां लेते हैं, फ्रेंच पास्ता।

Leave a Comment

Your email address will not be published.