Figma डिज़ाइन से काम करने वाला ऐप बनाएँ

अगर आपका ऐप Figma में पहले से डिज़ाइन हो चुका है, तो MonstarX सीधे उसी डिज़ाइन से ऐप बना सकता है। आपको एक काम करने वाला ऐप मिलता है जो दिखने में आपकी स्क्रीन जैसा है — उनकी असली तस्वीरों और आइकन, उनके रंगों और फ़ॉन्ट, और आपके प्रोटोटाइप के नेविगेशन के साथ — और साथ में वह डेटा, फ़ॉर्म और साइन इन भी जिनकी ओर आपकी स्क्रीन इशारा करती हैं।

मुझे क्या चाहिए?

आपके डिज़ाइन की एक .fig फ़ाइल। Figma में डिज़ाइन खोलें और File → Save local copy… इस्तेमाल करें — इससे वह फ़ाइल सेव होती है जिसे MonstarX पढ़ता है। यह Figma की Design फ़ाइल होनी चाहिए: FigJam बोर्ड और Figma Slides डेक काम नहीं करते, और ऐसी फ़ाइल डालने पर MonstarX आपको बता देता है।

Figma फ़ाइल से ऐप कैसे बनाएँ?

1. प्रोजेक्ट पेज पर आयात के पास Figma पर क्लिक करें (यह आयात मेनू में भी है)। आप .fig फ़ाइल को प्रॉम्प्ट बॉक्स पर छोड़ या पेस्ट भी कर सकते हैं।

   

2. अपनी .fig फ़ाइल डालें या चुनें। MonstarX उसे आपके ब्राउज़र में पढ़ता है — “फ़ाइल पढ़ रहा हूँ…”, “हर पेज खुल रहा है…”, “स्क्रीन के डिज़ाइन बन रहे हैं…” — और अभी कुछ भी अपलोड नहीं होता।

3. जिन स्क्रीन को बनाना है, उन पर टिक करें। फ़ाइल का हर पेज उसके फ़्रेम की छोटी तस्वीरों के साथ दिखता है। जो फ़्रेम स्क्रीन जैसे दिखते हैं, उन पर पहले से टिक लगा होता है; जो पेज अंदरूनी काम के लगते हैं (कवर, डिज़ाइन सिस्टम, आर्काइव), वे बंद और बिना टिक के रहते हैं। हर पेज पर सभी पर टिक करें या सभी से टिक हटाएँ इस्तेमाल करें।

4. इसे क्या करना चाहिए? (वैकल्पिक) में वह लिखें जो डिज़ाइन नहीं दिखा सकता: इसे कौन इस्तेमाल करता है, डेटा कहाँ से आता है, कोई साइन अप या भुगतान करे तो क्या होता है।

   

5. नीचे बाएँ कोने में मॉडल देख लें (यह वही है जो प्रॉम्प्ट बॉक्स में चुना था; चाहें तो यहीं बदल दें)।

6. ऐप बनाएँ · 4 स्क्रीन दबाएँ — या पहले योजना बनाएँ, ताकि MonstarX बनाने से पहले स्क्रीन को ध्यान से देखे और वे बातें पूछे जो डिज़ाइन से पता नहीं चलतीं।

स्क्रीन अपलोड होती हैं (“डिज़ाइन अपलोड हो रहा है…”), फ़ाइल के नाम पर प्रोजेक्ट बनता है, और पहला बिल्ड शुरू हो जाता है।

MonstarX मेरे डिज़ाइन से क्या-क्या लेता है?

• हर स्क्रीन की तस्वीर — ताकि बिल्डर ठीक वही देखे जो आपने बनाया, और काम करते हुए अपने पेजों का उससे मिलान करे।
• हर स्क्रीन का बारीक विवरण — लेआउट, स्पेसिंग, हर टेक्स्ट अपने फ़ॉन्ट और साइज़ के साथ, रंग, बॉर्डर, कोने, शैडो।
• आपकी तस्वीरें और आइकन — डिज़ाइन की हर तस्वीर और आइकन ऐप में एक फ़ाइल बन जाती है, इसलिए किसी चीज़ की जगह स्टॉक फ़ोटो नहीं लगती।
• आपका डिज़ाइन सिस्टम — रंगों के वेरिएबल (लाइट और डार्क), फ़ॉन्ट, कोनों की गोलाई और शैडो।
• कंपोनेंट — दस स्क्रीन पर इस्तेमाल हुआ एक बटन ऐप में एक ही कंपोनेंट बनता है।
• प्रोटोटाइप लिंक — किसी चीज़ पर टैप करने से जहाँ पहुँचते हैं, वह असली नेविगेशन बन जाता है।

एक ही नाम वाली स्क्रीन (जैसे फ़्रेमों की एक पूरी कड़ी, जिन सबका नाम “Desktop” है) उनके पहले शब्दों से अलग पहचानी जाती हैं, ताकि आप जान सकें कौन-सी कौन है।

