हर प्रोजेक्ट की दाईं ओर live preview है — मॉकअप नहीं, बल्कि प्रोजेक्ट फ़ोल्डर की असली फ़ाइलें, लोकली सर्व होकर एजेंट के लिखते ही दोबारा पेंट होती हुईं. आप जो देखते हैं वही वाक़ई शिप होने वाला है.
Result, Code और Split
पैनल के ऊपर के टैब बदलते हैं कि आप उसी स्टेट को कैसे देखते हैं:
- Result — रेंडर हुआ डिज़ाइन. स्टीयरिंग यहीं होती है.
- Code — प्रीव्यू के नीचे का सोर्स, जब आप फ़ाइलें देखना चाहें.
- Split — दोनों साथ-साथ.
व्यूपोर्ट और ज़ूम
टूलबार के डिवाइस बटन नतीजे को तय चौड़ाई पर फिर से फ़्लो करते हैं — डेस्कटॉप, टैबलेट और फ़ोन — ताकि आप रन छोड़े बिना देख सकें कि डिज़ाइन कैसे व्यवहार करता है, और चौड़ाई चिप सीधे उन ब्रेकपॉइंट पर कूदती हैं जिन्हें gate जाँचता है (फ़ोन और टैबलेट साइज़ जहाँ nav और hit-target सबसे ज़्यादा टूटते हैं).
उनके बगल का ज़ूम कंट्रोल −, एक प्रतिशत और + दिखाता है, और 25% से 400% तक स्टेप करता है. आप ट्रैकपैड पर pinch भी कर सकते हैं, Ctrl-scroll कर सकते हैं, या ⌘/Ctrl +, − और 0 दबा सकते हैं — ये शॉर्टकट तब भी काम करते हैं जब फ़ोकस डिज़ाइन के अंदर हो. डिवाइस फ़्रेम पर pinch करने से कर्सर के नीचे की जगह अपनी जगह पर टिकी रहती है. 100% पर लौटने के लिए प्रतिशत पर क्लिक करें. जो डिज़ाइन अपना व्यू खुद ज़ूम करते हैं, जैसे मैप, वे pinch अपने लिए रखते हैं.
क्योंकि जाँच लाइव है, gate जो पाँच-चौड़ाई वाली तुलना चलाता है — डेस्कटॉप, लैपटॉप, टैबलेट और दो फ़ोन चौड़ाइयाँ — वह आप किसी भी वक़्त खुद आँखों से परख सकते हैं, सिर्फ़ टर्न के खत्म होने के बाद ही नहीं.
Pick, comment, और tools रेल
प्रीव्यू के अंदर ⌥-hover कर्सर के नीचे वाले एलिमेंट को हाइलाइट करता है — वही एलिमेंट जो एजेंट देखता है — और ⌥-click उस पर कमेंट पिन करता है. रेल बटन स्टीयरिंग ड्रॉअर खोलते हैं: लाइव कंट्रोल के लिए Tweaks, पिन और ड्रॉइंग के लिए Comment mode, और डिज़ाइन से पूछने के लिए कि यह ऐसा क्यों दिखता है, Designer talk. हर एक का अपना पेज Steering के नीचे है.
Present मोड
Present स्टूडियो का क्रोम हटाकर पूरी विंडो नतीजे से भर देता है — किसी और को कमरे में रन दिखाने के लिए, या बस ट्रांसक्रिप्ट के बिना डिज़ाइन को देखने के लिए. Escape प्रोजेक्ट पर लौटाता है.
एजेंट के काम करते समय क्या लाइव रहता है
प्रीव्यू सिर्फ़ अंत में नहीं, टर्न के दौरान भी पेंट होता है — आप डिज़ाइन को फ़ाइल-दर-फ़ाइल जुड़ते देखते हैं. एजेंट को कहा जाता है कि पहले मुख्य पेज लिखें और हर सेक्शन या स्क्रीन के बाद उसे सेव करें, इसलिए प्रीव्यू बिल्ड के अंत में नहीं, शुरुआत में ही डिज़ाइन दिखाने लगता है. डेटा मॉडल से बनने वाले डिज़ाइन टाइप, जैसे Mobile app, Social Media, Pixel Sprite, Diagram और Map, पहले starter रेंडर करते हैं और मॉडल बढ़ने के साथ अपडेट होते हैं. स्टीयरिंग (picks, comments, Tweaks) भी लाइव रहती है; नए नोट चलते बिल्ड को रोकने के बजाय अगले टर्न की क़तार में चले जाते हैं.
मुख्य पेज बनने से पहले
मल्टी-स्क्रीन डिज़ाइन मुख्य पेज सेव होने से पहले कई मिनट टोकन, कंपोनेंट स्टाइल और साझा स्क्रिप्ट लिखने में लगा सकता है. तब तक प्रीव्यू एरिया खाली फ़्रेम या टेम्पलेट के सैंपल कंटेंट के बजाय बिल्ड कार्ड दिखाता है:
- Design so far सबसे ऊपर रहता है. जैसे ही एजेंट अपना डिज़ाइन प्लान सेव करता है, कार्ड उसे डिज़ाइन के अपने टोकन में बनाता है: असली हेडलाइन और प्राइमरी ऐक्शन, क्रम से सेक्शन, वह एक bold पल और पहली स्क्रीन का एजेंट का स्केच. इसके बाद हर थीम में एक सैंपल स्क्रीन आती है, फिर पैलेट, टाइपफ़ेस और कंपोनेंट (बटन, कार्ड, चिप, इनपुट, टॉगल) जो एजेंट की सेव की हुई stylesheets से बने हैं. इस पर सैंपल का लेबल लगा होता है — यह एजेंट की लिखी स्क्रीन नहीं है — और कार्ड कंटेंट के हिसाब से बढ़ता है, इसलिए लंबा प्लान दूसरे स्क्रॉलबार के बिना ऊपर से नीचे तक पढ़ा जा सकता है.
- Build so far इस रन में लिखी गई फ़ाइलों की सूची देता है, सबसे नई पहले, उनके साइज़ और उम्र के साथ, और साथ में एक लाइन जो बताती है कि मुख्य पेज अभी लिखा नहीं गया, अब भी टेम्पलेट का starter है, या लिखा जा चुका है और लोड हो रहा है.
- लंबे रन पर एक नोट यह भी बताता है कि मल्टी-स्क्रीन डिज़ाइन के लिए लंबे बिल्ड सामान्य हैं.
नई वेबसाइट पर पहला बिल्ड चलने के दौरान टेम्पलेट का placeholder पेज छिपा रहता है. टोकन या stylesheets लिखना शुरुआत नहीं गिना जाता; कार्ड तब तक दिखता रहता है जब तक एजेंट खुद मुख्य पेज दोबारा नहीं लिखता, और यह साफ़ बताता है: पेज अब भी टेम्पलेट का placeholder है, आपका डिज़ाइन नहीं. एडिटर टेम्पलेट (स्प्राइट, कैरेक्टर, 3D पार्ट, डायग्राम, मैप) इसका अपवाद हैं — उनका मुख्य पेज खुद एडिटर है, इसलिए कोई भी डिज़ाइन फ़ाइल प्रीव्यू को सामने ले आती है.
कार्ड डिज़ाइन दिखाता है, सोर्स कोड कभी नहीं — कोई प्रतिशत या समय का अनुमान नहीं, सिर्फ़ वही जो एजेंट ने सच में सेव किया है.
अगर कोई सेव किया हुआ पेज लोड हो जाए लेकिन प्रीव्यू से कभी कनेक्ट न हो (जैसे उसकी कोई स्क्रिप्ट शुरुआत में ही फ़ेल हो गई हो), तो प्रीव्यू दो सेकंड बाद उसे जैसा है वैसा दिखा देता है, इस नोट के साथ: "Showing the saved page — it hasn't answered the preview bridge, so picking and comments wait." (सेव किया हुआ पेज दिखाया जा रहा है — इसने preview bridge को जवाब नहीं दिया, इसलिए pick और comments इंतज़ार करेंगे.) बाद में सेव करने पर यह फिर भी रिफ़्रेश होता है.
टिप: किसी नतीजे को पूरा कहने से पहले फ़ोन व्यूपोर्ट जाँच लें — gate तो जाँचेगा ही. ऐसी nav जो डेस्कटॉप चौड़ाई पर चलती है लेकिन मोबाइल पर dead-end हो, सबसे आम FAIL है.