Figma Auto Layout से React: फ्रेम्स से Components तक

तुरंत जवाब: Figma Auto Layout की प्रॉपर्टीज़ (direction, gap, padding, alignment) React में भी वही Flexbox CSS में मैप होती हैं जो कहीं और होती हैं। जो अलग है वह है वह सब कुछ जो React इसके ऊपर जोड़ता है: यह तय करना कि कौन-से Auto Layout फ्रेम अपने खुद के component बनें, Figma component variants को props में मैप करना, और ऐसे children को हैंडल करना जो रिपीट होते हैं या कंडीशनली बदलते हैं।

CSS मैपिंग नहीं बदलती — component boundaries बदलती हैं

अगर आप पहले से जानते हैं कि Auto Layout Flexbox में कैसे मैप होता है, तो इसका styling वाला आधा हिस्सा जाना-पहचाना है: direction flex-direction बन जाती है, gap gap बन जाता है, padding padding बन जाती है, alignment justify-content/align-items बन जाती है। React इसमें से कुछ भी नहीं बदलता।

React CSS लेयर के ऊपर जो structure जोड़ता है वह हैं वे फैसले जो एक फ्लैट HTML/CSS एक्सपोर्ट को लेने की ज़रूरत नहीं पड़ती:

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

• ज़्यादा component बना देना (Over-componentizing)। हर nested Auto Layout फ्रेम को उसकी अपनी component फाइल बना देने से एक-लाइन wrapper components का गहरा tree बन जाता है, जो reuse बढ़ाए बिना सिर्फ indirection जोड़ता है। कोई फ्रेम अपना component तभी डिज़र्व करता है जब वह कहीं और भी reuse होता हो या उसे अलग करने से code पढ़ना काफी आसान हो जाता हो।
• variant मैपिंग खो देना। Figma component variants (जैसे किसी button की default/hover/disabled states) props बनने के लिए हैं, चार अलग-अलग hardcoded components नहीं। इसे स्किप करने से एक रीयूज़ेबल button हर state के लिए copy-paste किए हुए मार्कअप में बदल जाता है।
• जो dynamic होना चाहिए उसे hardcode कर देना। कोई फ्रेम जो डिज़ाइन में तीन बार रिपीट होता है क्योंकि वहाँ तीन sample items थे, उसे एक जैसी JSX की तीन कॉपियाँ नहीं बनना चाहिए — उसे एक ऐसा component बनना चाहिए जो किसी array से render होता है।
• जहाँ डिज़ाइन का इरादा fluid resizing का था वहाँ fixed pixel widths। Auto Layout का "fill container" व्यवहार component की CSS में flex-grow/percentage-based sizing में ट्रांसलेट होना चाहिए, न कि किसी फिक्स्ड width में जो ओरिजिनल फ्रेम के responsive इरादे को तोड़ देती है।

MarkupGen इसे कैसे हैंडल करता है

MarkupGen का React आउटपुट अपने बाकी फॉर्मेट्स जैसे ही चार-स्टेप वर्कफ़्लो को फॉलो करता है: प्लगइन से फ्रेम एक्सपोर्ट करें, जो structure, styles, images और component relationships साथ में कैप्चर करता है; AI उसी असली structure से code बनाता है; ज़रूरत हो तो in-app editor में content, fonts या layout रिफाइन करें; फिर फाइनल पैकेज एक्सपोर्ट करें। Auto Layout की direction, gap, padding और alignment हर component के अंदर उसी तरह Flexbox rules में मैप होती हैं जैसे किसी प्लेन CSS एक्सपोर्ट में होतीं, और resizing constraints फिक्स्ड dimensions की बजाय responsive व्यवहार के तौर पर आगे बढ़ती हैं। हर एक्सपोर्ट को एक ऑटोमेटिक AI क्वालिटी स्कोर मिलता है जो live preview को ओरिजिनल डिज़ाइन से कंपेयर करता है, ताकि एक नज़र में पता चल जाए कि किसी एक्सपोर्ट को शिप करने से पहले दोबारा देखने की ज़रूरत है या नहीं।

Figma फाइल से काम करने वाले React components तक पहुँचने का पूरा step-by-step — आउटपुट फॉर्मेट सिलेक्शन सहित — जानने के लिए Figma to React: A Practical Workflow देखें।

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

यह देखना कि किसी असली डिज़ाइन का Auto Layout structure React components में कैसे बदलता है, यह जज करने का सबसे तेज़ तरीका है कि componentization उससे मैच करता है या नहीं जो आप हाथ से बनाते। अपनी Figma फाइल पर MarkupGen फ्री में आज़माएँ, या इसमें क्या-क्या शामिल है यह जानने के लिए Figma to React converter पेज देखें।