👩‍👧‍👧 👙 🧕🏻 Figmiro। Figma के लिए एक प्लगइन बनाना (और Miro के लिए थोड़ा सा) 🍼 📸 💍

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

हमारी टीम ने उत्साहपूर्वक इस विचार को वास्तविकता में बदलना शुरू कर दिया, यह विशेष रूप से एक सभ्य जैकपॉट प्राप्त करने के अवसर से गरम किया गया था, क्योंकि, परिस्थितियों के एक पूरी तरह से यादृच्छिक सेट से, हमने मिरो के प्लग-इन प्रतियोगिता के पूरा होने से पहले जल्द ही प्लग-इन बनाने का काम शुरू कर दिया था ।

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

विशेष रूप से, अगस्त 2019 में, रोबोट ने एक बड़ी ई-कॉमर्स कंपनी की साइट पर काम करना शुरू कर दिया। स्केच के साथ काम करने के लिए पारंपरिक परिदृश्य इस प्रकार था: हम एक विशेष प्लग का उपयोग करके स्केच से लेआउट को अनलोड करते हैं- मिरो में और क्लाइंट टीम के साथ उन पर चर्चा करते हैं। हम परियोजना के लिए सभी सामग्रियों के भंडार के रूप में मिरो का उपयोग करते हैं। टिप्पणियों के साथ काम करना और स्क्रीन मैप्स (तीर की व्यवस्था) में बदलाव लाना सुविधाजनक है।

इस परियोजना पर लगभग 450 लेआउट थे। संपादन एक बार में नहीं आया, दिन में कई बार हमने मामूली बदलाव के साथ लेआउट को अनलोड किया। फिगमा में सभी अनलोडिंग मैन्युअल रूप से आवश्यक प्लग-इन की कमी के कारण हुई, निर्यात किया गया पीएनजी / जेपीजी, बचाया, मिरो में गिरा दिया गया, सही क्रम में बाहर रखा गया।

पाठ को बदलें - एक मिनट, अनलोड - 20 मिनट से एक घंटे तक। 15 लेआउट्स में एक (!) वर्ड को बदलने के लिए, डिजाइनरों ने पूरे एक घंटे का समय बिताया। हमने महसूस किया कि हमारे डिजाइनरों और कला निर्देशकों के समय और तंत्रिका कोशिकाओं को बचाने के लिए निर्यात को स्वचालित करने की आवश्यकता है।

इसलिए, टाइपस्क्रिप्ट, प्रतिक्रिया और मोबाइल के साथ सशस्त्र (धन्यवाद, कूल टूल्स का उपयोग करने के अवसर के लिए फिमा), हमने प्लगइन पर काम करना शुरू कर दिया।

प्रारंभ में, हमारी आशावादी मान्यताओं के अनुसार, एक सप्ताह के लिए काम किया गया था, अधिकतम दो - कार्य केवल स्केच के लिए मिरो प्लगिन की सभी विशेषताओं को फिमा रेल में स्थानांतरित करना था ।

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

बाधा संख्या बार: REST API Miro

चूंकि Figma एक वेब एप्लिकेशन है (डेस्कटॉप के लिए इलेक्ट्रॉन का उपयोग किया जाता है), हमने महसूस किया कि हमारा प्लगइन एक ब्राउज़र वातावरण में काम करेगा। इस प्रकार, सभी अनुरोध जो हम Miro के REST API को भेजेंगे, वह CORS ब्राउज़र नीतियों के अधीन होगा ।

और इसका मतलब यह है कि यदि हम शरीर के साथ आवेदन / json प्रारूप (उदाहरण के लिए, प्राधिकरण के लिए) के साथ एक अनुरोध भेजना चाहते हैं और सर्वर इस अनुरोध को "पसंद" नहीं करता है, तो सर्वर से प्रतिक्रिया हमें "भेज" देगी। हमारे मामले में, यह हुआ।

इसलिए, नोड पर अपनी प्रॉक्सी लिखने का फैसला किया गया था। जेएस, जो हमारी इच्छाओं के लिए सहानुभूति होगी, लॉगिन / पासवर्ड द्वारा अधिकृत। ऐसा करने के लिए, प्रॉक्सी एक्सप्रेस के लिए प्रसिद्ध मिडलवेयर कॉर्स का उपयोग करता है ।

बाधा संख्या दो: फिर से एपीआई एपीआई Miro

