प्लगइन्स का उपयोग करके अपने Figma डिज़ाइन में मॉकअप कैसे बनाएं और जोड़ें

यदि आप एक ऐसे डिज़ाइनर हैं जो मॉकअप का उपयोग करके अपने डिज़ाइन प्रदर्शित करना पसंद करते हैं, तो उन्हें Figma में बनाना आसान हो सकता है।

अपने Figma डिज़ाइन को सहेजने और मॉकअप बनाने के लिए किसी अन्य प्रोग्राम में जाने के बजाय, आप Figma में आसानी से मॉकअप प्लग इन डाउनलोड कर सकते हैं। विभिन्न शैलियों में कई प्लगइन विकल्प हैं, लेकिन वे सभी बड़े डिजाइनों में उपयोग और एकीकृत करने के लिए सरल हैं।

Figma प्लगइन्स कैसे खोजें और डाउनलोड करें

Figma में एक प्लगइन डाउनलोड और इंस्टॉल करना एक ही है चाहे आप ऐप का उपयोग कर रहे हों या ब्राउज़र संस्करण का। से Figma का ब्राउज़र होमपेजक्लिक करें समुदाय > प्लगइन्स और विजेट्स, और सूची के माध्यम से खोजें या खोज बार का उपयोग करें।

से फिग्मा का ऐप, मुखपृष्ठ समुदाय पृष्ठ पर जाने के लिए ब्राउज़र के समान विकल्प प्रदान करेगा। लेकिन अगर आप किसी डिज़ाइन पेज पर हैं, तो आप Figma लोगो पर क्लिक कर सकते हैं, फिर प्लग-इन. यदि आप पहले से ही प्लगइन्स इंस्टॉल कर चुके हैं, तो आप उन्हें यहां सूचीबद्ध देखेंगे।

अधिक खोजने के लिए, चुनें समुदाय में प्लगइन्स ब्राउज़ करें। यह आपको ऐप के भीतर सामुदायिक पृष्ठ पर ले जाएगा जहां आप अन्य प्लगइन्स खोज सकते हैं।

सामुदायिक पृष्ठ पर, आपको प्रत्येक प्लगइन के लिए एक छोटा सा ब्लर्ब मिलेगा, अंतिम अपडेट की तिथि, और प्रत्येक प्लगइन कितनी बार डाउनलोड किया गया है। प्रत्‍येक प्‍लग इन के बारे में अधिक जानकारी के लिए—जैसे कि उपयोगकर्ताओं की टिप्‍पणियां और उपयोग मार्गदर्शिकाएं—इसके नाम पर क्लिक करने से आप उस प्‍लग इन के सूचना पृष्ठ पर पहुंच जाएंगे।

एक बार जब आपको एक प्लगइन मिल जाए जिसे आप डाउनलोड करना चाहते हैं, तो नीले रंग पर क्लिक करें स्थापित करना बटन।

यदि आप सुनिश्चित नहीं हैं कि क्या देखना है, तो यहां हमारे शीर्ष पांच पसंदीदा मॉकअप प्लगइन्स हैं। और भी बहुत कुछ हैं, लेकिन कहीं से शुरू करना अच्छा है।

• क्ले मॉकअप 3डी
• कोण मॉकअप
• मॉकरॉकेट - 3डी मॉकअप
• नकली
• वेक्टर 3D तत्व

Figma में Mockup प्लगइन्स का उपयोग कैसे करें

प्लगइन्स को स्थापित करने की प्रक्रिया समान है, भले ही आप किस प्रकार के प्लगइन का उपयोग कर रहे हों, लेकिन उनके उपयोग के तरीके में कुछ अंतर हो सकते हैं। इसलिए अतिरिक्त विवरण के लिए व्यक्तिगत प्लगइन के सामुदायिक पृष्ठ को पढ़ना हमेशा सर्वोत्तम होता है।

