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

दुर्भाग्य से, उत्तर नहीं था। कुछ मूल्य सामान्य थे, लेकिन कुछ भी सुसंगत नहीं था। हमारे सिस्टम में एकजुट आकार, रिक्ति और स्केल सुनिश्चित करने में मदद करने के लिए कोई नियम नहीं थे।

मूल बातें पर वापस जा रहे हैं

महान डिजाइन आमतौर पर मूल सिद्धांतों को सही करने में निहित होता है। कई डिजाइनरों (मेरे जैसे) के लिए टाइपोग्राफी डिजाइन का सबसे महत्वपूर्ण मूलभूत तत्व है। हमने यह देखने के लिए अपने प्रकार के पैमाने पर ध्यान दिया कि हम आनुपातिक डिज़ाइन कैसे बना सकते हैं जो सामान्य अनुपातों और विधियों के आधार पर मापे जाते हैं।

पेश है अनुपात

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

मूलभूत प्रणालियां बनाना

आप अपने प्रकार के पैमाने को परिभाषित करके प्रारंभ करते हैं, जिसका उपयोग आपके बाकी सिस्टम के लिए किया जाएगा। माइनर थर्ड (1:1.125) जैसे स्केल फैक्टर के साथ बेस फॉन्ट साइज का इस्तेमाल किया जाता है। हर दूसरा फॉन्ट साइज इसी अनुपात पर आधारित होता है।

टाइप स्केल के आधार पर आइकन स्वचालित रूप से आकार लेते हैं, क्योंकि टाइपोग्राफी और आइकन पेयरिंग डिज़ाइन सिस्टम में एक सामान्य और महत्वपूर्ण तत्व है।

टाइप स्केल के आधार पर टेक्स्ट-टू-आइकन स्पेसिंग भी आनुपातिक है। यह सुनिश्चित करता है कि उनके बीच की दूरी सापेक्ष और संतुलित है। इसी तरह, आप आनुपातिक आकार के पैमाने, त्रिज्या के पैमाने और यहां तक ​​कि ऊंचाई (ड्रॉप शैडो) के पैमाने भी बना सकते हैं।

घटक प्रणाली

यहां चीजें वाकई दिलचस्प हो जाती हैं।

एक बार जब आपके पास हमारे मूलभूत सिस्टम हो जाते हैं, तो आप हमारे घटक पैडिंग और ऊंचाई को आकार देने के लिए या तो हमारे टाइप स्केल या स्पेसिंग स्केल का उपयोग करना चुन सकते हैं। आधार (डिफ़ॉल्ट) आकार का घटक आपके आधार प्रकार के आकार (डिफ़ॉल्ट रूप से, 16px) का उपयोग करता है।

आप छोटे और बड़े आकार जोड़ सकते हैं, जो आपके चयनित पैमानों में वृद्धि के आधार पर UI में उत्पन्न होते हैं।

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

आप घटक दृश्य को यह देखने के लिए टॉगल कर सकते हैं कि जब केवल पाठ, केवल एक आइकन, या दोनों होते हैं तो आपका घटक कैसा दिखाई देता है। आप घटक के विनिर्देशों को दिखाने के लिए दृश्य को टॉगल भी कर सकते हैं।

कंटेनर सिस्टम

घटक प्रणाली की तरह, अनुपात आपको आनुपातिक रूप से स्केल किए गए कंटेनर बनाने की अनुमति देता है।

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

समान आनुपातिक प्रणालियों का उपयोग करके, आप स्केल्ड पैडिंग, स्केल्ड त्रिज्या और यहां तक ​​कि ऊंचाई (यदि आपको आवश्यकता हो) के साथ कंटेनर बना सकते हैं।

मूल्य निर्यात करना

एक बार जब आप एक सिस्टम बना लेते हैं जिसका आप उपयोग करना चाहते हैं, तो उन्हें डिज़ाइन टोकन (W3C ड्राफ्ट प्रारूप) या CSS चर के रूप में निर्यात किया जा सकता है। इससे आपके सिस्टम को इंजीनियरों को सौंपना आसान हो जाता है।

वर्तमान में, इन मूल्यों को सीधे Figma में खींचने का कोई तरीका नहीं है। तो इसकी वर्तमान स्थिति में, यह एक वास्तविक "डिज़ाइन टूल" के बजाय यह परिभाषित करने के लिए एक प्रोटोटाइप के रूप में अधिक उपयोगी है कि आप अपने सिस्टम में क्या उपयोग करना चाहते हैं। लेकिन इसके साथ ही, यदि आप ऐसा महसूस करते हैं तो इस सुविधा को जोड़ा जा सकता है , क्योंकि Proportio एक ओपन सोर्स टूल है।

खुला स्त्रोत

अनुपात एक ओपन-सोर्स प्रोजेक्ट है । मैं नए विचारों को साझा करने या भड़काने में मदद करने के लिए डिजाइन सिस्टम समुदाय को वापस देने में बड़ा विश्वास रखता हूं ताकि हम सभी एक साथ विकसित हो सकें।

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