CSS to Figma Auto Layout: Flexbox और Grid mapping guide
CSS to Figma Auto Layout mapping कैसे काम करती है: flex-direction, gap, padding, alignment, flex-grow, wrap, grid, absolute, max-width और साफ़ imports के tips।
EUREKA! · · 10 मिनट में पढ़ें
अगर आप front-end code लिखते हैं, तो Figma का Auto Layout जाना-पहचाना लगता है: एक direction, एक gap, padding, alignment, children जो hug या fill करते हैं। यह मान लेना आसान है कि CSS to Figma Auto Layout एक-से-एक translation है। ऐसा नहीं है। Flexbox और Grid ज़्यादा समृद्ध हैं, browser margins, percentages और intrinsic sizes को हल करता है जिन्हें Auto Layout model नहीं करता, और एक ही visual नतीजा बहुत अलग CSS से आ सकता है।
यह guide बताती है कि HTML to Frames CSS layouts को Auto Layout से कैसे map करता है, हर नतीजे को browser के सामने verify क्यों किया जाता है, सीमाएं कहां हैं, और साफ़ import होने वाली CSS कैसे लिखें।
तरीका: पहले geometry, फिर inference
एक सीधा-सादा converter display: flex पढ़कर properties copy कर देता है। यह जल्दी टूट जाता है: gap: 0 और children पर margins वाला flex container, एक block element जो सिर्फ़ vertical stack जैसा दिखता है, या एक grid जो दो साफ़ rows के रूप में render होता है।
HTML to Frames इस आधार पर काम करता है कि browser ने असल में क्या render किया:
- Pixel-exact बनाएं. पेज पहले Figma में browser की मापी गई geometry से ली गई absolute positions के साथ बनाया जाता है।
- अंदर से बाहर चलें. सबसे गहरे frames से शुरू करके, plugin positions और sizes से vertical stacks, horizontal stacks, wrapping rows, gaps, padding और alignment निकालता है।
- Responsive अर्थ जोड़ें. Centred content, Center बनता है, max-width boxes centred रहते हैं, बराबर cards और
flex-grow, Fill बनते हैं, और "logo … menu … icons" bar में gap item, Fill बनता है। - Verify करें. Auto Layout लागू किया जाता है, फिर हर child की position को मूल से 2 px की tolerance के साथ जांचा जाता है।
- सुरक्षित fallback. अगर यह नहीं टिकता, तो आसान plan आज़माया जाता है। अगर वह भी fail हो, तो frame समझदार constraints (Stretch, Scale, Center, Min, Max) के साथ absolute positions रखता है।
क्योंकि inference render हुई geometry से शुरू होता है, block elements का stack भी flex column की तरह ही vertical Auto Layout बन जाता है। CSS का तरीका नतीजे से कम मायने रखता है। व्यापक overview के लिए Auto Layout explained देखें।
Mapping table
आम CSS patterns आमतौर पर ऐसे map होते हैं। इसे अपेक्षित नतीजा मानें, वादा नहीं; आख़िरी फ़ैसला verification का है।
| CSS | Figma Auto Layout नतीजा | Notes |
|---|---|---|
flex-direction: column | Vertical Auto Layout | सामान्य block flow stacking भी यहीं map होती है |
flex-direction: row | Horizontal Auto Layout | |
row-reverse, column-reverse | Render हुए क्रम में stack | Layers visual क्रम का पालन करते हैं |
gap: 24px | Item spacing 24 | असली दूरियों से मापा जाता है |
| Siblings के बीच बराबर margins | Item spacing | दूरियां एक जैसी हों तो निकाला जाता है |
padding: 32px 24px | Padding top/bottom 32, left/right 24 | Child offsets से मापा जाता है |
justify-content: flex-start | Primary axis: start | |
justify-content: center | Primary axis: center | |
justify-content: flex-end | Primary axis: end | |
justify-content: space-between | Space between, या gap item Fill बनता है | Header bars अक्सर logo, Fill, icons बनते हैं |
align-items: center | Counter axis: center | |
align-items: stretch | Counter axis पर children Fill | जब children असल में stretch होते हैं |
flex: 1 / flex-grow: 1 | Primary axis पर Fill container | बराबर cards, बराबर Fill items बनते हैं |
Child पर fixed width | Fixed width | |
| Content के आकार वाला child | Hug contents | |
flex-wrap: wrap | Wrapping rows | Auto Layout wrap इस्तेमाल करता है |
बराबर columns वाला display: grid | Wrapping rows, या nested stacks | इस पर निर्भर कि क्या verify होता है |
Spans वाले grid-template-columns | Nested horizontal/vertical stacks | या spans overlap हों तो absolute |
max-width + margin: 0 auto | Full-width frame के अंदर centred box | Resize पर content box centred रहता है |
position: absolute | अपने frame के भीतर absolute, constraints के साथ | Overlaps stack में फिट नहीं होते |
position: fixed / sticky | Present mode में fixed या sticky व्यवहार | Prototypes में headers काम करते रहते हैं |
z-index | Layer order | Browser stacking से मेल खाता है |
transform: rotate() / scale() | Rotation और scale लागू | Skew और 3D अभी supported नहीं |
Flexbox विस्तार से
Direction और order
flex-direction तय करता है कि container horizontal stack बनेगा या vertical। क्योंकि inference render हुई positions इस्तेमाल करता है, reversed directions और order बस visual क्रम में layers बनाते हैं। Browser में जो दिखता है, layers panel में वही मिलता है।
Gap और padding
gap सबसे साफ़ input है: children के बीच एक, एक जैसी दूरी जो सीधे Auto Layout item spacing से map होती है। Siblings के बीच margins तब काम करते हैं जब वे एक जैसे हों। जब वे एक जैसे न हों, मान लें 16, 24, 16, तो plugin उसे एक gap के रूप में नहीं दिखा सकता, और verification या तो दूसरा plan चुनेगा या positions absolute रखेगा।
Padding इस आधार पर मापी जाती है कि children container के अंदर असल में कहां बैठे हैं, इसलिए padding, border widths और अंदरूनी margins सब नतीजे में योगदान देते हैं।
Justify और align
justify-content primary-axis alignment से और align-items counter-axis alignment से map होता है। दिलचस्प स्थिति space-between है। "logo … menu … icons" जैसे header में, plugin gap item को Fill बना देता है, इसलिए resize पर logo बाईं ओर रहता है, icons दाईं ओर रहते हैं और बीच का हिस्सा फैलता है। यही वह responsive अर्थ है जिसकी आप उम्मीद करेंगे, न कि एक fixed spacing value जो सिर्फ़ एक width पर काम करे।
flex-grow और Fill
flex-grow या flex: 1 वाले children Fill container बन जाते हैं। बराबर cards की rows, बराबर Fill items बन जाती हैं, इसलिए parent frame resize करने पर cards एक साथ resize होते हैं, ठीक browser की तरह।
Wrapping
flex-wrap: wrap, Auto Layout के wrap mode से map होता है, जिससे wrapping rows बनती हैं। Flexbox से बनी tag lists, logo walls और card grids के लिए यह स्वाभाविक fit है।
CSS Grid विस्तार से
Figma का Auto Layout एक stack model है, दो-आयामी grid नहीं। इसलिए grid layouts को उस सबसे क़रीबी structure से map किया जाता है जो verify हो:
- Uniform grids (बराबर columns, बराबर gaps) आमतौर पर wrapping rows बनते हैं।
- Asymmetric grids (sidebar और main column, 2:1 split) आमतौर पर nested stacks बनते हैं: vertical stacks का एक horizontal stack, या उल्टा।
- Spanning और overlapping cells जो stacks में नहीं टूटतीं, constraints के साथ absolute positions रखती हैं।
हर स्थिति में, visual नतीजा tolerance के भीतर browser से मेल खाता है। जो बदलता है वह यह है कि Figma में frame का कितना हिस्सा आप लचीले ढंग से resize कर सकते हैं।
Absolute positioning, centring और auto margins
position: absolute
Absolutely positioned badge, कोई सजावटी blob या overlay किसी stack में नहीं आता, क्योंकि वह अपने siblings पर overlap करता है। ऐसे elements absolute positions रखते हैं, और plugin उन्हें constraints देता है ताकि parent resize होने पर भी वे समझदारी से व्यवहार करें: ऊपर-दाएं pin किया badge ऊपर-दाएं ही रहता है, पूरा ढकने वाला overlay फैलता है।
max-width और margin: auto
क्लासिक content container, max-width: 1200px; margin: 0 auto, full-width frame के अंदर एक centred box बन जाता है। यहीं Site width भी काम आती है: plugin import के समय पेज की असली design width मापता है। Full-bleed designs centred content box के साथ 1920 पर आते हैं, सच में boxed sites अपनी box width पर, और fluid sites 1440 पर। मापी गई value आपके container logic को बरकरार रखती है।
Flex के अंदर auto margins
किसी flex child पर margin-left: auto उसे आख़िर तक धकेल देता है, जो nav bars का आम pattern है। space-between की तरह, यह भी geometry से निकाला जाता है, आमतौर पर एक Fill gap item के रूप में जो धकेले गए element को दूर वाले किनारे पर रखता है।
Verification क्यों मायने रखता है
Verification के बिना, converters के पास दो बुरे विकल्प होते हैं: हर जगह Auto Layout लगा दें और मान लें कि कुछ frames खिसकेंगे, overlap होंगे या सिकुड़ जाएंगे, या Auto Layout से बचें और आपको जमे हुए absolute layers थमा दें।
HTML to Frames Auto Layout लागू करता है, फिर हर child की position 2 px के भीतर जांचता है। अगर कोई frame fail होता है, तो आसान plan आज़माया जाता है; अगर वह भी fail हो, तो frame absolute रहता है। डिज़ाइन कभी नहीं टूटता। आप भरोसा कर सकते हैं कि Figma में जो दिखता है वह browser से मेल खाता है, और आपको मिलने वाला Auto Layout ऐसा है जो सच में टिकता है।
Results screen कुल Auto Layout share दिखाती है, और absolute रहे frames के लिए बताती है कि क्यों (diagnostics)। इससे "यह Auto Layout क्यों नहीं है?" ऐसा सवाल बन जाता है जिस पर आप अपनी CSS में कार्रवाई कर सकते हैं।
असली sites पर हमारे tests में, लगभग 86 से 97 प्रतिशत frames पर Auto Layout निकाला गया, उदाहरण के लिए एक product site पर 93 प्रतिशत और Linear व Stripe पर 88 प्रतिशत। आपके आंकड़े इस पर निर्भर करते हैं कि CSS कैसे लिखी गई है।
जानने लायक सीमाएं
- Auto Layout में दो-आयामी grid semantics मौजूद नहीं हैं; grids wrapping rows या nested stacks बनते हैं, और जटिल spans absolute रह सकते हैं।
- Siblings के बीच असंगत spacing को एक gap के रूप में व्यक्त नहीं किया जा सकता।
- Overlap (negative margins, absolute children) उन elements को absolute रखता है।
- Skew और 3D transforms,
path()clip-paths, multi-layer masks और Display-P3 colors अभी convert नहीं होते। - iframes, WebGL canvases और बिना poster के videos जैसा embedded content अपने box की screenshot image के रूप में आता है।
- एक समय में एक width. हर screen अपनी width पर layout होती है। हर breakpoint को अलग frame के रूप में capture करने के लिए responsive set (Desktop, Tablet, Mobile) इस्तेमाल करें।
Tips: साफ़ import होने वाली CSS लिखें
ये आदतें आपके layouts को ज़्यादा बार Auto Layout से map कराती हैं, और वैसे भी अच्छी CSS practice हैं।
- Sibling margins के बजाय
gapइस्तेमाल करें। एक consistent value सीधे item spacing से map होती है। - एक container के भीतर spacing एक जैसी रखें। Mixed spacing से fallbacks होते हैं।
- एक-आयामी layouts के लिए flexbox को प्राथमिकता दें। Navs, toolbars, button groups और card rows सीधे map होते हैं।
- Card grids के लिए बराबर tracks वाला grid इस्तेमाल करें। Uniform columns साफ़ wrapping rows बनते हैं।
- Asymmetric layouts को स्पष्ट containers में रखें। अपनी flex row में sidebar और content area से साफ़ nested stacks बनते हैं।
- जिन elements को फैलना चाहिए उनके लिए
flex: 1इस्तेमाल करें। यह Fill का संकेत देता है। max-widthऔरmargin: 0 autoसे content centre करें। यह centred box बनता है जो centred रहता है।position: absoluteअसली overlays के लिए ही रखें। सामान्य layout के लिए इसका इस्तेमाल न करें।- Layout के लिए negative margins से बचें। वे ऐसे overlaps बनाते हैं जिन्हें stack नहीं किया जा सकता।
- Custom properties से colors के नाम रखें। Styles & variables (Pro) के साथ,
--brand-primaryएकbrand/primaryvariable बन जाता है। - असली text इस्तेमाल करें। Images में बना text एडिटेबल text layers नहीं बन सकता।
अपनी mapping ख़ुद देखें
आपकी CSS कैसे map होती है, यह सीखने का सबसे तेज़ तरीका है उसे import करना। HTML to Figma flow से code paste करें या folder upload करें, Chrome extension से local build capture करें, या किसी AI tool से उसे MCP पर भिजवाएं। फिर results screen खोलें, Auto Layout share जांचें और absolute रहे frames के diagnostics पढ़ें।
मूल पेज की hidden, locked layer जोड़ने के लिए Reference screenshot (Pro) on करें, ताकि आप import और browser render के बीच toggle कर सकें। जब आपको ज़्यादा विस्तृत layer structure चाहिए, तो Detailed layers (Pro) on करें।
पेज frames कैसे बनते हैं, इस पर और जानने के लिए HTML to frame conversion के बारे में पढ़ें, और importer जो कुछ support करता है उसके लिए features देखें। Docs हर import option को विस्तार से कवर करते हैं।
अक्सर पूछे जाने वाले सवाल
- क्या HTML to Frames, Auto Layout बनाने के लिए मेरी CSS पढ़ता है?
- यह CSS properties copy करने के बजाय browser की render हुई geometry से काम करता है। पेज पहले pixel-exact बनाया जाता है, फिर stacks, gaps, padding और alignment अंदर से बाहर की ओर निकाले जाते हैं। हर child की position 2 px के भीतर verify की जाती है, इसलिए नतीजा वही होता है जो browser ने बनाया, चाहे layout flexbox, grid या सादे block flow से आया हो।
- जब Figma में grid Auto Layout नहीं है, तो CSS Grid कैसे convert होता है?
- Grids को उस सबसे क़रीबी structure से map किया जाता है जो verify हो। बराबर columns वाले uniform grids आमतौर पर wrapping rows बनते हैं, asymmetric layouts nested horizontal और vertical stacks बनते हैं, और जटिल spans या overlaps वाली cells constraints के साथ absolute positions रखती हैं। दोनों ही तरह, visual नतीजा browser से मेल खाता है।
- जब कोई frame Auto Layout नहीं बन सकता, तब क्या होता है?
- पहले एक आसान layout plan आज़माया जाता है। अगर वह भी verification में fail हो, तो frame absolute positions रखता है और उसे Stretch, Scale, Center, Min या Max जैसे समझदार constraints मिलते हैं, ताकि resize होने पर भी वह सही व्यवहार करे। Results screen बताती है कि ऐसा हर frame absolute क्यों रहा, जिससे आपको अपनी CSS adjust करने में मदद मिलती है।
- क्या flex-grow, Figma में Fill container बनता है?
- हाँ, आम स्थितियों में। flex-grow या flex: 1 से बढ़ने वाले children, Fill container बन जाते हैं, और बराबर cards की rows बराबर Fill items बन जाती हैं। जिन header bars में logo, menu और icons दूर-दूर फैले हों, वहां gap item Fill बनता है ताकि frame resize करने पर बाहरी elements किनारों पर pinned रहें।
- आमतौर पर पेज का कितना हिस्सा Auto Layout में आता है?
- असली sites पर हमारे tests में, लगभग 86 से 97 प्रतिशत frames पर Auto Layout निकाला गया, उदाहरण के लिए एक product site पर 93 प्रतिशत और Linear व Stripe पर 88 प्रतिशत। नतीजे इस पर निर्भर करते हैं कि CSS कैसे लिखी गई है; consistent gaps, flexbox और स्पष्ट containers यह हिस्सा बढ़ाते हैं।
Web को दोबारा बनाना बंद करें।
Link paste करें और कुछ ही सेकंड में असली, एडिटेबल, रिस्पॉन्सिव Figma layers पाएं। शुरुआत free — हर महीने 10 imports।