Figma घटक और उदाहरण के रूप में Userpic का उपयोग कर उदाहरणों का संगठन

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

इससे हमें तत्वों की संख्या कम से कम आवश्यक हो गई। खोज आसान हो गई है, सिस्टम क्लीनर बन गया है। लेकिन क्या होगा अगर एक परियोजना अक्सर एक घटक के लिए कई शैलियों का उपयोग करती है? इसके अलावा, आपको अक्सर दो या तीन के बीच स्विच करने की आवश्यकता होती है।

Userpic

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

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

जाहिर है, हाई-एंड प्रोटोटाइपिंग के लिए एक अच्छी फिम्मा प्रणाली में , हम इन सभी राज्यों को जल्दी और आसानी से प्राप्त करना चाहते हैं। इसके अलावा, हम न्यूनतम आवश्यक घटकों के साथ रहना चाहते हैं। इसलिए, सवाल उठता है: क्या सभी राज्यों को विज़ार्ड में छिपी हुई परतों के रूप में संग्रहीत किया जाना चाहिए, या प्रत्येक राज्य को एक स्वतंत्र घटक घोषित किया जाना चाहिए?

एक उदाहरण से एक घटक बनाना

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

पेशेवरों: आप कई अंतर के साथ इंस्टेंस राज्यों को जल्दी से स्विच करने की अनुमति देता है

विपक्ष: स्पष्ट रूप से अधिक घटक, उन्हें व्यवस्थित करने में समय लगता है

मास्टर घटक के अंदर छिपी हुई परतें

इन दिनों, फिगेमा सैकड़ों उदाहरणों के साथ एक शानदार काम करता है जिसमें दर्जनों परतों के साथ 5-10 छिपे हुए समूह होते हैं और कई पृष्ठों में बिखरे हुए होते हैं। तो उत्पादकता के बारे में चिंता न करें, हालांकि एक बार में 10 ऐसे पृष्ठ सचमुच परियोजना को लटका देते हैं। आखिरकार, यदि आप इस पद्धति का उपयोग करते हैं, तो आपको फ़ोटो के अलावा, उपयोगकर्ता के मुख्य घटक में रटना और तुरंत उसे छिपाने की आवश्यकता होगी:

• खाली उपयोगकर्ता के लिए वेक्टर ऑब्जेक्ट्स के साथ परत या समूह
• प्रारंभिक के लिए पाठ परत, केंद्रित
• सूचनाओं का बिल्ला, ऊपरी दाएं कोने में
• ऑनलाइन / ऑफ़लाइन स्थिति सूचक, तल में
• मोबाइल परिदृश्यों के लिए घटक या कोने के केंद्र में आइकन (उदाहरण के लिए, फ़ोटो संपादित करने के लिए कॉल, हटाएं)
• चेहरों की कई छवियां ( Figma iOS डिज़ाइन टूलकिट में 5 पुरुष, 5 महिला और सब कुछ समूहीकृत किया गया है)
• प्रत्येक तत्व के लिए अड़चनें ताकि Userpic को कई आकारों में उपयोग किया जा सके
• मैं और क्या भूल गया? :)

पेशेवरों: जल्दी से परत दृश्यता स्विच करके एक उदाहरण के वांछित राज्य मिलता है

विपक्ष: यदि आप 3+ परतों को स्विच करते हैं और नई शैलियों को भी जोड़ते हैं, तो बहुत सारी क्रियाएं हैं



ओह, ऐसा लगता है कि सरल उपयोगकर्ता इतना सरल नहीं था। उपकरण हमें प्रक्रियाओं का एक सरलीकृत डिजाइन देते हैं, लेकिन जटिलता अप्रत्याशित रूप से पूरी तरह से अलग दृष्टिकोण से आती है। हमें घटकों के साथ काम करना सीखना चाहिए, उनके तर्क और पुन: उपयोग के सार को समझना चाहिए।

कम अनावश्यक कार्रवाई

एक नया नियम बनाकर, आप संभवतः अपने एल्गोरिथ्म में सुधार कर रहे हैं। मैं खुद के लिए इस पर बस गया: यदि एक नया राज्य बनाने के लिए "दृश्यमान" में 3 या अधिक स्विचिंग परतों की आवश्यकता होती है, तो इस राज्य को एक अलग घटक में पूर्व निर्धारित करना बेहतर होता है, जो पहले एक उदाहरण था। याद रखें कि आपको प्रत्येक परत के नामकरण की जाँच करते हुए, आयोजन में समय बिताना होगा (ताकि पाठ तत्व स्विच करते समय सामग्री न खोएं), अवरोध, अनुक्रम ... और भी बहुत कुछ!

---

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

वैसे, यदि आप एक अच्छे डिजाइनर हैं, जैसे कि विवरण, अंजीर में काम करते हैं और घटकों के साथ काम करने के वास्तुकला और सिद्धांतों को समझते हैं, तो मेरा सुझाव है कि आप एक साथ पैसा कमाएं: आप एक अच्छी डिजाइन प्रणाली बनाते हैं, मैं इसे अपने बाज़ार में, आपकी बिक्री का 70% प्रकाशित करता हूं। उच्च गुणवत्ता - उच्च मूल्य। मैं उन प्रतिभाओं, दिमागों, विचारों और उन लोगों की तलाश में हूं जो "निकट भविष्य से घटकों" को काटने के लिए तैयार हैं। तार को लिखो।

वैसे, अक्सर काम की प्रक्रिया के दौरान मैं डिज़ाइन रुझानों, पश्चिमी उत्पादों की टिप्पणियों, और बस एक यूआई दर्शन के बारे में निष्कर्ष के साथ कवर किया जाता हूं, जिसे मैं तुरंत अपने टेलीग्राम चैनल "उपयोगी डिजाइनर के लिए" देता हूं। अब सम्मिलित हों!

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