Figma Design Tokens से Tailwind: Colors, Type और Spacing

तुरंत जवाब: कोई Figma color/text/spacing वैल्यू Tailwind में इस तरह मैप होती है कि उसे Tailwind के अपने यूटिलिटी स्केल से मैच किया जाता है — सबसे नज़दीकी spacing step, सबसे नज़दीकी color, मैचिंग type size। जब कोई वैल्यू उस स्केल से बाहर होती है, तो आउटपुट bg-[#f4f4f5] जैसी arbitrary-value क्लास पर फॉलबैक करता है, न कि आपके config में मौजूद ही न होने वाला कोई नया theme color गढ़ता है।

Figma फाइल में "design tokens" का असल मतलब

मैपिंग समझ आने से पहले, यह साफ करना ज़रूरी है कि Figma में token क्या गिना जाता है और one-off वैल्यू क्या:

• Color styles — एक saved, named fill (जैसे "Gray/100") जो पूरी फाइल में लगातार इस्तेमाल होती है, बजाय किसी raw hex वैल्यू के जिसे एक बार चुनकर कभी दोबारा इस्तेमाल नहीं किया गया।
• Text styles — font, size, weight और line-height का एक saved कॉम्बिनेशन, जो headings या body text पर लगातार लगाया जाता है।
• Spacing वैल्यूज़ — आमतौर पर स्टाइल की तरह "saved" नहीं होतीं, लेकिन कई फ्रेम्स में बार-बार इस्तेमाल होने वाली consistent Auto Layout gap/padding नंबर्स।

Tailwind में मैपिंग तब सबसे बेहतर काम करती है जब Figma फाइल असल में इन्हें consistently इस्तेमाल करती है। ऐसी फाइल जहाँ हर button एक ही saved "Primary" color style इस्तेमाल करता है, वह एक ही Tailwind क्लास में साफ-साफ कन्वर्ट होती है जो हर जगह रीयूज़ होती है। ऐसी फाइल जहाँ पाँच buttons में से हर एक का हल्का-सा अलग one-off blue है, वह पाँच थोड़ी-थोड़ी अलग Tailwind वैल्यूज़ में कन्वर्ट होती है — क्योंकि डिज़ाइन में असल में यही मौजूद है, यह कन्वर्जन की खामी नहीं है।

वैल्यूज़ Tailwind के स्केल में कैसे रिज़ॉल्व होती हैं

Tailwind का प्रस्ताव spacing, color और type के लिए एक सीमित, पहले से तय स्केल है — कोई खुला पैलेट नहीं। उस स्केल में कन्वर्ट करने का मतलब है मैच करना, गढ़ना नहीं:

यह एक जानबूझकर लिया गया फैसला है: MarkupGen का Tailwind आउटपुट Tailwind के असली डिफ़ॉल्ट स्केल के मुकाबले रिज़ॉल्व होता है, न कि हर वैल्यू को "फिट" कराने के लिए कोई कस्टम tailwind.config थीम जनरेट करता है। इससे आउटपुट डिज़ाइन की असली वैल्यूज़ के बारे में ईमानदार रहता है — कोई off-scale color arbitrary-value क्लास के तौर पर दिखता है, जो एक दिखने वाला सिग्नल है कि डिज़ाइनर से यह चेक करना worth है कि उसे shared पैलेट पर नज़दीक लाना चाहिए या नहीं, न कि यह किसी silent rounding error की तरह छुप जाए।

एक्सपोर्ट रिव्यू करते वक्त इसका क्या मतलब है

• Arbitrary-value क्लासेज़ एक सिग्नल हैं, बग नहीं। आउटपुट में bg-[#...] क्लासेज़ का एक क्लस्टर आमतौर पर इसका मतलब है कि डिज़ाइन में खुद ही near-duplicate one-off colors हैं जिन्हें shared styles में consolidate करना चाहिए — यह डिज़ाइन को वापस बताने लायक बात है, अकेले code में "फिक्स" करने लायक नहीं।
• रिपीट होने वाले components में spacing consistency चेक करें, क्योंकि Tailwind का स्केल हर वैल्यू को अलग-अलग राउंड करता है — दो अलग फ्रेम्स में एक जैसा दिखने वाला visual gap एक ही क्लास में रिज़ॉल्व होना चाहिए अगर डिज़ाइन में वही नंबर इस्तेमाल हुआ था।
• अगर प्रोजेक्ट में पहले से tailwind.config थीम है, तो जनरेट हुई arbitrary वैल्यूज़ को उससे क्रॉस-रेफरेंस करें — जो color Tailwind के डिफ़ॉल्ट पैलेट के हिसाब से off-scale लगता है, वह शायद पहले से आपके खुद के config में एक named color हो, जिसे हाथ से swap किया जा सकता है।

पूरे वर्कफ़्लो के लिए — plugin export, AI generation, editing, output selection — Figma to Tailwind CSS: A Practical Conversion Guide देखें।

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

यह देखने का सबसे तेज़ तरीका कि आपकी फाइल के colors और spacing कितनी consistently कन्वर्ट होते हैं, किसी असली फ्रेम को इसमें से गुज़ारना है। MarkupGen फ्री में आज़माएँ, या इसमें क्या-क्या शामिल है यह जानने के लिए Figma to Tailwind converter पेज देखें।