Figma में, आप विशिष्ट स्क्रीन के लिए तैयार फ्रेम आकार चुन सकते हैं, जैसे iPhone 13 या एक बड़ा या छोटा Android। आपको डिज़ाइनों का आकार बदलने की कोशिश करने के बजाय अपने डिज़ाइन को उसके इच्छित डिवाइस आकार के लिए बनाना चाहिए बाद में आपके मॉकअप में फ़िट होने के लिए, लेकिन कुछ मॉकअप न के साथ थोड़े भिन्न आकार की अनुमति देंगे विरूपण।

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

मॉकअप आमतौर पर स्थिर स्क्रीन डिज़ाइन के लिए होते हैं, हालाँकि आप कर सकते हैं फोटोशॉप में वीडियो मॉकअप बनाएं. हम हैंडहेल्ड उपकरणों के लिए Figma मॉकअप पर ध्यान केंद्रित करने जा रहे हैं, लेकिन आप कर सकते हैं फोटोशॉप में स्क्रैच से मॉकअप बनाएं अन्य उपकरणों के लिए। आपके स्क्रीन डिज़ाइन को अंतिम रूप देने के साथ, आप उत्पाद मॉकअप बनाने के लिए आगे बढ़ सकते हैं।

हम आपको दिखाएंगे कि हमारे सुझाए गए तीन प्लगइन्स का उपयोग कैसे करें: क्ले मॉकअप 3 डी, एंगल मॉकअप और वेक्टर 3 डी एलिमेंट्स। चलो ठीक अंदर कूदो।

क्ले मॉकअप 3डी

अपने डिज़ाइन के खुले होने पर, फ़्रेम का चयन करें और फिर पर जाएँ प्लग-इन और चुनें क्ले मॉकअप 3डी. यह एक विंडो खोलता है जहां आप मॉकअप के लिए डिवाइस चुन सकते हैं। आपका डिज़ाइन इस विंडो में मॉकअप की स्क्रीन पर दिखना चाहिए।

आप इस विंडो में मॉकअप के कोण के साथ-साथ रंग भी बदल सकते हैं। एक बार जब आप इससे खुश हों कि यह कैसा दिखता है, तो क्लिक करें छवि के रूप में सहेजें.

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

कोण मॉकअप

एंगल मॉकअप का उपयोग करने के लिए, आपको उनकी वेबसाइट से मॉकअप लाइब्रेरी डाउनलोड करने के लिए एक एंगल खाता बनाना होगा। पर कोण की वेबसाइटक्लिक करें साइन इन करें, जो एक पॉपअप लाएगा जहां आप क्लिक कर सकते हैं साइन अप करें और एक निःशुल्क खाता बनाने के लिए अपना विवरण जोड़ें।

एक बार साइन इन करने के बाद, मॉकअप डाउनलोड करने के लिए, क्लिक करें नकली > नमूना डाउनलोड करें. मॉकअप के अधिक व्यापक सेट के लिए, आप प्रीमियम एक्सेस के लिए भुगतान कर सकते हैं, लेकिन मुफ़्त खाते के साथ पेश किया गया नमूना काफी अच्छा है।

डाउनलोड हो जाने के बाद, फ़ाइल को अनज़िप करें। इसमें ऐसे नमूने शामिल हैं जिनका उपयोग आप Figma, Sketch और Adobe XD में कर सकते हैं, साथ ही कुछ निःशुल्क वॉलपेपर भी। खुला हुआ कोणफिग्मा. आपको मॉकअप का उपयोग करने में मदद करने के लिए दो वीडियो मिलेंगे, साथ ही विभिन्न मॉकअप वाली Figma फ़ाइलों के चार सेट भी मिलेंगे।