Miro REST API पर आधिकारिक प्रलेखन का अध्ययन करने और इसके आधार पर Figma से Miro तक छवियों को निर्यात करने के हमारे विचार को लागू करने की कोशिश की, हमने महसूस किया कि Miro में उपलब्ध विगेट्स की पूरी विविधता से (विगेट्स द्वारा हम स्टिकर, आकार, पाठ, आदि का मतलब है) REST इंटरफ़ेस हमें चित्र के साथ हमारी रुचि का विजेट बनाने की अनुमति नहीं देता है। इसका मतलब यह है कि जिन लेआउट्स को हमने Figma स्तर पर PNG में सफलतापूर्वक परिवर्तित किया है, हम Miro में वांछित बोर्ड को नहीं भेज सकते हैं।

लेकिन फिर उन्हें स्केच के लिए एक समान प्लगइन के बारे में याद आया, जो किसी तरह जानता है कि इस तरह के निर्यात को कैसे करना है। यह निर्णय लिया गया है, तो बात करने के लिए, sketch_plugin स्रोत कोड को सहयोगियों और नज़र से अनुभव पर कब्जा करने, Miro से लोग कृपया पर स्रोत कोड तैनात बाद से Github । और फिर एक ही बार में कई चीजें सामने आईं:

दूरदर्शितापूर्ण सदी में, हम स्केच के लिए प्लगइन्स बनाने की योजना नहीं बनाते हैं, क्योंकि स्केच प्लग को विकसित करने के लिए ऑब्जेक्टिव-सी और जेएस से फ्रेंकस्टीन, स्रोत को देखते हुए स्क्वायर ब्रैकेट की संख्या की आंखों में अनुमानित तरंगों का अनुमान लगाते हैं;

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

स्केच प्लगइन एक अलग एपीआई का उपयोग करता है, जो यहां उपलब्ध है । यह एपीआई Miro में चयनित बोर्ड पर चित्र बनाने की क्षमता प्रदान करता है। यह एक प्लस है। नकारात्मक पक्ष यह है कि हमें इस पर प्रलेखन नहीं मिला।

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

बाधा संख्या तीन: प्रदर्शन

प्लगइन के पहले बीटा परीक्षण के दौरान, यह पता चला कि उपयोगकर्ता अक्सर अंजीर से मिरो तक छवियों के निर्यात की लंबी प्रक्रिया से नाखुश हैं। उदाहरण के लिए, लगभग 3 मिनट, 30 लेआउट अनलोड किए गए थे। इन बॉडी को सर्वर से रिक्वेस्ट भेजकर इन 3 मिनटों में से लगभग 70% समय निकाला गया।

जैसा कि यह निकला, हमारा फकैप यह था कि हमारे प्रॉक्सी एप्लिकेशन / जोंस का उपयोग छवियों और मेटा-डेटा के लिए अपेक्षित प्रारूप के रूप में किया गया था और इन चित्रों को स्वयं UInt8Array के रूप में स्थानांतरित किया गया था। स्वाभाविक रूप से, हमने मल्टीपार्ट / फॉर्म-डेटा के लिए अपेक्षित प्रारूप को बदल दिया, और अब वही 30 लेआउट स्वीकार्य 50 सेकंड में लोड किए गए थे। बेशक, अभी भी बढ़ने की गुंजाइश है, लेकिन कम गति 3 गुना बढ़ गई है, और यह हमारी छोटी जीत थी।

बाधा संख्या चार: बढ़त परिदृश्य

ऐसा लगता था कि प्लगइन उपयोग परिदृश्यों को अपमानित करने के लिए सरल था, लेकिन काम करने की प्रक्रिया में, हमने प्लगइन के संचालन की एक बड़ी संख्या में अनप्रोसेस्ड एज स्टेट्स का सामना किया, जिसके साथ कुछ किया जाना था।

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

बाधा संख्या पांच: प्राधिकरण

यदि आप अचानक फिम्मा के लिए एक प्लगइन लिखना चाहते हैं, तो इस तथ्य के लिए तैयार रहें कि तृतीय-पक्ष सेवाओं (Google, facebook, slack, आदि) के माध्यम से प्राधिकरण आपको उपलब्ध नहीं होगा, क्योंकि Figma में प्लगइन्स iframes के माध्यम से काम करते हैं, और outh प्रोटोकॉल फ्लोटिंग फ़्रेम के माध्यम से प्राधिकरण का पक्ष नहीं लेते हैं कुछ सुरक्षा नीतियों की ताकत (विशेष रूप से, क्लिकजैकिंग हमलों को रोकने के लिए )।

हमारे प्लगइन के संदर्भ में इसका क्या मतलब है? इसका मतलब यह है कि जो उपयोगकर्ता थर्ड-पार्टी सेवाओं के माध्यम से मिरो में पंजीकृत हैं, वे उपयोगकर्ता नाम / पासवर्ड का उपयोग करके प्लग इन के माध्यम से लॉग इन नहीं कर पाएंगे और इच्छित बोर्ड का चयन कर सकते हैं, जहां आप Figma से लेआउट निर्यात करना चाहते हैं। और वे ऐसा करने में सक्षम नहीं होंगे, क्योंकि तीसरे पक्ष की सेवाओं के माध्यम से पंजीकरण करते समय, Miro भविष्य के उपयोगकर्ता खाते के लिए केवल ईमेल सेट करता है, लेकिन पासवर्ड नहीं।

