किसी भी वेबसाइट को फिग्मा डिजाइन में कैसे बदलें

Figma एक बेहतरीन टूल है जो तेजी से UX/UI और वेब डिजाइनरों के बीच पसंदीदा बन रहा है। आप इस मुफ्त ब्राउज़र-आधारित टूल का उपयोग करके उत्तरदायी वेब डिज़ाइन जल्दी और आसानी से बना सकते हैं।

जबकि अधिकांश लोग Figma में अपने डिजाइनों को स्क्रैच से बनाते हैं, आप वास्तविक वेबसाइटों से प्रेरित हो सकते हैं और मौजूदा HTML पेज से आसानी से सीधे Figma डिजाइन बना सकते हैं। यहाँ यह कैसे करना है।

आपको HTML से Figma डिज़ाइन क्यों बनाने चाहिए

एक मौजूदा वेब डिज़ाइन को Figma डिज़ाइन के रूप में दोहराने के कई कारण हो सकते हैं। फिग्मा प्लगइन के माध्यम से ऐसा करने से समय की बचत होती है, जिससे आप अपने डिजाइन को ठीक करने पर ध्यान केंद्रित कर सकते हैं।

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

अब जब आप जान गए हैं कि यह टूल उपयोगी क्यों हो सकता है, तो यह सीखने का समय है कि यह कैसे काम करता है।

किसी भी वेबसाइट को फिग्मा डिजाइन में कैसे बदलें

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

एक खोलो नई डिजाइन फ़ाइल अपना HTML to Figma डिजाइन प्रोजेक्ट शुरू करने के लिए।

चरण 1: html.to.design प्लगइन डाउनलोड करें

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

प्लगइन डाउनलोड करने के लिए, का चयन करें फिग्मा मेनू (फिग्मा लोगो) > प्लग-इन > अधिक प्लगइन्स खोजें. वैकल्पिक रूप से, आप चुन सकते हैं संसाधन > प्लग-इन. किसी भी विकल्प से, सर्च बार में टाइप करें html.to.डिजाइन.

divRIOTS द्वारा प्रदान किया गया विकल्प खोजें और चुनें दौड़ना. यह प्लगइन को आपके Figma कैनवास पर एक डायलॉग बॉक्स के रूप में खोलता है।

चरण 2: वेबसाइट URL पेस्ट करें

html.to.design प्लगइन मुफ़्त है, लेकिन यह एक प्रो संस्करण प्रदान करता है। आप अपनी डिजाइन प्रक्रिया को पूरी तरह से मुफ्त संस्करण के साथ पूरा कर सकते हैं।

वह वेबसाइट ढूंढें जिसका आप फिग्मा डिजाइन बनाना चाहते हैं। आपको एक सार्वजनिक वेबसाइट का उपयोग करना चाहिए—एक वेब पेज का नहीं जिसे केवल लॉग इन करके ही एक्सेस किया जा सकता है। हम अपने होमपेज, MakeUseOf.com का उपयोग करने जा रहे हैं।

पूरे URL को कॉपी करें और इसे Apple वेबसाइट प्लेसहोल्डर की जगह Figma के इम्पोर्ट बॉक्स में पेस्ट करें।

चरण 3: अपना डिज़ाइन लोड करें

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

डिवाइस या आकार के लिए कस्टम विकल्प भी हैं जो डिफ़ॉल्ट विकल्प के रूप में उपलब्ध नहीं हैं। हम चुन रहे हैं मैकबुक प्रो 14” के साथ रोशनी थीम।

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

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

किसी भी पॉप-अप से बाहर निकलें, फिर अपने नए डिज़ाइन को पूर्ण रूप में देखने के लिए प्लगइन डायलॉग से बाहर निकलें।

चरण 4: अपने फिग्मा डिजाइन को संपादित करें

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

बाएं मेनू पर, आपको परतें मिलेंगी। चूँकि इसे सीधे HTML से रूपांतरित किया गया है, इसलिए परतें अधिक विस्तृत हो सकती हैं—या यहाँ तक कि भ्रमित करने वाली—उससे भी अधिक हो सकती हैं जो आप स्वयं डिज़ाइन करते समय करते थे। बाएँ मेनू पर हाइलाइट की गई परतों को खोजने के लिए डिज़ाइन में एक अनुभाग चुनें।

