Figma से वेबसाइट: लैंडिंग पेज लॉन्च करें
Figma से एक मार्केटिंग फ़्रेम को HTML, CSS और JavaScript में बदलें, फिर तैयार साइट को पब्लिश करें।
Figma डिज़ाइन को काम करने वाले वेब ऐप में बदलें
एक Figma फ्रेम लिंक पेस्ट करें, बताएं कि पेज को क्या करना चाहिए, और Manus को वह फ्रंटएंड और बैकएंड बनाने दें जिसे आप पब्लिश कर सकते हैं।
डिज़ाइन फ्रेम से कार्यशील पेज तक
Manus, एक फंक्शनल वेब ऐप बनाने के लिए Figma फ़्रेम में लेआउट, कंपोनेंट्स, फॉन्ट्स और रंगों को पढ़ता है।
डिज़ाइन फ्रेमवर्किंग पेज
उदाहरणात्मक उदाहरण।
ज़रूरी पेजों के लिए डिज़ाइन को कोड में बदलें
किसी लैंडिंग पेज, डैशबोर्ड या कई जुड़े हुए फ़्रेम से शुरू करें। हर रिक्वेस्ट डिज़ाइन के पीछे के बिहेवियर का वर्णन कर सकती है।
Figma से कोड: एक वर्किंग डैशबोर्ड बनाएं
एक एडमिन डैशबोर्ड डिज़ाइन शेयर करें और अपनी ज़रूरत के डेटा और एक्शन बताएं। Manus फ्रंटएंड और बैकएंड कंपोनेंट्स के साथ एक वेब ऐप बनाता है।
Figma से ऐप: पूरे फ़्लो को कनेक्ट करें
कई फ्रेम्स को एक ही डिज़ाइन-टू-कोड रिक्वेस्ट में लाएं। बताएं कि पेज कैसे जुड़े हैं, क्लिक करने पर क्या होता है और कौन से कंपोनेंट स्टेट्स महत्वपूर्ण हैं।
Figma को प्लगइन नहीं, एक लिंक से कोड में बदलें
दस्तावेज़ में बताए गए वर्कफ़्लो के लिए किसी अलग Figma टू कोड प्लगइन की ज़रूरत नहीं है। अपना Figma अकाउंट कनेक्ट करें, एक फ्रेम लिंक पेस्ट करें और बताएं कि पेज पर क्या काम करना चाहिए।
अपनी साइट प्रकाशित करें, फिर इसे बेहतर बनाते रहें
AI डिज़ाइन टू कोड सिर्फ़ प्रीव्यू पर खत्म नहीं होता। वेबसाइट पब्लिश करें, अपना डोमेन कनेक्ट करें, और एक बातचीत में वे बदलाव बताएँ जो आप चाहते हैं।
एक लिंक, एक स्पष्ट रिक्वेस्ट, और एक ऐसी साइट जिसे आप पब्लिश कर सकते हैं
समझाएं कि आपके फ्रेम कैसे जुड़े हैं। फिर परिणाम की समीक्षा करें और बातचीत में बदलाव करना जारी रखें।
Manus के साथ बनाना जारी रखें
अक्सर पूछे जाने वाले सवाल
मैं Manus के साथ Figma को कोड में कैसे बदलूं?
अपने Figma अकाउंट को Manus से कनेक्ट करें, फिर एक Figma फ्रेम का लिंक शेयर करें और जो वेब ऐप आप बनाना चाहते हैं उसका वर्णन करें। Manus उसका लेआउट, कंपोनेंट्स, फॉन्ट और रंग पढ़ता है, फिर फ्रंटएंड और आवश्यक बैकएंड कंपोनेंट्स बनाता है।
क्या Manus Figma को HTML और CSS में बदल सकता है?
हाँ। डॉक्यूमेंटेड Figma इम्पोर्ट फ्रंटएंड के लिए HTML, CSS और JavaScript बनाता है, साथ ही अनुरोधित वेब ऐप के लिए आवश्यक बैकएंड घटक भी। डिफ़ॉल्ट रूप से, Manus इसे React और Tailwind CSS प्रोजेक्ट के रूप में बनाता है, जो ब्राउज़र में HTML, CSS और JavaScript के रूप में चलता है। फ़्रेम लिंक के साथ अपनी ज़रूरत के पेज और व्यवहार का वर्णन करें।
क्या Manus Figma से React और Figma से Tailwind को सपोर्ट करता है?
हां। Manus डिफ़ॉल्ट रूप से React और Tailwind CSS के साथ वेबसाइट बनाता है, इसलिए Figma से इम्पोर्ट किया गया डिज़ाइन Tailwind से स्टाइल किया गया React फ्रंटएंड बन जाता है, साथ ही आपकी रिक्वेस्ट के लिए जरूरी बैकएंड कोड भी। आप प्रोजेक्ट कोड को किसी प्राइवेट GitHub रिपॉजिटरी में एक्सपोर्ट कर सकते हैं।
क्या मुझे Figma टू कोड प्लगइन चाहिए?
दस्तावेज़ में बताए गए फ़्लो का हिस्सा कोई अलग प्लगइन नहीं है। अपना Figma अकाउंट कनेक्ट करें, एक फ्रेम लिंक Manus के साथ शेयर करें और बताएं कि क्या बनाना है; जब आपके डिज़ाइन में कई पेज या स्टेट हों, तो आप और फ्रेम जोड़ सकते हैं।
क्या मुझे Figma MCP सर्वर इंस्टॉल करना होगा?
नहीं। Manus सीधे Figma साइन-इन के ज़रिए आपके Figma अकाउंट से कनेक्ट होता है। कनेक्ट करने के बाद, एक फ़्रेम लिंक इम्पोर्ट करें और ऐप का विवरण दें; इंस्टॉल या रन करने के लिए कोई अलग Figma MCP सर्वर नहीं है।
क्या मुझे Figma Dev Mode या पेड Figma सीट चाहिए?
नहीं। Manus Dev Mode के बजाय आपके कनेक्टेड Figma अकाउंट के ज़रिए फ़्रेम इम्पोर्ट करता है, और एक फ्री Figma अकाउंट भी कनेक्ट हो सकता है। Figma इस बात को सीमित करता है कि ऐप्स कितनी बार फ़ाइलें पढ़ सकते हैं: फ्री प्लान और Dev Mode के बिना सीट्स को एक छोटा मासिक कोटा मिलता है, जबकि Dev Mode वाली पेड सीट्स को बहुत अधिक लिमिट मिलती है। अगर आप लिमिट तक पहुंच जाते हैं, तो Manus आपको बता देता है।
क्या Figma से कोड AI वर्कफ़्लो एक काम करने वाला ऐप बना सकता है?
हाँ। एक Figma फ़्रेम लिंक शेयर करें और ऐप का वर्णन करें। Manus डिज़ाइन का विश्लेषण करता है और वर्किंग वेब ऐप के लिए फ्रंटएंड के साथ-साथ आवश्यक बैकएंड घटक भी बनाता है।
क्या Manus मल्टी-पेज डिज़ाइन और इंटरैक्शन संभाल सकता है?
हाँ। कई Figma फ़्रेम शेयर करें और उनके पेज फ़्लो, इंटरैक्शन या कंपोनेंट स्टेट्स, जैसे hover, समझाएं। इससे Manus को एक इंटरैक्टिव, मल्टी-पेज वेब अनुभव बनाने में मदद मिलती है।
क्या मैं कन्वर्ट करने के बाद साइट पब्लिश कर सकता हूँ?
हाँ। वेब ऐप का पूर्वावलोकन करें, Publish पर क्लिक करें, और यह ऑनलाइन उपलब्ध हो जाएगा। आप एक कस्टम डोमेन जोड़ सकते हैं और Manus को बदलाव बताकर इसमें सुधार करते रह सकते हैं।
यह Figma Make से कैसे अलग है?
Figma Make, Figma का एक प्रोडक्ट है। Manus के साथ, दर्शाया गया तरीका एक Figma फ़्रेम लिंक और एक वेब ऐप के लिए रिक्वेस्ट से शुरू होता है: इसमें बैकएंड कंपोनेंट शामिल हो सकते हैं, फिर आप साइट को पब्लिश करके बातचीत में इसे एडिट करना जारी रख सकते हैं।
क्या मैं Figma से Flutter या Figma से React Native आउटपुट का उपयोग कर सकता हूँ?
यह पेज Figma से वेब ऐप कन्वर्शन को कवर करता है। इम्पोर्ट गाइड फ्रंटएंड के लिए HTML, CSS और JavaScript बताती है; यह Flutter या React Native आउटपुट की पुष्टि नहीं करती।