Composer
லேஅவுட்டும் டிசைனும்: pages, frames, components மற்றும் உண்மையான டைப்போகிராஃபி, ஒரு prototype காட்சியுடனும் ஒரு code காட்சியுடனும்.
ஒரே வரியில்#
விஷயங்களை அமைக்க ஒரு முடிவற்ற கேன்வாஸ்: பல-பக்க ஆவணங்கள், screen designs மற்றும் layouts, "ஒரு font-ஐயும் அளவையும் தேர்ந்தெடு" என்பதைத் தாண்டிச் செல்லும் typographic கட்டுப்பாடுகளுடன்.
அமைப்பு#
| 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, பிறகு layer-வகை பட்டியல் |
| Centre | கேன்வாஸ், zoom மற்றும் ஒரு page குறிகாட்டியுடன் |
| Right | Design · Prototype · Code |
| Status bar | artboards, objects, தேர்வு, செயலில் உள்ள கருவி, zoom |
இங்கே நீங்கள் என்ன செய்கிறீர்கள்#
Pages மற்றும் frames#
ஒரு ஆவணத்திற்கு pages உண்டு; ஒரு page frames-ஐ (artboards) வைத்திருக்கும். ஒரு நேரத்தில் ஒரே ஒரு artboard-இல் வரையும் Vectra-விலிருந்து இதன் வேறுபாடு இதுதான்: Composer ஒரு தொகுப்பு screens-க்கோ ஒரு தொகுப்பு spreads-க்கோ ஆனது.
Layers, assets மற்றும் components#
அதே ஆவணத்தின் மேல் நான்கு டேப்கள். Components மீண்டும் பயன்படுத்தக்கூடிய துண்டுகள், ஒருமுறை define செய்யவும், பலமுறை வைக்கவும், definition-ஐ எடிட் செய்தால் ஒவ்வொரு instance-உம் பின்பற்றும். Assets ஆவணம் இழுத்துக்கொள்வது என்ன என்பது. layer பட்டியல் வகை வாரியாக (Text, Images, Graphics) தொகுக்கப்பட்டுள்ளது, இது ஒரு பரபரப்பான page-இல் ஒரு தட்டையான பட்டியலை விட வேகமாக கண்ணோட்டமிட முடியும்.
துல்லியமாக லேஅவுட் செய்யவும்#
X, Y, W, H மற்றும் ஒரு corner radius, மேலும் align and distribute. Margins, Guides மற்றும் ஒரு Baseline கிரிட் toolbar-இல் toggles: multi-column உரையை ஒரு spread முழுவதும் வரிசையாக்குவது baseline கிரிட் தான்.
Typography#
Composer-க்கு அதன் இடத்தைப் பெற்றுத் தரும் பகுதி:
| Font, size, leading, tracking | ஒரு slider ஆக அல்ல, எண்களாக |
| Alignment | கிடைமட்டமாக, மற்றும் பெட்டிக்குள் செங்குத்தாக: top, middle, bottom |
| Weight மற்றும் case | "as typed" உட்பட |
| Paragraph spacing, lists | bulleted அல்லது numbered |
| Resize mode | Fixed size, Auto width, Auto height: பெட்டி உரையைப் பின்பற்றுமா அல்லது உரை பெட்டிக்கு wrap ஆகுமா |
| Text threading | overflow தொடர்ந்து பாய, ஒரு text box-ஐ அடுத்ததற்கு இணைக்கவும் |
| Text styles | பெயரிடப்பட்ட, மீண்டும் பயன்படுத்தக்கூடிய |
Prototype மற்றும் code#
Prototype டேப், screens-ஐ கிளிக் செய்யக்கூடிய ஒரு flow ஆக ஒன்றாக வயர் செய்கிறது. Code டேப் design-ஐ code ஆகக் காட்டுகிறது.
Variables மற்றும் styles#
ஒரு ஆவணத்தை pages-இன் தொகுப்பாக அல்லாமல் ஒரு system ஆக மாற்றும் இரண்டு பேனல்கள்:
- Variables: ஆவணம் முழுவதும் பயன்படுத்தப்படும் பெயரிடப்பட்ட மதிப்புகள் (ஒரு வண்ணம், ஒரு எண், ஒரு string), ஒரு மதிப்பு அமைக்கப்படும் இடமெல்லாம் ஒரு variable picker-உடன். variable-ஐ மாற்றவும், ஒவ்வொரு பயன்பாடும் பின்பற்றும்.
- Styles: பெயரிடப்பட்ட text மற்றும் object styles.
- Fills: gradients மற்றும் images உட்பட fill editor.
Components-உடன் சேர்ந்து, இவைதான் ஒரு design-ஐ token-driven ஆக ஆக்குகின்றன: Vectra DA workspace design tokens-ஐ ஏற்றுமதி செய்யலாம், மேலும் Composer தான் அவை பயன்படுத்தப்படும் இடம்.
Prototyping#
இங்கு ஒரு prototype என்பது நீங்கள் ஏற்கனவே வரைந்த frames-இன் மேலான ஒரு graph. ஒவ்வொரு interaction-உம் நான்கு விஷயங்கள்: ஒரு trigger (click அல்லது hover), ஒரு target frame, ஒரு transition மற்றும் ஒரு duration. ஒரு frame-இன் connect handle-இலிருந்து அது இட்டுச் செல்ல வேண்டிய frame-க்கு இழுக்கவும்.
Prototype Mode, கேன்வாஸை flow காட்சியாக மாற்றுகிறது; Preview Player வாசகர் பார்ப்பது போலவே அதை இயக்குகிறது, ஒரு restart-உடன். தனி prototyping ஆவணம் எதுவும் இல்லை, frames-தான் screens.
Dev Mode, design-ஐ code-க்கு ஒப்படைத்தல்#
Inspect டேப் ஒரு design கருவியின் மறுபாதி: இது தேர்வைப் படித்து அதற்கான code-ஐ மூன்று platform டேப்களில் தருகிறது.
| டேப் | வெளியீடு |
|---|---|
| CSS | web |
| iOS | SwiftUI |
| Android | Jetpack Compose |
உருவாக்கப்பட்ட code-க்கு அருகில், ஒரு developer கேட்கும் உண்மையான எண்களை இது தெரிவிக்கிறது: size, radius, rotation, opacity, fill, stroke, effects, font மற்றும் font size, மற்றும் parent-க்கும் siblings-க்கும் அளக்கப்பட்ட spacing: ஒரு layout-ஐ தீர்மானிக்கும் இரண்டு தூரங்கள். Code கிளிப்போர்டுக்கு நகலெடுக்கப்படும் அல்லது பதிவிறக்கப்படும்.
Exporting#
Composer-இல் Export ஒரு அமைப்புகளின் பட்டியல், ஒரே ஒரு தேர்வு அல்ல: பலவற்றைச் சேர்த்து, எவற்றை இயக்குவது என்று தேர்ந்தெடுத்தால், தேர்ந்தெடுக்கப்பட்ட ஒவ்வொரு அமைப்பும் ஒரே பாஸில் அதன் சொந்த கோப்பை உருவாக்கும். ஒவ்வொரு அமைப்பும் சுமப்பது:
| Format மற்றும் quality | ஒவ்வொரு அமைப்புக்கும், எனவே ஒரு PNG-உம் ஒரு JPG-உம் ஒன்றாக வெளியேறலாம் |
| Scale மற்றும் DPI | @2x மற்றும் அச்சு resolution |
| CMYK (print) | அச்சகத்திற்குச் செல்லும் பதிப்புக்கு |
| Naming | ஒரு prefix-உம் suffix-உம், project- மற்றும் @2x |
| Background | வடிவம் அனுமதிக்கும் இடங்களில் transparent உட்பட |
நீங்கள் கண்டுபிடிக்க விட்டுவிடாமல், பேனல் தெரிவிக்கும் இரண்டு விவரங்கள்:
- PNG மற்றும் SVG மட்டுமே transparency-ஐ சுமக்கும். ஒரு JPG-இல் transparent பின்னணியைத் தேர்ந்தெடுப்பது எந்த விளைவும் இல்லாத ஒரு அமைப்பு, மேலும் பேனல் இதைச் சொல்கிறது.
- ஒரு export-இன் மூலம் ஒரு node அல்லது ஒரு slice: Create Slice, தற்போதைய தேர்விலிருந்து ஒரு export பகுதியை உருவாக்குகிறது, frame-ஐ வெட்டாமலேயே அதன் ஒரு பகுதியை ஏற்றுமதி செய்வது இப்படித்தான்.
Presets அமைப்புகளின் முழு தொகுப்பையும் சேமிக்கும், எனவே ஒரு திட்டத்திற்கான export கட்டமைப்பு ஒருமுறை மட்டுமே எழுதப்படும்.
இது படிக்கும் மற்றும் எழுதும் கோப்புகள்#
| Native format | .comp |
| Exports | .png · .jpg · .svg, எந்த scale அல்லது DPI-இலும், RGB அல்லது CMYK-இல் |
| Generates | CSS · SwiftUI · Jetpack Compose |
மற்ற ஸ்டுடியோக்களுக்கு வேலையை அனுப்புதல்#
தருவது ஒரு composition, மற்றும் ஒரு படமாக ரெண்டர் செய்யப்பட்ட செயலில் உள்ள artboard. ஏற்றுக்கொள்வது pixel art, vector art மற்றும் images.
வேறு ஒருவருடன் வேலை செய்தல்#
Composer ஒரு document ஆக சின்க் ஆகிறது: முழு நிலையும், debounce செய்யப்பட்டு, மேலும் dispatch செய்யப்பட்ட actions. அதே page-ஐ அதே கணத்தில் எடிட் செய்யும் இரண்டு பேரில் ஒருவர் மட்டும் வெல்வார்; வெவ்வேறு pages-இல் வேலை செய்யுங்கள்.
வரம்புகளும் பொதுவான சிக்கல்களும்#
- Auto width மற்றும் auto height fixed layouts-உடன் மோதுகின்றன. auto width-க்கு அமைக்கப்பட்ட ஒரு பெட்டி wrap ஆகாது; உரை frame-இலிருந்து வெளியேறினால், பொதுவாக இதுதான் காரணம்.
- Text threading தானாக நடக்காது. நீங்கள் thread செய்யும் வரை ஒரு பெட்டி Not linked என்று தெரிவிக்கும்.
- Components definition-இலிருந்து propagate ஆகும், ஒரு instance-இலிருந்து அல்ல. ஒரு instance-ஐ எடிட் செய்வது மற்றவற்றை புதுப்பிக்காது.