अपनी डिज़ाइन को निर्यात करने का तरीका
1
अपनी डिज़ाइन खोलें
Flowstep के अंदर वह डिज़ाइन खोजें जिसे आप निर्यात करना चाहते हैं।
2
निर्यात मेनू खोलें
टूलबार या डिज़ाइन पैनल में निर्यात विकल्प खोजें। निर्यात सेटिंग्स खोलने के लिए इसे चुनें।
3
अपना प्रारूप चुनें
अपने उपयोग के मामले के आधार पर JPG या PNG में से कोई एक चुनें (नीचे तुलना देखें)।
4
फ़ाइल डाउनलोड करें
अपनी पसंद की पुष्टि करें और निर्यात की गई इमेज को अपने डिवाइस पर डाउनलोड करें।
JPG बनाम PNG: आपको कौन सा प्रारूप उपयोग करना चाहिए?
निर्यात कोड
इमेजों के अलावा, Code बटन आपकी डिज़ाइन को React + Tailwind कोड के रूप में निर्यात करता है — एक स्निपेट कॉपी करें, या पूरे बंडल को ZIP के रूप में डाउनलोड करें। आप एक स्क्रीन, कई चयनित स्क्रीन्स, या एक पूरी फ़ाइल को एक बार में निर्यात कर सकते हैं। जब आप एक से अधिक स्क्रीन निर्यात करते हैं, तो प्रत्येक अपनी स्वयं की घटक फ़ाइल बन जाती है और स्क्रीन्स के बीच कोई भी नेविगेशन जो आपने सेट किया है वह उत्पन्न कोड में जुड़ा हुआ है, इसलिए निर्यात की गई ऐप्लिकेशन अंत से अंत तक क्लिक करने योग्य है। बंडल स्व-निहित हैं: डिज़ाइन में उपयोग की गई इमेजें (उन सहित जो आपने चैट पैनल में संलग्न की हैं) एकpublic/assets/ फ़ोल्डर में शामिल हैं जिसमें कोड स्थानीय पथ के द्वारा उनका संदर्भ देता है, इसलिए निर्यात यथावत् चलता है।
डाउनलोड की गई फ़ाइलें — इमेजें और कोड बंडल दोनों — उस स्क्रीन के नाम पर रखी गई हैं जिससे वे संबंधित हैं (यदि स्क्रीन का कोई नाम नहीं है तो फ़ाइल का नाम वापस जाता है), जो कई स्क्रीन्स के साथ काम करते समय निर्यात को पहचानने में आसान बनाता है।
अपनी कोडिंग एजेंट को डिज़ाइन भेजें
फ़ाइल डाउनलोड करने के बजाय, आप एक डिज़ाइन सीधे AI कोडिंग सहायक को दे सकते हैं। टूलबार में Send to your coding agent पर क्लिक करें — या निर्यात संवाद खोलें और समान विकल्प चुनें — अपनी एजेंट के लिए पेस्ट करने के लिए तैयार प्रॉम्प्ट कॉपी करने के लिए:आपकी एजेंट MCP के माध्यम से इन स्क्रीन्स को पढ़ती है और उन्हें आपके रेपो में बनाती है। इस प्रॉम्प्ट को Claude, Cursor, या अपनी पसंदीदा एजेंट में पेस्ट करें।प्रॉम्प्ट आपकी एजेंट को Flowstep MCP सर्वर पर स्क्रीन्स लाने और उन्हें अपनी कोडबेस में फिर से बनाने के लिए कहता है। आप एक स्क्रीन, कई चयनित स्क्रीन्स, या एक पूरी फ़ाइल को एक बार में सौंप सकते हैं — प्रॉम्प्ट आपके द्वारा चुने गए के अनुसार अनुकूलित होता है। यह Flowstep MCP सर्वर का उपयोग करता है, इसलिए पहले एक MCP क्लाइंट कनेक्ट करें। समर्थित क्लाइंट्स के लिए MCP सर्वर अवलोकन देखें और कनेक्ट करने के लिए Quickstart देखें।
यदि आपको अपनी डिज़ाइन को वेक्टर संपादन वर्कफ़्लो में ले जाने की आवश्यकता है, तो इसे सीधे Figma में कॉपी करें। Flowstep डिज़ाइन को तुरंत Figma में कॉपी करें देखें।