FigmaGen: iOS ऐप में स्टाइल ऑटोमेशन

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

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

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

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

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

हमने शैलियों के लिए फिम्मा में एक छोटी डेमो फ़ाइल तैयार की है, जो संदर्भ द्वारा उपलब्ध है और इस तरह दिखती है:

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

figmagen generate 

वर्तमान में, FigmaGen रंग और पाठ शैलियों की पीढ़ी का समर्थन करता है, जिसके परिणामस्वरूप निम्नानुसार उपयोग किया जा सकता है:

 titleLabel.attributedText = "Hello world".styled( .title2, textColor: Colors.imperial ) view.backgroundColor = Colors.whiteSmoke 

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

स्थापना

FigmaGen स्थापना ऐसे उपकरणों के लिए मानक है, और कई बुनियादी तरीके हैं:

• कोकोपोड्स : पॉडफाइल में pod 'FigmaGen' लाइन pod 'FigmaGen' को Podfile और pod install --repo-update कमांड को रन करें।
• Homebrew : brew install hhru/tap/FigmaGen ।
• मैन्युअल रूप से डाउनलोड और रिपोजिटरी से नवीनतम रिलीज के ज़िप संग्रह को अनज़िप करें।

कोकोआपोड्स का उपयोग करते हुए इंस्टॉलेशन के मामले में, जेनरेशन कमांड को Pods/FigmaGen में पथ शामिल करना चाहिए:

 Pods/FigmaGen/figmagen generate 

CocoaPods का उपयोग करके इंस्टॉल करना अनुशंसित तरीका है, क्योंकि यह आपको टीम के सभी मशीनों पर FigmaGen के संस्करण को ठीक करने की अनुमति देता है।

विन्यास

FigmaGen को कॉन्फ़िगर करने के लिए, आपको प्रोजेक्ट रूट फ़ोल्डर में .figmagen.yml फ़ाइल .figmagen.yml होगी। यदि आवश्यक हो, तो आप पीढ़ी कमांड के --config पैरामीटर में एक अलग पथ निर्दिष्ट कर सकते हैं, उदाहरण के लिए:

 figmagen generate --config 'MyFolder/figmagen.yml' 

कॉन्फ़िगरेशन फ़ाइल स्वयं YAML प्रारूप में है और इसे कई खंडों में विभाजित किया गया है:

• base : सभी अन्य वर्गों के लिए प्रासंगिक बुनियादी पैरामीटर। इस खंड से किसी भी पैरामीटर को पीढ़ी उपकमांड को स्वयं कॉन्फ़िगर करने के लिए ओवरराइड किया जा सकता है।
• colors : रंग पीढ़ी subcommand के लिए विकल्प।
• textStyles : पाठ शैली निर्माण के लिए विकल्प textStyles ।

हालाँकि, यदि सबमिशन से जेनरेशन का कोई भी सेक्शन अनुपलब्ध है, तो यह सबकॉमैंड स्किप हो जाएगा।

बुनियादी मापदंडों

कॉन्फ़िगरेशन में कुछ क्षेत्रों की नकल न करने के लिए, हमने उन्हें एक अलग base सेक्शन में चुना, जिसमें प्रत्येक पीढ़ी के लिए प्रासंगिक पैरामीटर शामिल हैं:

• accessToken : Figma एक्सेस टोकन के साथ स्ट्रिंग।
• fileKey : फ़ाइल पहचानकर्ता Figma के साथ लाइन।

इन मापदंडों का उपयोग उन पीढ़ी उप-कमानों द्वारा किया जाता है जिनके लिए वे परिभाषित नहीं हैं, उदाहरण के लिए:

 base: accessToken: 27482-71b3313c-0e88-481b-8c93-0e465ab8a868 colors: fileKey: ZvsRf99Ik11qS4PjS6MAFc textStyles: fileKey: D1rfFI220qwaG8fD8iBqWa 

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

पहुंच टोकन

फिगमा फाइल प्राप्त करने के लिए, प्राधिकरण की आवश्यकता होती है, जिसे एक निजी एक्सेस टोकन स्थानांतरित करके किया जाता है। इस तरह के एक टोकन को कुछ सरल चरणों में बनाया जा सकता है:

• अंजीर में खाता सेटिंग्स खोलें।
• "व्यक्तिगत एक्सेस टोकन" अनुभाग में "एक नया व्यक्तिगत एक्सेस टोकन बनाएं" बटन पर क्लिक करें।
• बनाया जा रहा टोकन के लिए एक विवरण दर्ज करें (उदाहरण के लिए, "FigmaGen")।
• बनाए गए टोकन को क्लिपबोर्ड पर कॉपी करें।

अगला, आपको कॉन्फ़िगरेशन के accessToken क्षेत्र में प्राप्त टोकन सम्मिलित करने की आवश्यकता है। यदि यह टोकन कॉन्फ़िगरेशन में दिखाई देने वाली सभी Figma फ़ाइलों तक पहुंच की अनुमति देता है, तो यह केवल base अनुभाग में इसे परिभाषित करने के लिए पर्याप्त है।

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

Figma फ़ाइलें

FigmaGen अपने मानक पहचानकर्ता द्वारा Figma फ़ाइल का अनुरोध करता है, जिसे ब्राउज़र के एड्रेस बार में URL से प्राप्त किया जा सकता है।

सामान्य तौर पर, इस URL में निम्नलिखित प्रारूप हैं:

 https://www.figma.com/file/<>/<>?node-id=<  > 

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

जनरेशन सेटिंग्स

बुनियादी मानकों के अलावा, प्रत्येक पीढ़ी के उप-मानक के लिए निम्न सेटिंग्स निर्धारित करना आवश्यक है:

