Figma ऑटो लेआउट बनाम CSS फ्लेक्सबॉक्स और ग्रिड: डिज़ाइन-टू-कोड गैप को बंद करना
Figma ऑटो लेआउट CSS फ्लेक्सबॉक्स और ग्रिड (दिशा, गैप, पैडिंग, हग, फिल, रैप) पर कैसे मैप करता है और वे कहां भिन्न होते हैं, इसलिए डिज़ाइन हैंडऑफ़ से बचे रहते हैं।
कोर टेकअवे
Figma का ऑटो लेआउट काफी हद तक CSS फ्लेक्सबॉक्स की तरह व्यवहार करता है: फ्लेक्स-दिशा के लिए दिशा मानचित्र, गैप से गैप, पैडिंग से पैडिंग, सामग्री के अनुसार आकार देने के लिए "हग कंटेंट", फ्लेक्स-ग्रो या पूरी चौड़ाई के लिए "कंटेनर भरें", और फ्लेक्स-रैप के लिए रैप। ऑटो लेआउट का ग्रिड प्रवाह CSS ग्रिड से मेल खाता है। अंतर न्यूनतम और अधिकतम आकार, टेक्स्ट रैपिंग, बेसलाइन संरेखण और प्रतिक्रियाशील ब्रेकप्वाइंट के साथ दिखाई देते हैं, इसलिए हैंडऑफ़ पर उन्हें स्पष्ट रूप से जांचें।
मानचित्रण
Figma की मार्गदर्शिका ऑटो लेआउट फ़्रेमों का वर्णन करती है जो बच्चों को क्षैतिज, ऊर्ध्वाधर और ग्रिड प्रवाह और एक वैकल्पिक आवरण के साथ दिशा, रिक्ति, पैडिंग और संरेखण द्वारा व्यवस्थित करते हैं। प्रत्येक के पास एक करीबी CSS समतुल्य है:
गले लगाओ, भरो और ठीक करो
Figma में, सामग्री को गले लगाने के लिए सेट किया गया एक फ्रेम अपने बच्चों के आधार पर आकार बदलता है, और कंटेनर भरने के लिए सेट किया गया एक बच्चा उपलब्ध स्थान को भरने के लिए फैलता है; Figma नोट करता है कि यदि कोई बच्चा पेट भरने के लिए तैयार है, तो माता-पिता उस दिशा में गले नहीं लगा सकते हैं। CSS में समतुल्य सामग्री-आधारित आकार (ऑटो या फिट-कंटेंट) और फ्लेक्स: 1 या चौड़ाई: 100% हैं। MDN की फ्लेक्सबॉक्स गाइड बताती है कि फ्लेक्स-ग्रो, फ्लेक्स-श्रिंक और फ्लेक्स-बेस कैसे स्थान वितरित करते हैं, जो एक ही विचार का CSS पक्ष है।
जहां गैप दिखता है
अधिकांश हैंडऑफ़ बग कुछ क्षेत्रों से आते हैं:
- न्यूनतम और अधिकतम आकार: उन्हें दोनों स्थानों पर सेट करें, या पाठ और कंटेनर चरम सीमा पर अलग-अलग व्यवहार करते हैं।
- टेक्स्ट: लाइन की ऊंचाई, रैपिंग और ट्रंकेशन Figma टेक्स्ट रेंडरिंग और ब्राउज़र के बीच भिन्न होता है।
- बेसलाइन संरेखण: CSS टेक्स्ट बेसलाइन द्वारा संरेखित कर सकता है; जांचें कि इसका उद्देश्य कैसा था।
- पूर्ण बच्चे: Figma का "ऑटो लेआउट को अनदेखा करें" (पूर्व में पूर्ण स्थिति) एक स्थिति वाले माता-पिता में स्थिति: पूर्ण को मैप करता है।
- जवाबदेही: ऑटो लेआउट फ़्रेम में ब्रेकप्वाइंट नहीं होते हैं; परिभाषित करें कि प्रत्येक चौड़ाई पर लेआउट कैसे बदलते हैं।
ग्रिड
वास्तविक द्वि-आयामी लेआउट के लिए ऑटो लेआउट के ग्रिड प्रवाह का उपयोग करें, और इसे CSS ग्रिड पर मैप करें, जिसे MDN पंक्तियों और स्तंभों में सामग्री बिछाने के लिए एक प्रणाली के रूप में वर्णित करता है। लपेटी गई फ्लेक्स पंक्तियाँ ग्रिड के समान नहीं होती हैं: लपेटी गई पंक्ति में आइटम कॉलम में पंक्तिबद्ध नहीं होते हैं।
गति बड़ा अंतर है
Figma से CSS तक लेआउट मानचित्र यथोचित रूप से अच्छे हैं। मोशन नहीं करता है: प्रोटोटाइप ट्रांज़िशन को कोड में फिर से बनाना पड़ता है, और राज्य अक्सर खो जाते हैं। यह रनटाइम के साथ गैप टूल है, जैसे ExodeUI (हम इसे बनाते हैं) और Rive, इंटरैक्टिव घटकों के लिए पता।
याद रखने योग्य कुंजी Principle
- फ्लेक्सबॉक्स में ऑटो लेआउट दिशा, गैप, पैडिंग और रैप मैप
- आलिंगन ≈ सामग्री का आकार; भरें ≈ फ्लेक्स: 1 या 100% चौड़ाई
- CSS ग्रिड पर ग्रिड प्रवाह मानचित्र
- हैंडऑफ़ पर न्यूनतम/अधिकतम आकार, टेक्स्ट, बेसलाइन और ब्रेकप्वाइंट की जाँच करें
- गति और अवस्थाएँ बड़े डिज़ाइन-टू-कोड अंतर हैं
अक्सर पूछे जाने वाले प्रश्नों
स्रोत
- Guide to auto layout — Figma सहायता केंद्र
- Basic concepts of flexbox — MDN वेब डॉक्स
- Basic concepts of grid layout — MDN वेब डॉक्स