Figma का Auto Layout CSS Flexbox से कैसे मैप होता है (और कब आपको फिर भी Grid चाहिए)

अगर आपने कभी किसी Figma फ़ाइल में किसी frame पर "Auto Layout" ऑन देखा है, तो असल में आप Flexbox के बहुत करीब की चीज़ ही देख रहे थे — Figma के डिज़ाइनरों ने जानबूझकर यही मेंटल मॉडल उधार लिया है। इस मैपिंग को समझना सिर्फ ट्रिविया नहीं है: यही वो चीज़ है जो आपको डिज़ाइन फ़ाइल से सीधे काम करने वाले CSS तक ले जाती है, बिना हर स्पेसिंग वैल्यू को आंख से अंदाज़ा लगाए।

Auto Layout असल में क्या कंट्रोल करता है

Auto Layout, Figma का वह तरीका है जिससे कोई frame एक असली layout container की तरह व्यवहार करता है, न कि सिर्फ़ absolute position की गई shapes के समूह की तरह। किसी frame पर इसे ऑन करते ही आपको कॉन्फ़िगर करने के लिए कुछ प्रॉपर्टीज़ मिलती हैं:

• Direction — क्या children vertically stack होंगे या horizontally।
• Spacing / gap — हर child element के बीच की fixed distance।
• Padding — frame के edge और उसके children के बीच की जगह, जो हर side के लिए अलग-अलग सेट की जा सकती है।
• Alignment — children primary axis और counter axis के साथ कैसे लाइन-अप होते हैं।
• Resizing behavior — क्या frame और उसके children अपने content के हिसाब से सिकुड़ते हैं, उपलब्ध space को fill करते हैं, या fixed size में रहते हैं।

इसमें कुछ भी मनमाना नहीं है। हर प्रॉपर्टी इसलिए मौजूद है क्योंकि यह उस जानकारी से जुड़ी होती है जो एक असली layout engine को जाननी ज़रूरी होती है — और यही वजह है कि यह CSS में इतनी साफ़-सुथरी तरह मैप हो जाती है।

Flexbox के साथ सीधा मैपिंग

Figma Auto Layout प्रॉपर्टी	CSS Flexbox के बराबर
Direction (vertical/horizontal)	flex-direction: column / row
Items के बीच spacing	gap
Padding	padding
Primary axis alignment	justify-content
Counter axis alignment	align-items
Hug contents	width: fit-content / height: fit-content
Fill container	flex: 1 या width: 100% / height: 100%
Fixed size	स्पष्ट width / height

एक बार यह टेबल देख लेने के बाद साफ़ हो जाता है कि Auto Layout उन डेवलपर्स को क्यों सहज लगता है जो पहले से Flexbox जानते हैं — और Flexbox उन डिज़ाइनर्स को क्यों सहज लगता है जिन्होंने Figma से शुरुआत की। दोनों एक ही box model को अलग-अलग नामों से describe कर रहे हैं।

हाथ से ट्रांसलेट करते वक्त कहाँ गड़बड़ होती है

साफ़ मैपिंग होने के बावजूद, जो डेवलपर्स Auto Layout को हाथ से दोबारा बनाते हैं वे अक्सर कुछ खास चीज़ों में उलझते हैं:

• मिक्स्ड alignment फ्लैट हो जाता है। Figma में हर child ग्रुप के alignment को override कर सकता है; इसे सरसरी तौर पर देखकर सबके ऊपर एक ही align-items वैल्यू लगा देना आसान है, जिससे वे individual overrides खो जाते हैं जिनके लिए align-self चाहिए होता है।
• "hug" और "fill" के बीच confusion। content के हिसाब से सिकुड़ने वाला frame किसी एक viewport size पर fixed-width frame जैसा ही दिखता है, लेकिन content या screen size बदलते ही इसका व्यवहार पूरी तरह अलग हो जाता है। यहाँ गलत अंदाज़ा लगाना, असली content पर layout टूटने की एक आम वजह है।
• gap को नज़रअंदाज़ करना। कुछ डेवलपर्स अब भी gap की जगह margin वाली ट्रिक्स इस्तेमाल करते हैं, जो पुरानी Flexbox सलाह से चली आ रही आदत है — जबकि अब gap को browsers में अच्छा support मिल चुका है, यह ज़रूरी नहीं रहा, और ऐसा करने से वही spacing bugs वापस आ जाते हैं जिन्हें ठीक करने के लिए gap बनाया गया था।
• nested Auto Layout frames बिना किसी योजना के nested flex containers बन जाते हैं। हर nested frame अपना खुद का flex context होता है, और अगर एक-से-एक literal translation किया जाए तो layout को असल में जितने चाहिए उससे ज़्यादा wrapper elements बन सकते हैं।
• padding गलत element पर लग जाना। frame का padding container की बजाय किसी child element पर लगा देना आसान है, जिससे sibling elements के बीच gap-based spacing गड़बड़ हो जाती है।

