एआई उपकरण अब सभी गुस्से में हैं। किसी भी नए एआई टूल के बारे में खबर पाए बिना किसी भी सोशल मीडिया प्लेटफॉर्म को खोलना मुश्किल है जो लॉन्च किया गया है या एआई कैसे लाखों नौकरियां छीन लेगा।

चूँकि ChatGPT कई व्यवसायों में मूल्यवान साबित हुआ है और केवल आगे बढ़ने की उम्मीद है, मैंने इसकी क्षमताओं और सीमाओं का परीक्षण करने का निर्णय लिया। एक ऐसे व्यक्ति के रूप में जिसने इंजीनियरिंग से डिजाइन में परिवर्तन किया है , मुझे कोडिंग का मध्यम ज्ञान है लेकिन यह मेरा मजबूत पक्ष कभी नहीं था। मैं यह देखने के लिए उत्सुक था कि क्या चैटजीपीटी मेरे जैसे किसी व्यक्ति की सहायता कर सकता है, जिसे कार्यात्मक एप्लिकेशन या वेबसाइट बनाने में न्यूनतम कोडिंग ज्ञान है ।

विचार मंथन

मैं समझता हूं कि चैटजीपीटी वर्तमान में कई विशेषताओं के साथ व्यापक कोड उत्पन्न नहीं कर सकता है। इसलिए, मैं सरल विचारों की तलाश कर रहा था, जिन्हें चैटजीपीटी का उपयोग करके वास्तविकता में बदला जा सके। एक डिजाइनर के रूप में, मैं स्वाभाविक रूप से एक Figma प्लगइन बनाने की ओर प्रवृत्त हुआ ।

मैंने हाल ही में एक वेब डिज़ाइन प्रोजेक्ट पर काम किया है और मुझे Figma में अपने फ्रेम में 12-कॉलम ग्रिड की आवश्यकता है। वेब पेज डिजाइन करने के लिए 12-कॉलम ग्रिड का उपयोग करना कई डिजाइनरों के लिए एक आम बात है। यह घटकों को संरेखित करने और वेबसाइट को संरचित करने में मदद करता है। हालाँकि, Figma में 12-स्तंभ ग्रिड बनाने के लिए कई क्लिक और विशिष्ट मान दर्ज करने की आवश्यकता होती है। मैं उस प्रक्रिया को सरल बनाना चाहता था जो केवल एक क्लिक से ग्रिड का निर्माण करती है।

ChatGPT के साथ प्रयोग करने के लिए यह एकदम सही विचार लगा।

एक डिज़ाइनर के रूप में, मुझे नहीं पता था कि Figma प्लगइन के विकास की शुरुआत कैसे की जाए। मैंने ऑनलाइन देखा और मुझे नीचे दिए गए स्रोत मिले जिन्होंने मुझे प्रक्रिया में मदद की:

स्रोत जिन्होंने मुझे आरंभ करने में मदद की

https://medium.com/ux-planet/i-built-a-figma-plugin-with-just-chatgpt-no-coding-needed-7d94958e0ec

कोड करने का समय

मैंने चैटजीपीटी के साथ शुरुआत की और नीचे दिए गए संकेत में प्रवेश किया।

"आप एक विशेषज्ञ डेवलपर हैं, जिनके पास Figma प्लगइन्स विकसित करने का अनुभव है।

कृपया एक Figma प्लगइन के लिए कोड के साथ मेरी मदद करें जो एक फ्रेम के लिए ग्रिड को चालू करता है। ग्रिड में 20 के गटर और 200 के मार्जिन के साथ 12 कॉलम होने चाहिए। ग्रिड का रंग 10% अपारदर्शिता के साथ लाल होना चाहिए। प्लगइन को किसी UI की आवश्यकता नहीं है। उपयोगकर्ता द्वारा रन पर क्लिक करने के बाद उपयोगकर्ता द्वारा फ्रेम का चयन करने के बाद इसे निष्पादित किया जाना चाहिए।

वाह! मैं इस बात से हैरान था कि पहली कोशिश में कोड कितना सही था, भले ही संकेत कई व्याकरण संबंधी त्रुटियों के साथ पूरी तरह से स्पष्ट नहीं था।

Figma में प्लगइन का परीक्षण करने का समय।

दुर्भाग्य से, Figma. में निष्पादित होने पर प्लगइन के परिणामस्वरूप एक त्रुटि हुई

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

आगे और पीछे जाने और कोड को कई बार फिर से जनरेट करने के बाद, प्लगइन अंत में निष्पादित हुआ।

लेकिन,

नतीजा उम्मीद के मुताबिक नहीं था।

इसमें कुछ चीजें ठीक थीं, जैसे कि रंग और गटर, लेकिन कॉलम खुद बहुत पतले थे।

मैंने चैटजीपीटी से फिर से कोड को संशोधित करने के लिए कहा ताकि दोनों तरफ 200px के मार्जिन के साथ ग्रिड गतिशील रूप से फ्रेम के शेष क्षेत्र पर कब्जा कर ले।

