वायरफ्रेम टूल क्या है?

पेज लेआउट और UI मॉकअप सेकंडों में स्केच करें। बटन, टेक्स्ट ब्लॉक, इमेज, इनपुट फ़ील्ड जैसे सामान्य UI एलिमेंट कैनवास पर ड्रैग करें, फिर PNG में एक्सपोर्ट करें या JSON में सेव करके बाद में एडिटिंग जारी रखें।

कैनवस fabric.js पर बना है और पूरा एलिमेंट सेट देता है: रेक्टैंगल, टेक्स्ट ब्लॉक, बटन, इमेज प्लेसहोल्डर, इनपुट फ़ील्ड, नेवबार, कार्ड, चेकबॉक्स, ड्रॉपडाउन, रेडियो ग्रुप, प्रोग्रेस बार, स्लाइडर और एनोटेशन के लिए स्टिकी नोट। ज़ूम और फ़िट-टू-स्क्रीन से भरे हुए लेआउट भी साफ़ दिखते हैं, और कैनवस को मोबाइल, टैबलेट या डेस्कटॉप चौड़ाई पर सेट कर सकते हैं। अनडू, रीडू, ग्रुप, अनग्रुप और z-ऑर्डर सब कीबोर्ड से होते हैं। शेयर के लिए PNG या SVG, या उसी स्थिति में दोबारा खुलने वाली JSON फ़ाइल एक्सपोर्ट कर सकते हैं।

उपयोग कैसे करें

1. टूलबार से एक UI तत्व चुनें — जैसे रेक्टेंगल, टेक्स्ट ब्लॉक, बटन, इमेज प्लेसहोल्डर, या इनपुट फ़ील्ड — और उसे रखने के लिए कैनवास पर क्लिक करें।
2. तत्वों को पुनः स्थित करने के लिए ड्रैग करें, हैंडल खींचकर आकार बदलें, और डबल-क्लिक करके टेक्स्ट संपादित करें। आसान मूवमेंट के लिए तत्वों को एक साथ ग्रुप करें।
3. शेयर करने के लिए वायरफ्रेम को PNG इमेज के रूप में एक्सपोर्ट करें, या बाद में रीलोड और एडिट जारी रखने के लिए JSON के रूप में सेव करें।

कब उपयोग करें

• स्टेकहोल्डर रिव्यू से 15 मिनट पहले तीन स्क्रीन वेरिएंट खींचकर दिशा तय करना।
• लेआउट को शब्दों में समझाने के बजाय Slack में एक स्केच चिपका देना।
• जूनियर डिज़ाइनर को लो-फ़िडेलिटी और हाई-फ़िडेलिटी काम का फर्क समझाना।

परिणाम

एक प्रोडक्ट मैनेजर एक लोगो प्लेसहोल्डर, ईमेल और पासवर्ड इनपुट फ़ील्ड, एक साइन-इन बटन और एक "पासवर्ड भूल गए" लिंक के साथ मोबाइल ऐप लॉगिन स्क्रीन स्केच करता है — फिर Slack चैनल में शेयर करने के लिए PNG एक्सपोर्ट करता है।

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

ये टूल Figma से कैसे अलग है?

Figma हाई-फ़िडेलिटी काम के लिए है—कंपोनेंट्स, प्रोटोटाइप, टीम कोलैबोरेशन सब हैं। ये टूल जान-बूझकर लो-फ़िडेलिटी पर रुका है: बुनियादी आकारों का एक छोटा सेट, स्टाइल की उलझनें नहीं। एक स्क्रीन का आइडिया कुछ ही मिनट में पूरा हो जाता है। उद्देश्य सोच साफ़ करना है, हैंडऑफ नहीं।

एलिमेंट को पिक्सेल-दर-पिक्सेल कैसे हिलाएँ?

एलिमेंट सेलेक्ट करके एरो की दबाएँ, हर बार 1 पिक्सेल खिसकेगा। Shift के साथ एरो दबाने पर 10 पिक्सेल जंप होगा। आकार बदलने के लिए कोनों के हैंडल खींचें; Shift दबाकर खींचेंगे तो अनुपात बना रहेगा।

एक वायरफ़्रेम के एलिमेंट दूसरे में कॉपी कर सकते हैं?

दोनों फ़ाइलें JSON में एक्सपोर्ट करें, टेक्स्ट एडिटर में जिन एलिमेंट्स को चाहिए उन्हें पहले JSON से दूसरी में पेस्ट करें, फिर import करें—नए आकार दिख जाएँगे। ज़्यादातर लोग इतनी मेहनत के बजाय एक ही फ़ाइल में Ctrl+D से डुप्लिकेट कर लेते हैं।

JSON कभी-कभी PNG से बड़ा क्यों होता है?

JSON हर शेप की सारी प्रॉपर्टी—पोज़िशन, फ़िल, स्ट्रोक, फ़ॉन्ट, टेक्स्ट—पढ़ने योग्य टेक्स्ट में रखता है। PNG एक सपाट रास्टर इमेज है। बहुत सारे टेक्स्ट वाले वायरफ़्रेम में JSON, PNG से बड़ा निकल सकता है, पर बाद में एडिटिंग सिर्फ़ JSON से ही चलेगी।

क्या अपने कस्टम शेप जोड़े जा सकते हैं?

टूल के अंदर सीधे जोड़ने का विकल्प नहीं है, पर मौजूदा शेप्स को Ctrl+G से ग्रुप करके सर्च बार या टैब-स्ट्रिप जैसा रीयूज़बल यूनिट बना सकते हैं। JSON में सेव करें, उस ग्रुप वाले हिस्से को कॉपी करके नए वायरफ़्रेम में चिपकाएँ—यही आपकी अपनी मिनी लाइब्रेरी बन जाती है।

संबंधित उपकरण