आप डिज़ाइन पहलू पर डबल-क्लिक करके छवियों को बदल सकते हैं, शीर्षक और बॉडी टेक्स्ट को फिर से टाइप कर सकते हैं या लेआउट के भीतर चीजों को स्थानांतरित कर सकते हैं। लिंक पर क्लिक करने या पृष्ठ बदलने पर html.to.figma प्लगइन एनीमेशन या संक्रमण सेटिंग्स को दोहराता नहीं है। आप उन्हें अपने आप जोड़ सकते हैं।

कैसे एक निजी वेबपेज कन्वर्ट करने के लिए

एक निजी वेबसाइट बनाने की अधिकांश प्रक्रिया—जिस तक पहुँचने के लिए एक खाते की आवश्यकता होती है—बनाम एक सार्वजनिक वेबपेज समान है। हालाँकि, URL चिपकाने के बजाय, आपको इसके बजाय एक क्रोम एक्सटेंशन का उपयोग करना चाहिए जो एक फ़ाइल बनाता है।

शुरू करने के लिए, Figma और html.to.figma प्लगइन को पहले की तरह ही खोलें।

चरण 1: क्रोम एक्सटेंशन डाउनलोड करें और चलाएं

आप इस एक्सटेंशन का उपयोग केवल Google क्रोम के साथ कर सकते हैं, इसलिए शुरू करने के लिए क्रोम खोलें। Figma प्लगइन संवाद बॉक्स से, चयन करें क्रोम एक्सटेंशन-या यहां एक्सटेंशन खोलें आपके क्रोम ब्राउज़र पर।

चुनना क्रोम में जोड़ > एक्सटेंशन जोड़ने अपने ब्राउज़र में एक्सटेंशन जोड़ने के लिए।

जोड़े गए एक्सटेंशन के साथ, उस निजी वेबसाइट या पेज पर नेविगेट करें, जिसके डिज़ाइन को आप दोहराना चाहते हैं—हम एक Instagram पेज का उपयोग कर रहे हैं—और एक्सटेंशन का चयन करें। संकुचित एक्सटेंशन आपके ब्राउज़र में पहेली टुकड़ा आइकन के अंतर्गत पाए जाते हैं।

यह पूछेगा कि क्या आप पूरे पृष्ठ को कैप्चर करना चाहते हैं या केवल देखने में क्या है। अपना चयन करें और फिर कैप्चर आपके डाउनलोड में एक .h2d फ़ाइल के रूप में दिखाई देगा।

चरण 2: जनरेट की गई फ़ाइल को Figma प्लगइन में खींचें

अपने Figma ऐप या अपने ब्राउज़र पर Figma साइट पर जाएं और अपनी डाउनलोड की गई .h2d फ़ाइल को बॉक्स में खींचें। फ़ाइल सार्वजनिक वेबसाइट विकल्प की तरह ही लोड और उत्पन्न होगी।

सार्वजनिक वेबपेज संस्करण की तरह, आप उन्हें संपादित करने के लिए डिज़ाइन के पहलुओं पर डबल-क्लिक कर सकते हैं या बाएं हाथ के मेनू के माध्यम से क्लिक करके देख सकते हैं कि वे लेआउट में कहाँ दिखाई देते हैं।

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

अपने फिग्मा डिजाइनों में प्रेरणा के लिए किसी भी वेबसाइट का उपयोग करें

जबकि Figma मुख्य रूप से वेबसाइटों या UX/UI पेजों को स्क्रैच से डिजाइन करने के लिए है, यह मौजूदा वेब पेजों को पॉप्युलेट करने का एक शानदार अवसर है, यह देखने के लिए कि वे कैसे बनाए गए थे। यदि आप सुनिश्चित नहीं हैं कि खाली स्लेट से कहां से शुरू किया जाए, तो आप अपने वेब डिज़ाइन को किसी मौजूदा साइट की प्रतिकृति भी बना सकते हैं।

आपको html.to.figma प्लगइन का उपयोग करने का एक और बड़ा कारण यह है कि यदि आपने पहले से ही एक ऐसी वेबसाइट डिज़ाइन की है जिस तक आपकी पहुंच नहीं है। आप पृष्ठ को Figma में पॉप्युलेट कर सकते हैं और वास्तव में फिर से शुरू किए बिना फिर से शुरू कर सकते हैं।