फ़िग्मा डिज़ाइन प्रणाली में टेबल बनाना और स्टोरीबुक (प्रतिक्रिया) में कार्यान्वयन

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

चलो चलते हैं! मैं मुख्य मास्टर सेल के माध्यम से पूरी तालिका को अनुकूलित करने के बेकार लेकिन मज़ेदार प्रभावों का प्रदर्शन करके शुरू करूँगा:



सेल मास्टर घटक में वांछित परतों का चयन करें और तालिका में सभी परिवर्तन वितरित करें

घटक सेल संरचना

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



लेयर्ड स्ट्रक्चर फैलाव में बाईं तरफ है

घटक सेल संरचना:

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

आइए प्रत्येक आइटम को अधिक विस्तार से देखें।

प्रतीक (चिह्न-एल / ​​आर)

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



आइकन बंद होने पर लेबल को स्थानांतरित करने में असमर्थता के कारण एक नया घटक बनाना है या किसी स्थान को इंडेंट करने के लिए - अपने बारे में निर्णय लें

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

और अगर आपके पास एक गंभीर परियोजना है, तो हमारी टीम हमारी सर्वोत्तम प्रथाओं के आधार पर संगठन के भीतर एक डिजाइन प्रणाली को तैनात करने के लिए तैयार है और यह Figma का उपयोग करके विशिष्ट कार्यों के लिए दर्जी है। वेब / डेस्कटॉप, और कोई भी मोबाइल। हम React / React Native से भी परिचित हैं। टी को लिखें: @kamushken

आइकन-आर सक्रियण तब उपयोगी होता है जब किसी सेल में अतिरिक्त कार्रवाई की संभावना दिखाना आवश्यक हो। उदाहरण के लिए, एक मेनू के लिए एक दीर्घवृत्त, या एक पेंसिल आइकन अगर सेल संपादित किया जा सकता है:



आपको याद है कि अंजीर में उदाहरणों को ड्रॉप के समय Ctrl / Cmd को दबाकर बदला जा सकता है

विभाजक (सीमाएं)

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

अपनी इच्छानुसार तालिकाएँ बनाएँ:



बाएं से दाएं घड़ी की दिशा में सीमाओं का आयोजन किया जाता है। विज़ार्ड में उनके लिए रंग बदलने से, हम सभी तालिकाओं में तेज़ी से डेलिमीटर बदल सकते हैं

सेल पाठ (कैप्शन)

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



पाठ बॉक्स से सेल सीमाओं तक इंडेंटेशन 8dp है। उच्च घनत्व तालिकाओं के लिए, आप 4dp का उपयोग कर सकते हैं।

पृष्ठभूमि (बीजी)

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



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

डिजाइन प्रणाली में टेबल्स। टोकन

स्थिरीकरण और कार्यान्वयन

यह लेख वास्तविक सारणी के उदाहरणों के बिना पूरा नहीं होगा, जो ऊपर दिए गए विनिर्देशों के अनुसार संकलित किए गए थे (अब इसे एक टोकन कहना फैशनेबल है)। अब हम किसी भी जटिलता के वेब अनुप्रयोगों की त्वरित शुरुआत के लिए Figma / React / Angular में एक सभी में एक रूपरेखा तैयार कर रहे हैं। इस प्रणाली में, प्रोटोटाइप और विकास की किसी भी समस्या को हल करने के लिए कई घटकों को इकट्ठा किया जाएगा; और तालिकाओं - यह आवश्यक अनुभागों में से एक है, जिस पर हमने ध्यान देने के साथ प्रतिक्रिया की। तो, डेटा ग्रिड टेबल चार रूपों में उपलब्ध हैं:



ये सभी तालिकाएं पूरी तरह से कोड में हैं, राज्यों, छंटनी, बैज की उपस्थिति और सामान्य शैली में उनके गिरने को ध्यान में रखा जाता है। समय के साथ शिथिलता में सुधार होगा।

4 शैलियों उपलब्ध हैं:

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

जैसा कि आप ऊपर दिए गए GIF से देख सकते हैं, राज्यों पर ध्यान दिया जाता है: onHover, onClick, साथ ही साथ छँटाई भी। फिगमा से डिज़ाइन टोकन के उपयोग के लिए इस तरह के डिटेलिंग को संभव बनाया गया था, जो डेवलपर्स के लिए एक समझ में आने वाले तरीके से स्थानांतरित किए गए थे। जो कुछ बचा था, वह सेटप्रोडक्ट डिज़ाइन सिस्टम में रंग प्रणाली से आवश्यक रंगों को पकड़ना था और इस तरह के डेटा-ग्रिड को प्राप्त करने के लिए इसे तैयार किए गए रिएक्ट फ्रेमवर्क में पेंच कर दिया। इस प्रकार, हमारे सिस्टम के भविष्य के उपयोगकर्ताओं के लिए कई विकल्प उपलब्ध हो जाएंगे, जो तालिका के एक ही घटक पर आधारित हैं, लेकिन SCSS के माध्यम से विभिन्न तरीकों से शैलीबद्ध हैं।

विनिर्देशों और रंग

ग्रे, 4 प्राथमिक रंग और 4 वैकल्पिक रंग। ग्रेडिएंट हैं।

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



विशिष्टताओं के साथ उदाहरण विशेष रूप से एक आकार की शैली में, ताकि आंख उन्हें उन घटकों से अधिक तेजी से अलग कर सके जिनके लिए विवरण निम्नानुसार है



बस स्टोरीबुक से नीचे के विकल्प को स्विच करके, हम जल्दी से टेबल का रंग बदलते हैं

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

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

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

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