संकेत

एक ही पेज की अलग-अलग हालतें — खुला डायलॉग, खाली सूची, कोई त्रुटि — अलग फ़्रेम के रूप में भी आ सकती हैं। MonstarX उन्हें अलग पेज नहीं, बल्कि उसी पेज की हालतों के रूप में बनाता है।

चैट में क्या दिखता है?

आपका पहला अनुरोध कुछ ऐसा होता है: “मेरा Figma डिज़ाइन ‘bloom.fig’ (4 स्क्रीन: Welcome, Home, Plant detail, Add plant) से यह ऐप बनाएँ। इसका रूप बिल्कुल डिज़ाइन जैसा हो और यह असल में काम करे।”, और उसके नीचे स्क्रीन की एक पट्टी होती है। किसी स्क्रीन को उसके साइज़, पेज और फ़ाइल के साथ पूरे आकार में देखने के लिए उस पर क्लिक करें। बनाते समय चैट में “Home का डिज़ाइन देखा जा रहा है” और “/ की तुलना Home के डिज़ाइन से की गई” जैसे स्टेप दिखते हैं।

क्या बाद में और स्क्रीन जोड़ सकते हैं?

हाँ। किसी प्रोजेक्ट की चैट में .fig फ़ाइल छोड़ें, पेस्ट करें या अटैच करें, और Figma से स्क्रीन जोड़ें खुल जाता है। नई स्क्रीन पर टिक करें, बताएँ कि उन्हें क्या करना चाहिए, और ये स्क्रीन बनाएँ दबाएँ। वे प्रोजेक्ट के डिज़ाइन में जुड़ जाती हैं और बाकी ऐप से मेल खाती हुई बनती हैं। एक प्रोजेक्ट में डिज़ाइन की 60 स्क्रीन तक रहती हैं।

सीमाएँ क्या हैं?

सीमा	मान
हर बिल्ड में स्क्रीन	30 तक
हर प्रोजेक्ट में स्क्रीन	60 तक
हर डिज़ाइन में तस्वीरें और आइकन	400 फ़ाइलें और 150 MB तक (हर एक 8 MB तक)

.fig फ़ाइल 250 MB तक की हो सकती है, लेकिन बहुत बड़ी फ़ाइल (जैसे पूरा डिज़ाइन सिस्टम किट) फिर भी ब्राउज़र के खोलने के लिए भारी पड़ सकती है। अपने ऐप की स्क्रीन को डिज़ाइन सिस्टम के पेजों के बिना एक अलग फ़ाइल में ले जाएँ, और उसकी लोकल कॉपी सेव करें।

अक्सर पूछे जाने वाले सवाल

क्या फ़ाइल की जगह Figma लिंक पेस्ट कर सकते हैं?

इस डायलॉग में नहीं — यह खुद .fig फ़ाइल पढ़ता है। Figma में File → Save local copy… इस्तेमाल करें। (कुछ डिज़ाइन टूल अपना काम आपका कोडिंग एजेंट के ज़रिए भी भेज सकते हैं।)

क्या डिज़ाइन डालते ही अपलोड हो जाता है?

नहीं। फ़ाइल आपके ब्राउज़र में पढ़ी जाती है; सिर्फ़ वे स्क्रीन अपलोड होती हैं जिन पर आपने टिक किया है, और वह भी बनाएँ बटन दबाने पर।

क्या ऐप बिल्कुल डिज़ाइन जैसा दिखेगा?

लक्ष्य यही है: बिल्डर हर स्क्रीन को उसके सटीक मानों से मिलाता है और बनाते समय अपने पेजों की तुलना आपकी स्क्रीन से करता है। आप चैट में फ़र्क बता सकते हैं या संपादन मोड से उन्हें ठीक कर सकते हैं।

मेरे डिज़ाइन में सिर्फ़ फ़ोन की स्क्रीन हैं। कंप्यूटर पर क्या होगा?

फ़ोन वाले डिज़ाइन चौड़ी स्क्रीन पर बीच में एक कॉलम के रूप में बनते हैं, इसलिए ऐप कंप्यूटर पर भी काम करता है।

MonstarX कहता है कि मेरी फ़ाइल Figma फ़ाइल नहीं है। क्यों?

हो सकता है वह FigJam बोर्ड, Figma Slides डेक या किसी दूसरे प्रोग्राम की .fig फ़ाइल हो। Figma में डिज़ाइन खोलें और Figma Design फ़ाइल सेव करने के लिए File → Save local copy… इस्तेमाल करें।

संबंधित

पहले डिज़ाइन करेंअभी डिज़ाइन नहीं है? तैयार स्क्रीनों में से लुक चुनें।

पहले योजना बनाएँउन बातों पर सवाल जो डिज़ाइन नहीं दिखा सकता।

संपादन मोडपेज पर क्लिक करके लुक को बारीकी से सँवारें।

ऐप आयात करेंडिज़ाइन की जगह कोड है?