• destinationPath : उत्पन्न फ़ाइल को बचाने के लिए पथ।
• templatePath : स्टैंसिल टेम्पलेट फ़ाइल का पथ। यदि पैरामीटर छोड़ा गया है, तो मानक टेम्पलेट का उपयोग किया जाएगा।
• includingNodes : फ़्रेम पहचानकर्ता जिनका उपयोग कोड बनाते समय किया जाना चाहिए। यदि यह पैरामीटर छोड़ा गया है, तो फ़ाइल के सभी नोड्स का उपयोग किया जाएगा।
• excludingNodes : फ़्रेम के पहचानकर्ता जिन्हें कोड बनाते समय अनदेखा किया जाना चाहिए। यदि इस पैरामीटर को छोड़ दिया जाता है, तो शामिल किए गए सभी फाइल फ्रेम में includingNodes किया जाएगा।

उदाहरण के लिए, पाठ शैलियों को बनाने के लिए सेटिंग्स निम्नानुसार हो सकती हैं:

 textStyles: destinationPath: Sources/Generated/TextStyle.swift templatePath: Templates/TextStyles.stencil includingNodes: - 7:24 - 3:19 ... 

इस विन्यास के साथ, केवल उन पाठ शैलियों को उत्पन्न किया जाएगा जो कि "7:24" और "3:19" के साथ फ्रेम में हैं।

नोड फ़िल्टरिंग

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

• शैलियों और घटकों के नाम का व्यवस्थितकरण: इस मामले में, प्रत्येक तत्व के नाम में कुछ मेटा-जानकारी होगी, जो कि FigmaGen में तदनुसार संसाधित की गई थी।
• फ़्रेम पहचानकर्ताओं द्वारा फ़िल्टरिंग: सभी शैलियों को प्रकार और प्लेटफ़ॉर्म द्वारा अलग-अलग फ़्रेमों में वर्गीकृत किया जाता है, और इन फ़्रेमों के पहचानकर्ता FigmaGen कॉन्फ़िगरेशन में तय किए जाते हैं।

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

आप स्वयं को पहचानने के लिए ब्राउज़र के एड्रेस बार का भी उपयोग कर सकते हैं। ऐसा करने के लिए, Figma में वांछित फ्रेम का चयन करें, और node-id पैरामीटर के मूल्य में URL का अपना पहचानकर्ता होगा। दोनों परिरक्षित और अपरिभाषित पहचानकर्ताओं को कॉन्फ़िगरेशन में डाला जा सकता है।

शायद, नई कार्यक्षमता के कार्यान्वयन के लिए, उनके पहचानकर्ताओं द्वारा फ़्रेम को फ़िल्टर करना अभी भी हमारे लिए अपर्याप्त होगा। इस मामले में, हम निश्चित रूप से FigmaGen की क्षमताओं का विस्तार करेंगे यदि इस क्षण तक Figma का एक मानक समाधान प्रकट नहीं होता है, उदाहरण के लिए, घटकों के लिए टैग के रूप में।

पीढ़ी

एक अलग भंडार में एक डेमो प्रोजेक्ट लड़ाई के लिए तैयार है, आप इसे डाउनलोड कर सकते हैं और प्रयोग करने के लिए स्वतंत्र महसूस कर सकते हैं। इसमें CocmaPods का उपयोग करके FigmaGen स्थापित किया गया है, इसलिए आपको पहले pod install कमांड को चलाना चाहिए। सुविधा के लिए, निर्माण चरण में जेनरेशन कमांड को एक कॉल जोड़ा गया है, और इसमें से प्रत्येक रन सभी उत्पन्न फ़ाइलों को अपडेट करता है।

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

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

साथ ही, डेमो प्रोजेक्ट टेम्पलेट फ़ोल्डर में स्थित स्टैंसिल टेम्प्लेट को कस्टमाइज़ करने के लिए एक खेल के मैदान के रूप में एकदम सही है। आप उन्हें सीधे Xcode में संपादित कर सकते हैं और दोनों टेम्पलेट्स की शुद्धता की जाँच कर सकते हैं और कोड वे प्रोजेक्ट बिल्ड के एक रन के साथ उत्पन्न करते हैं।

परियोजना एकीकरण

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

FigmaGen स्थानीय संसाधनों का उपयोग नहीं करता है, पीढ़ी के लिए सभी डेटा Figma में है, इसलिए, प्रत्येक विधानसभा के लिए इसे कॉल करने का कोई मतलब नहीं है। एक बार और समय-समय पर कोड उत्पन्न करने के लिए बेहतर है जब घटक लाइब्रेरी के नए संस्करण दिखाई देते हैं, या जब खुद FigmaGen के संस्करण को अपडेट करते हैं।

अब हमारी परियोजना में, ऑन-ड्यूटी डेवलपर उत्पन्न कोड को अपडेट करने में लगा हुआ है। FigmaGen के अगले संस्करणों में, यह Figma फ़ाइलों के संस्करण के लिए समर्थन जोड़ने की योजना है, फिर इस प्रक्रिया को स्वचालित करना संभव हो सकता है, लेकिन यह पूरी तरह से अलग कहानी है।

संक्षेप में देना

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

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

• अंजीर फाइलिंग संस्करण
• छवि स्वचालन
• प्रकाश और अंधेरे विषयों के लिए समर्थन
• कोड पीढ़ी के लिए ढाल, छाया, स्ट्रोक आदि।

और निश्चित रूप से, इन सुविधाओं के साथ नए संस्करण बहुत जल्द दिखाई देंगे, FigmaGen रिपॉजिटरी में बने रहें।

वह सब है। हम टिप्पणियों में प्रतिक्रिया का स्वागत करते हैं। अलविदा!