अपने Figma खाते में फ़ाइलें आयात करने के लिए, Figma ब्राउज़र पर जाएँ और अपनी प्रोफ़ाइल पर क्लिक करें। आप पर जाकर ऐप से इसे एक्सेस कर सकते हैं फ़ाइल> फ़ाइल ब्राउज़र खोलें. प्रत्येक कोण फ़ाइल को Figma में खींचें और छोड़ें। फिर Figma ब्राउज़र पेज से उस पर डबल क्लिक करके एंगल फाइल को खोलें।

अपने मॉकअप के लिए आप जिस डिवाइस एंगल का उपयोग करना चाहते हैं उसे ढूंढें और उसे कॉपी करें (सीमोहम्मद + सी मैक के लिए or सीtr + सी विंडोज के लिए)। इसे चिपकाओ (सीएमडी + वी मैक के लिए or सीटीआरएल + वी विंडोज़ के लिए) आपके मुख्य डिज़ाइन के समान आर्टबोर्ड में।

परत पैलेट में, मॉकअप स्क्रीन की परतों को तब तक विस्तृत करें जब तक कि आपको शीर्षक वाली तस्वीर आइकन वाली परत दिखाई न दे यहां आर्टबोर्ड लगाएं. उस परत का चयन करें। फिर जाएं प्लगइन्स > कोण मॉकअप और पॉपअप विंडो में अपना मूल डिज़ाइन चुनें।

यह पूर्वावलोकन विंडो में आपके मॉकअप के कोण में दिखना चाहिए, लेकिन यह मॉकअप का उपकरण नहीं दिखाएगा। क्लिक आवेदन करना और आपकी स्क्रीन अब सही कोण पर डिवाइस मॉकअप पर होनी चाहिए।

वेक्टर 3D तत्व

वेक्ट्री 3डी क्ले मॉकअप्स 3डी के समान काम करता है, हालांकि इसमें डिवाइस मॉकअप के लिए कम विकल्प हैं क्योंकि यह विभिन्न प्रकार के 3डी एसेट भी प्रदान करता है। अपना डिज़ाइन खोलें, फ़्रेम चुनें, और पर जाएँ प्लगइन्स > वेक्टर 3डी तत्व.

पॉपअप लाइब्रेरी में आप जिस मॉकअप का उपयोग करना चाहते हैं उसे ढूंढें, फिर क्लिक करें लोड फ्रेम. एक बार आपका डिज़ाइन डिवाइस की स्क्रीन पर दिखाई देने के बाद, क्लिक करें निर्यात छवि.

अब आपके पास आपके द्वारा चुने गए डिवाइस पर आपके डिज़ाइन का 3D मॉकअप है। आप इसे किसी अन्य डिज़ाइन में आसानी से जोड़ सकते हैं।

एक बार आपका मॉकअप पूरा हो जाने पर, आप इसे किसी अन्य डिज़ाइन में आसानी से उपयोग करने के लिए PNG फ़ाइल के रूप में सहेज सकते हैं। क्लिक फ़ाइल> निर्यात. निर्यात करने के लिए अपनी चुनी हुई छवि का चयन करें, फिर क्लिक करें निर्यात करना आपके अंतिम पीएनजी के लिए।

Figma Mockups के साथ अपने डिजाइनों में यथार्थवाद जोड़ें

आपके डिज़ाइन के लिए मॉकअप बनाने के अनगिनत उपयोग हैं। विभिन्न Figma प्लगइन्स के साथ, आप काम करने के लिए शैलियों की एक विशाल विविधता पा सकते हैं, जिसे आप अपनी प्रस्तुतियों, पोर्टफोलियो में जोड़ सकते हैं, या अपने डिज़ाइन कार्य को दिखाने के लिए केवल मनोरंजन के लिए बना सकते हैं।

एप्लिकेशन में कुछ अंतरों के साथ, Figma मॉकअप प्लग इन तक पहुंचना और उपयोग करना आसान है, तो क्यों न इसे आज़माएं?

Figma में प्रस्तुतियों के लिए मास्टर टेम्पलेट कैसे बनाएं

आगे पढ़िए