जब Flexbox सही target न हो — Grid की तरफ जाएँ

Auto Layout एक single-axis model है: यह rows और columns में, यहां तक कि उनके nested combinations में भी, काफ़ी अच्छा काम करता है। लेकिन कुछ डिज़ाइन असल में two-dimensional होते हैं, और उन्हें nested Flexbox में जबरदस्ती फ़िट करने से ऐसा code बनता है जिसे मेंटेन करना खुद डिज़ाइन से भी मुश्किल हो जाता है। इन स्थितियों में CSS Grid की तरफ जाएँ:

• ऐसा layout जहाँ items को rows और columns दोनों पर एक साथ align होना ज़रूरी है — जैसे card grids, dashboards, या image galleries।
• साफ़ तौर पर "यह element दो columns में फैलेगा" या "दो rows में फैलेगा" जैसा behavior, जिसे Grid grid-column / grid-row से नेटिवली संभालता है, जबकि Flexbox इसे सीधे express नहीं कर सकता।
• ऐसे डिज़ाइन जहाँ columns की संख्या fixed breakpoint list की बजाय उपलब्ध width के हिसाब से respond करनी चाहिए (repeat(auto-fit, minmax(...)))।
• एक ही grid के अंदर overlapping या layered regions, जो Grid के placement system से आसान होते हैं लेकिन Flexbox के साथ काफ़ी अटपटे हो जाते हैं।

एक आसान rule of thumb: अगर किसी Figma frame का Auto Layout किसी भी वक्त सिर्फ़ एक ही direction में nest होता है, तो Flexbox एक ईमानदार translation है। अगर आप खुद को row-and-column alignment नक़ल करने के लिए Auto Layout frames की पूरी grid बनाते हुए पाते हैं, तो अक्सर यह इस बात का संकेत होता है कि Figma का UI उसमें native two-dimensional Grid layout mode न होने की कमी पूरी कर रहा है — और तब असली CSS Grid generate करना ज़्यादा बेहतर रहता है।

MarkupGen इसे अपने आप कैसे संभालता है

यह मैपिंग समझने में तो आसान है, लेकिन किसी असली design file के हर frame, हर gap value, और हर nested container पर इसे सही तरीके से लागू करना थकाऊ काम है — और यह ठीक वैसा ही repetitive translation work है जिसे हटाने के लिए MarkupGen बनाया गया है। workflow चार steps में है: companion plugin की मदद से Figma से frame export करें, जो structure, styles और images सीधे आपके workspace में ले आता है; MarkupGen का AI उसी असली structure से HTML और CSS बनाता है, और Auto Layout के direction, gap, padding व alignment को manual guesswork पर छोड़ने की बजाय अपने आप बराबर के Flexbox structure में मैप कर देता है; फिर आप app के अंदर मौजूद editor में content, fonts और layout को visually refine करते हैं; और आख़िर में final code package export करते हैं। Responsive breakpoints, design की resizing constraints से अपने आप generate होते हैं, और आप अपने stack के हिसाब से output format चुन सकते हैं — vanilla HTML/CSS, Tailwind CSS, या React components। हर export को एक automatic AI quality score भी मिलता है, जिससे एक नज़र में पता चल जाता है कि generate हुआ code production के लिए तैयार है या नहीं। output ऐसा clean, semantic HTML देता है जिसमें फ़ालतू nested <div> नहीं होते — जो maintainability के साथ-साथ SEO के लिए भी उतना ही ज़रूरी है।

अपने डिज़ाइन पर आज़माएँ

Auto Layout-to-Flexbox मैपिंग को समझना आपको generated code को तेज़ी से review करने में मदद करता है और यह पहचानने में भी बेहतर बनाता है कि किस डिज़ाइन को असल में Grid चाहिए। अगर आप manual translation को पूरी तरह skip करना चाहते हैं, तो अपनी Figma फ़ाइल पर MarkupGen मुफ़्त में आज़माएँ, या पूरी end-to-end workflow जानने के लिए Figma-to-HTML conversion गाइड पढ़ें।