इसने फिर से गलत कोड जनरेट करना शुरू कर दिया। प्रॉम्प्ट को ट्वीक करने और इसे कई बार पुन: उत्पन्न करने के बाद भी, मुझे वही त्रुटियाँ मिल रही थीं जो मुझे पहले मिली थीं। मैं इस बिंदु से थक गया था।

बचाव के लिए मेरा सीमित कोडिंग कौशल!

चूंकि मैं यहां तक ​​आया था, इसलिए मैं हार नहीं मानना ​​चाहता था। कोडिंग में कुछ अनुभव होने के बाद, मैंने मामलों को अपने हाथों में लेने का फैसला किया।

मैंने ऑनलाइन खोज की और फिग्मा एपीआई दस्तावेज पाया । मैंने ग्रिड के गुणों की जांच की और मुझे वही मिला जो मुझे चाहिए था।

उपलब्ध स्थान को गतिशील रूप से भरने के लिए "संरेखण" संपत्ति में 'STRETCH' मान होना चाहिए।

जैसा कि उल्लेख किया गया है, जब "संरेखण" को 'स्ट्रेच' पर सेट किया जाता है, तो "अनुभाग आकार" की आवश्यकता नहीं होती है।

मैंने तदनुसार बदलाव किए और इसे फिर से परीक्षण किया।

इस बार इसने काम किया!

मैं परिणाम से बेहद खुश था लेकिन महसूस किया कि अभी भी सुधार की गुंजाइश है।

जैसा कि मैंने ग्रिड के दोनों ओर 200px ऑफ़सेट दिया था, यह सभी आकारों के फ़्रेमों के साथ अच्छी तरह से काम नहीं करता है। मैं चाहता हूं कि ग्रिड आकार में गतिशील हो और किसी भी फ्रेम की 75% चौड़ाई पर कब्जा कर ले ।

मैं ChatGPT से पूछना नहीं चाहता था और फिर से परीक्षण और त्रुटि प्रक्रिया से गुजरना चाहता था। यह एक साधारण परिवर्तन था - मैंने एक स्थिर मान देने के बजाय ऑफ़सेट के लिए एक सूत्र जोड़ा।

मैंने ऑफ़सेट के लिए फ़ॉर्मूला (फ्रेम.चौड़ाई)*0.125 के रूप में सेट किया है।

यह ऐसे काम करता है:

मान लीजिए कि फ्रेम की चौड़ाई 1920px है। इस मामले में ऑफ़सेट ग्रिड के दोनों ओर 1920*0.125 = 240px होगा ⇒ 240*2 = 480px

इसलिए, ऑफ़सेट 480px (1920 का 25%) और ग्रिड 1440px (1920 का 75%) है।

मैंने गटर को 24px में भी बदल दिया क्योंकि यह अधिक व्यापक रूप से उपयोग किया जाता है और रंग चैती है। यहाँ अंतिम परिणाम है:

Figma के लिए प्लगइन प्रकाशित करना

मैंने आवश्यक विवरण दर्ज किया (प्लगइन का नाम, विवरण, आइकन, आदि) और फिग्मा समुदाय के लिए प्लगइन प्रकाशित किया।

मुझे संदेह था कि यह Figma द्वारा अनुमोदित होगा या नहीं लेकिन मेरे आश्चर्य के लिए यह 2 घंटे के भीतर स्वीकृत हो गया।

प्लगइन से लिंक करें

बस एक फ्रेम का चयन करें और "रन" पर क्लिक करें।

प्रमुख सीख और चुनौतियों का सामना करना पड़ा।

• जबकि चैटजीपीटी कई संभावित अनुप्रयोगों के साथ बेहद शक्तिशाली है, फिर भी बेहतर परिणाम प्राप्त करने के लिए मैन्युअल हस्तक्षेप की आवश्यकता होती है।
• विभिन्न क्षेत्रों में बुनियादी ज्ञान रखने और चैटजीपीटी की सहायता लेने से हमें ऐसे परिणाम प्राप्त करने में मदद मिल सकती है जो अकेले प्राप्त करना असंभव होगा।
• ChatGPT एक ही संकेत के लिए आउटपुट के कई संस्करण उत्पन्न करता है, जिसमें कभी-कभी गलत प्रतिक्रियाएँ शामिल हो सकती हैं। उपयोग करने से पहले प्रत्येक आउटपुट की सटीकता की सावधानीपूर्वक समीक्षा और विचार करना महत्वपूर्ण है।
• शीघ्र इंजीनियरिंग भविष्य के लिए एक महत्वपूर्ण कौशल है। आपके विवरण जितने सटीक होंगे, चैटजीपीटी उतने ही बेहतर परिणाम देगा।

किसी भी प्रश्न/सुझाव/प्रतिक्रिया के मामले में बेझिझक मुझसे संपर्क करें। मैं लिंक्डइन पर जुड़कर खुश हूं।

https://www.linkedin.com/in/naren-abbaraju/