हमारे द्वारा चुना गया वर्कअराउंड बहुत सरल है: हम प्लगइन के उपयोगकर्ता को चेतावनी देते हैं कि यदि वह Miro में किसी थर्ड-पार्टी सर्विस के माध्यम से पंजीकृत है और उसके पास पासवर्ड नहीं है, तो उसे पासवर्ड प्राप्त करने या पुनर्स्थापित करने के लिए मानक फ़ंक्शन "ईमेल द्वारा पासवर्ड रिकवरी" का उपयोग करने की आवश्यकता है।

नतीजतन, हमने सफलतापूर्वक मिरो के साथ प्रतिस्पर्धा करने का प्रबंधन नहीं किया। 2 सप्ताह के विकास में आशावादी आकलन भौतिक नहीं था और 2 महीने में बढ़ गया, क्योंकि हम अपने खाली समय में इस परियोजना में शामिल थे।

स्थिति में वृद्धि को जोड़ा गया तथ्य यह है कि जब हम तकनीकी समस्याओं को हल कर रहे थे, तो Miro ने घोषणा कीविजेता, जिनके बीच एक समान Figma2Miro प्लगइन के साथ Semyon Volkov और रोमन Krasilnikov थे। उनके प्रोजेक्ट ने छठा स्थान लिया। हमारे कार्यान्वयन के विपरीत, जो अभी भी एक Figma प्लगइन के अधिक था (UI के दृष्टिकोण से और मंच जो निर्यात शुरू करता है), उन्होंने Miro के लिए प्लगइन बनाया।

लेकिन, दुर्भाग्य से, लोगों द्वारा बनाए गए समाधान रोबोट की जरूरतों को पूरा नहीं करते थे, और यही कारण है कि हमने अपने प्लग-इन पर काम करना जारी रखा, जो जल्द ही तैयार था। प्लगइन को Figmiro कहा जाता है।

अब, फिगमारो के लिए धन्यवाद, हमारे डिजाइनर एक सिस्टम से दूसरे सिस्टम में लेआउट आयात करने में बहुत समय बचा रहे हैं। उदाहरण के लिए, सर्गेई कुटकोव के एक उद्धरण से अनलोडिंग लेआउट का वह घंटा 2 (!) मिनट में बदल गया।

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

Figmiro प्लगइन क्या कर सकता है

सब कुछ वैसा ही काम करता है जैसा हम स्केच में करते थे: फ़्रेम चुनें, बटन पर क्लिक करें, और Miro में लेआउट दिखाई देते हैं:

चयनित फ़्रेम को Miro में चयनित बोर्ड पर अपलोड करें।
बोर्डों पर एक स्थिति बनाए रखते हुए पहले से लोड किए गए लेआउट को ओवरराइट करना।

भविष्य में, हम प्लगइन का समर्थन करने और इस तरह से अपने काम का अनुकूलन करने की योजना बनाते हैं ताकि अनलोडिंग और सिंक्रनाइज़ेशन की प्रक्रिया को गति मिल सके। यदि Miro अपने API को अपडेट करता है, तो हम इसके लिए प्लगइन का पुनर्निर्माण करेंगे।

Figmiro प्लगइन ने काम किया

डिजाइनर एंटोन मैगार्टसोव, अग्रणी आईओएस डेवलपर रोमन चुरकिन, फ्रंटेंड डेवलपर्स एंटोन एरीशेव और इल्या क्रुपनोव, सर्वर डेवलपमेंट मैनेजर आंद्रेई मुराव्योव और कला निर्देशक सर्गेई कुटकोव।

सभी लिंक:

में प्लगइन Github ,
में प्रॉक्सी Github ,
में प्लग इन Figma ।

हम GitHub पर प्लगइन के संचालन पर प्रतिक्रिया एकत्र कर रहे हैं ।

PS
हम जानते हैं कि सेवाओं के लिए सार्वजनिक एपीआई बनाना कितना कठिन है, जबकि इन एपीआई के उपयोगकर्ताओं की सभी जरूरतों को पूरा करना।

Redmadrobot टीम हमारी नियमित व्यावसायिक प्रक्रियाओं को स्वचालित करने के अवसर के लिए Miro और Figma के लोगों की आभारी है।

Figmiro। Figma के लिए एक प्लगइन बनाना (और Miro के लिए थोड़ा सा)