Composer
Layout și design: pagini, cadre, componente și tipografie reală, cu o vedere de prototip și o vedere de cod.
Într-o propoziție#
Un canvas infinit pentru a aranja lucruri: documente cu mai multe pagini, design-uri de ecran și layout-uri, cu controale tipografice care merg dincolo de „alege un font și o mărime".
Layout-ul#
| Bara de meniu | File · Edit · View · Object · Vector · Text · Arrange · Plugins |
| Bara de instrumente | undo/redo, select, frame, shapes, line, arrow, pen, type, hand: apoi Margins, Guides, Baseline, și numărul de artboard-uri |
| Stânga | Pages, apoi Layers · Assets · Components · Frames, apoi lista de categorii de straturi |
| Centru | canvas-ul, cu zoom-ul și un indicator de pagină |
| Dreapta | Design · Prototype · Code |
| Bara de stare | artboard-uri, obiecte, selecție, instrumentul activ, zoom |
Ce faci aici#
Pagini și cadre#
Un document are pagini; o pagină conține cadre (artboard-uri). Aceasta este diferența față de Vectra, care desenează pe un singur artboard odată: Composer este pentru un set de ecrane sau un set de pagini alăturate.
Straturi, resurse și componente#
Patru taburi peste același document. Components sunt piesele reutilizabile: definește o dată, plasează de multe ori, editează definiția și fiecare instanță urmează. Assets este ce aduce documentul din exterior. Lista de straturi este grupată pe tip (Text, Images, Graphics), ceea ce se parcurge mai rapid decât o listă plată pe o pagină încărcată.
Layout precis#
X, Y, W, H și o rază de colț, plus align and distribute. Margins, Guides și o grilă Baseline sunt comutatoare pe bara de instrumente: grila baseline este ceea ce aliniază textul pe mai multe coloane de-a lungul unei pagini alăturate.
Tipografie#
Partea care justifică locul lui Composer:
| Font, size, leading, tracking | ca numere, nu ca un cursor |
| Alignment | orizontal, și vertical în interiorul casetei: top, middle, bottom |
| Weight și case | inclusiv „as typed" |
| Paragraph spacing, liste | cu buline sau numerotate |
| Resize mode | Fixed size, Auto width, Auto height: dacă caseta urmează textul sau textul se ajustează la casetă |
| Text threading | leagă o casetă de text de următoarea, astfel încât ce nu încape continuă acolo |
| Text styles | denumite, reutilizabile |
Prototip și cod#
Tabul Prototype leagă ecranele într-un flux clickabil. Tabul Code arată design-ul ca și cod.
Variabile și stiluri#
Două panouri care transformă un document dintr-un set de pagini într-un sistem:
- Variables: valori denumite (o culoare, un număr, un șir), folosite în tot documentul, cu un selector de variabile oriunde este setată o valoare. Schimbă variabila, fiecare utilizare urmează.
- Styles: stiluri de text și de obiecte, denumite.
- Fills: editorul de umplere, inclusiv degradeuri și imagini.
Împreună cu Components, ele sunt ceea ce face un design condus de token-uri: spațiul de lucru DA din Vectra poate exporta token-uri de design, iar Composer este locul unde sunt folosite.
Prototipare#
Un prototip aici este un graf peste cadrele pe care le-ai desenat deja. Fiecare interacțiune are patru lucruri: un declanșator (clic sau hover), un cadru țintă, o tranziție și o durată. Trage din mânerul de conectare al unui cadru spre cadrul spre care ar trebui să ducă.
Prototype Mode transformă canvas-ul în vederea de flux; Preview Player îl rulează așa cum l-ar vedea cititorul, cu o repornire. Nu există un document separat de prototipare, cadrele sunt ecranele.
Dev Mode, predarea design-ului către cod#
Tabul Inspect este cealaltă jumătate a unui instrument de design: citește selecția și produce codul pentru ea, pe trei taburi de platformă.
| Tab | Ieșire |
|---|---|
| CSS | web-ul |
| iOS | SwiftUI |
| Android | Jetpack Compose |
Alături de codul generat raportează și numerele reale pe care le cere un dezvoltator: dimensiune, rază, rotație, opacitate, umplere, contur, efecte, font și mărime de font, și spațierea măsurată față de părinte și față de vecini: cele două distanțe care decid un layout. Codul se copiază în clipboard sau se descarcă.
Exportarea#
Exportul în Composer este o listă de setări, nu o singură alegere: adaugă mai multe, selectează pe care să le rulezi, iar fiecare setare selectată produce propriul fișier, într-o singură trecere. Fiecare setare poartă:
| Format și quality | per setare, astfel încât un PNG și un JPG pot pleca împreună |
| Scale și DPI | @2x și rezoluție de tipar |
| CMYK (print) | pentru versiunea destinată tiparului |
| Naming | un prefix și un sufix, project- și @2x |
| Background | inclusiv transparent, acolo unde formatul o permite |
Două detalii pe care panoul le spune direct, în loc să te lase să le descoperi:
- Doar PNG și SVG poartă transparență. Alegerea unui fundal transparent pe un JPG este o setare fără niciun efect, iar panoul spune asta.
- Sursa unui export este fie un nod, fie o felie: Create Slice face o regiune de export din selecția curentă, ceea ce este cum exporți o parte dintr-un cadru fără să tai cadrul în bucăți.
Presets salvează un set întreg de setări, astfel încât configurația de export a unui proiect este scrisă o singură dată.
Fișierele pe care le citește și le scrie#
| Format nativ | .comp |
| Exporturi | .png · .jpg · .svg, la orice scală sau DPI, în RGB sau CMYK |
| Generează | CSS · SwiftUI · Jetpack Compose |
Trimiterea muncii către alte studiouri#
Produce o compoziție, și artboard-ul activ randat ca imagine. Acceptă pixel art, artă vectorială și imagini.
Lucrul cu altcineva#
Composer se sincronizează ca un document: întreaga stare, cu debounce, plus acțiuni transmise. Doi oameni care editează aceeași pagină în aceeași clipă vor face ca unul dintre ei să câștige; lucrați pe pagini diferite.
Limite și capcane frecvente#
- Auto width și auto height se ceartă cu layout-urile fixe. O casetă setată pe auto width nu se va ajusta pe rânduri; dacă textul curge în afara cadrului, de obicei acesta e motivul.
- Text threading nu este automat. O casetă raportează Not linked până o legi.
- Componentele se propagă din definiție, nu dintr-o instanță. Editarea unei instanțe nu actualizează celelalte.