Composer
लेआउट और डिज़ाइन: पेज, फ़्रेम, कॉम्पोनेंट और असली टाइपोग्राफ़ी, एक प्रोटोटाइप व्यू और एक कोड व्यू के साथ।
एक लाइन में#
चीज़ें व्यवस्थित करने के लिए एक अनंत कैनवस: मल्टी-पेज दस्तावेज़, स्क्रीन डिज़ाइन और लेआउट, ऐसे टाइपोग्राफ़ी कंट्रोल के साथ जो "कोई फ़ॉन्ट और साइज़ चुनें" से कहीं आगे जाते हैं।
लेआउट#
| Menu bar | File · Edit · View · Object · Vector · Text · Arrange · Plugins |
| Toolbar | undo/redo, select, frame, shapes, line, arrow, pen, type, hand: फिर Margins, Guides, Baseline, और artboard काउंट |
| Left | Pages, फिर Layers · Assets · Components · Frames, फिर लेयर-कैटेगरी लिस्ट |
| Centre | कैनवस, ज़ूम और एक पेज इंडिकेटर के साथ |
| Right | Design · Prototype · Code |
| Status bar | artboard, ऑब्जेक्ट, सिलेक्शन, एक्टिव टूल, ज़ूम |
आप यहाँ क्या करते हैं#
Page और frame#
किसी दस्तावेज़ में pages होते हैं; एक page में frames (artboard) होते हैं। यही Vectra से फ़र्क़ है, जो एक बार में एक artboard पर ड्रॉ करता है: Composer स्क्रीन के किसी सेट या स्प्रेड के किसी सेट के लिए है।
Layer, asset और component#
एक ही दस्तावेज़ पर चार टैब। Components दोबारा इस्तेमाल किए जा सकने वाले टुकड़े हैं: एक बार डिफ़ाइन करें, कई बार रखें, डेफ़िनिशन एडिट करें और हर इंस्टेंस उसी के हिसाब से बदल जाता है। Assets वह है जो दस्तावेज़ ला रहा है। लेयर लिस्ट टाइप के हिसाब से ग्रुप की गई है (Text, Images, Graphics), जिसे किसी भरे हुए पेज पर एक फ़्लैट लिस्ट से ज़्यादा तेज़ी से स्कैन किया जा सकता है।
सटीक लेआउट#
X, Y, W, H और एक कॉर्नर रेडियस, साथ ही align and distribute। Margins, Guides और एक Baseline ग्रिड टूलबार पर टॉगल हैं: baseline ग्रिड ही मल्टी-कॉलम टेक्स्ट को किसी स्प्रेड के आर-पार लाइन में लाता है।
टाइपोग्राफ़ी#
वह हिस्सा जो Composer को उसकी जगह दिलाता है:
| Font, size, leading, tracking | नंबर के रूप में, स्लाइडर के रूप में नहीं |
| Alignment | हॉरिज़ॉन्टल, और बॉक्स के अंदर vertical: top, middle, bottom |
| Weight और case | "as typed" सहित |
| Paragraph spacing, लिस्ट | bulleted या numbered |
| Resize mode | Fixed size, Auto width, Auto height: बॉक्स टेक्स्ट का अनुसरण करे या टेक्स्ट बॉक्स के हिसाब से रैप हो |
| Text threading | एक टेक्स्ट बॉक्स को अगले से जोड़ें ताकि ओवरफ़्लो आगे बहता रहे |
| Text styles | नामित, दोबारा इस्तेमाल किए जा सकने वाले |
Prototype और code#
Prototype टैब स्क्रीन को आपस में जोड़कर एक क्लिक करने लायक फ़्लो बनाता है। Code टैब डिज़ाइन को कोड के रूप में दिखाता है।
Variables और styles#
दो पैनल जो किसी दस्तावेज़ को पेजों के सेट के बजाय एक सिस्टम बना देते हैं:
- Variables: नामित वैल्यू (कोई रंग, कोई नंबर, कोई स्ट्रिंग) जो पूरे दस्तावेज़ में इस्तेमाल होती हैं, जहाँ भी कोई वैल्यू सेट होती है वहाँ एक variable picker के साथ। वेरिएबल बदलें, हर इस्तेमाल उसी के हिसाब से बदल जाता है।
- Styles: नामित टेक्स्ट और ऑब्जेक्ट स्टाइल।
- Fills: फ़िल एडिटर, ग्रेडिएंट और इमेज सहित।
Components के साथ मिलकर, यही किसी डिज़ाइन को टोकन-आधारित बनाते हैं: Vectra का DA वर्कस्पेस डिज़ाइन टोकन एक्सपोर्ट कर सकता है, और Composer वह जगह है जहाँ इनका इस्तेमाल होता है।
Prototyping#
यहाँ कोई prototype आपके पहले से बनाए गए frame के ऊपर एक graph है। हर इंटरैक्शन चार चीज़ों से मिलकर बनता है: एक trigger (click या hover), एक target frame, एक transition और एक duration। किसी frame के connect handle से खींचकर उस frame तक ले जाएँ जहाँ उसे पहुँचना चाहिए।
Prototype Mode कैनवस को flow व्यू में बदल देता है; Preview Player इसे उसी तरह चलाता है जैसे कोई पाठक इसे देखेगा, एक रीस्टार्ट के साथ। कोई अलग prototyping दस्तावेज़ नहीं है, frame ही स्क्रीन हैं।
Dev Mode, डिज़ाइन को कोड में सौंपना#
Inspect टैब किसी डिज़ाइन टूल का दूसरा आधा हिस्सा है: यह सिलेक्शन पढ़ता है और उसके लिए, तीन प्लैटफ़ॉर्म टैब पर, कोड बनाता है।
| Tab | आउटपुट |
|---|---|
| CSS | वेब |
| iOS | SwiftUI |
| Android | Jetpack Compose |
जनरेट किए गए कोड के साथ यह वे असली नंबर भी बताता है जो कोई डेवलपर माँगता है: size, radius, rotation, opacity, fill, stroke, effects, font और font size, और parent तक और siblings तक मापी गई स्पेसिंग: वे दो दूरियाँ जो किसी लेआउट को तय करती हैं। कोड क्लिपबोर्ड पर कॉपी होता है या डाउनलोड होता है।
एक्सपोर्ट करना#
Composer में Export एक list of settings है, कोई एक चुनाव नहीं: कई जोड़ें, चुनें कि कौन-सी चलानी हैं, और हर चुनी गई सेटिंग एक ही पास में अपनी फ़ाइल बनाती है। हर सेटिंग में यह होता है:
| Format और quality | हर सेटिंग के हिसाब से, ताकि एक PNG और एक JPG साथ में निकल सकें |
| Scale और DPI | @2x और प्रिंट रिज़ॉल्यूशन |
| CMYK (print) | प्रिंट के लिए तैयार वर्ज़न के लिए |
| Naming | एक prefix और एक suffix, project- और @2x |
| Background | transparent सहित, जहाँ फ़ॉर्मैट इसकी इजाज़त देता है |
दो बातें जो पैनल ख़ुद बता देता है, आपको ख़ुद पता लगाने के लिए नहीं छोड़ता:
- सिर्फ़ PNG और SVG पारदर्शिता रखते हैं। किसी JPG पर transparent background चुनना एक ऐसी सेटिंग है जिसका कोई असर नहीं होता, और पैनल यह बता देता है।
- किसी एक्सपोर्ट का source या तो एक node होता है या एक slice: Create Slice मौजूदा सिलेक्शन से एक एक्सपोर्ट रीजन बनाता है, और इसी तरह आप किसी frame को काटे बिना उसका कोई हिस्सा एक्सपोर्ट कर सकते हैं।
Presets सेटिंग्स का पूरा सेट सेव करते हैं, ताकि किसी प्रोजेक्ट के लिए एक्सपोर्ट कॉन्फ़िगरेशन सिर्फ़ एक बार लिखना पड़े।
जो फ़ाइलें यह पढ़ता और लिखता है#
| Native format | .comp |
| Exports | .png · .jpg · .svg, किसी भी scale या DPI पर, RGB या CMYK में |
| Generates | CSS · SwiftUI · Jetpack Compose |
दूसरे स्टूडियो को काम भेजना#
Produces एक कंपोज़िशन, और एक्टिव artboard को इमेज के रूप में रेंडर किया हुआ। Accepts पिक्सेल आर्ट, वेक्टर आर्ट और इमेज।
किसी और के साथ काम करना#
Composer एक document के रूप में सिंक होता है: पूरी स्थिति, debounced, साथ ही dispatch किए गए actions। एक ही पल में एक ही पेज को एडिट करने वाले दो लोगों में से किसी एक की जीत होगी; अलग-अलग पेजों पर काम करें।
सीमाएँ और आम दिक़्क़तें#
- Auto width और auto height, fixed लेआउट से टकराते हैं। auto width पर सेट कोई बॉक्स रैप नहीं होगा; अगर टेक्स्ट frame से बाहर निकल रहा है, तो आमतौर पर यही वजह है।
- Text threading अपने-आप नहीं होती। जब तक आप किसी बॉक्स को thread नहीं करते, वह Not linked बताता है।
- Components डेफ़िनिशन से फैलते हैं, किसी इंस्टेंस से नहीं। किसी इंस्टेंस को एडिट करने से बाक़ी अपडेट नहीं होते।