Figma में टेबल्स। एक घटक द्वारा डेटा ग्रिड डिजाइन

घटकों की एक तालिका का निर्माण एक ऐसा कार्य है जो जितनी जल्दी या बाद में अंजीर में डिजाइन सिस्टम के प्रत्येक डिजाइनर के लिए उठता है।

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

यह सब क्यों?

सब कुछ एक सेल में क्यों रखा? क्या एक मध्यम आकार की परियोजना को वास्तव में उस तरह के लचीलेपन की आवश्यकता है? क्या एक नियमित टेबल के लिए घटक वास्तुकला की आवश्यकता है?

एक बड़ी टीम परियोजना के अंदर, यह एक घटक के माध्यम से नए डेटा ग्रिड बनाने का एकमात्र निश्चित तरीका है। यह अधिक विकल्प उत्पन्न करने और तेजी से नए विचारों को मान्य करने में मदद करता है।

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

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

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

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

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

तालिका शैलियों

जब मैंने फिगमा में अपना पहला डिज़ाइन सिस्टम नहीं बनाया, तो मैंने सैकड़ों टेबल की समीक्षा की और सबसे अधिक इस्तेमाल की जाने वाली शैलियों को वर्गीकृत करने में कामयाब रहा।

क्लासिक

क्षैतिज और ऊर्ध्वाधर विभाजक स्पष्ट रूप से दिखाई देते हैं, हेडर को बोल्ड द्वारा हाइलाइट किया जाता है और सामग्री के साथ कोशिकाओं के साथ पृष्ठभूमि से अलग किया जाता है। एक प्रकार की एक्सेल-शैली:

कंट्रास्ट हेडर

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

सामग्री तालिका

डेटा-पहला दृष्टिकोण। ऐसी तालिकाएं सामग्री डिजाइन में पाई जा सकती हैं। एक अधिक तीव्र ऊपरी विभाजक और एकल-पिक्सेल आंतरिक गुणात्मक रूप से डेटा को विभाजित करते हैं:

पट्टी के माध्यम से

ये टेबल अतीत से सीधे हैं, लेकिन आज तक, आधुनिक UI में अक्सर ग्रे और सफेद पंक्तियों का उपयोग होता है:

अतिसूक्ष्मवाद

डेटा के अलावा कुछ नहीं! यह घने डेस्कटॉप इंटरफेस पर काफी उचित है, जहां हर पिक्सेल की गणना होती है:

तालिका बनाने के लिए घटकों का उपयोग करना

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

पंक्ति घटक

पूर्व निर्धारित मात्रा की कोशिकाओं के साथ एक पंक्ति का उपयोग करना। इस प्रकार तालिका को ऊपर से नीचे तक सरल क्लोनिंग द्वारा जल्दी से इकट्ठा किया जाता है। अगला, प्रत्येक पंक्ति की चौड़ाई समायोजित की जाती है।
प्रत्येक कोशिका के अंदर की सीमाओं को भी काम करना पड़ता है, अंतर मौजूद हैं:


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

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

स्तंभ घटक

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


विपक्ष : घटक के अंदर, प्रत्येक सेल (क्षैतिज चरण) की ऊंचाई को समायोजित करना संभव नहीं होगा, अन्यथा यह "अतिरिक्त काटने" को लागू करने के लिए काम नहीं करेगा।

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

युक्ति : आप इनमें से तीन घटकों को विभिन्न चरणों के साथ पकड़ सकते हैं: S-32px / M-48px / XL-64px, उदाहरण के लिए, और कुछ हद तक सेल घनत्व की समस्या को हल करते हैं। यह एक ही प्रोजेक्ट / टीम लाइब्रेरी के भीतर मोबाइल और डेस्कटॉप दोनों टेम्पलेट बनाने के मामले में विशेष रूप से उपयोगी है।

सेल घटक

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

Uber सुविधा: Figma के लिए मेरी iOS12 मोबाइल लाइब्रेरी में , मैं घटक के माध्यम से सब कुछ उल्टा कर सकता हूं :) वैसे, यह इस उत्पाद से लेआउट के आधार पर था कि इस लेख के लिए सामग्री बनाई गई थी:



विपक्ष: व्यावहारिक रूप से कोई नहीं, जब तक कि इस दृष्टिकोण के लिए अधिक समय और कौशल की आवश्यकता न हो

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

इस तरह के सुपर सेल की विस्तृत रचना अगले अंक में चर्चा की जाएगी।

घटकों के साथ एक स्रोत यहां उपलब्ध है ।

मेरे चैनल की सदस्यता लें , सभी घोषणाएं होंगी! विशेष रूप से यह देखते हुए कि अब हम एक झटके में कई डिजाइन और वेब विकास कार्यों को हल करने के लिए अपने स्वयं के डिजाइन प्रणाली को देख रहे हैं। ये Figma स्रोत और प्रतिक्रिया / कोणीय NPM संकुल के घटक हैं। बिल्कुल समान डिजाइन के साथ, Google सामग्री से थोड़ा बेहतर है :) मैं नियमित रूप से इस उत्पाद के बारे में नई मजेदार तस्वीरें पोस्ट करता हूं। हम विकास का सीधा प्रसारण कर रहे हैं।

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

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