Composer
Impaginazione e design: pagine, frame, componenti e tipografia vera, con una vista prototipo e una vista codice.
In breve#
Una tela infinita per organizzare le cose: documenti multipagina, design di schermate e layout, con controlli tipografici che vanno oltre "scegli un font e una dimensione".
Il layout#
| Menu bar | File · Edit · View · Object · Vector · Text · Arrange · Plugins |
| Toolbar | annulla/ripristina, seleziona, frame, forme, linea, freccia, penna, testo, mano: poi Margins, Guides, Baseline, e il conteggio delle tavole |
| Sinistra | Pages, poi Layers · Assets · Components · Frames, poi l'elenco dei livelli per categoria |
| Centro | la tela, con lo zoom e un indicatore di pagina |
| Destra | Design · Prototype · Code |
| Barra di stato | tavole, oggetti, selezione, strumento attivo, zoom |
Cosa puoi fare qui#
Pagine e frame#
Un documento ha pagine; una pagina contiene frame (tavole). È la differenza con Vectra, che disegna su una tavola alla volta: Composer serve per un insieme di schermate o un insieme di tavole affiancate.
Livelli, asset e componenti#
Quattro schede sullo stesso documento. I Components sono i pezzi riutilizzabili: definisci una volta, posizioni molte, modifichi la definizione e ogni istanza segue. Assets è ciò che il documento sta importando. L'elenco dei livelli è raggruppato per tipo (Text, Images, Graphics), il che si scorre più in fretta di un elenco piatto su una pagina affollata.
Impagina con precisione#
X, Y, W, H e un raggio d'angolo, più allinea e distribuisci. Margins, Guides e una griglia Baseline sono interruttori sulla toolbar: la griglia baseline è ciò che fa allineare il testo multicolonna lungo una serie di tavole.
Tipografia#
La parte che fa guadagnare a Composer il suo posto:
| Font, size, leading, tracking | come numeri, non come uno slider |
| Alignment | orizzontale, e verticale dentro il riquadro: top, middle, bottom |
| Weight e case | incluso "come digitato" |
| Paragraph spacing, elenchi | puntati o numerati |
| Resize mode | Fixed size, Auto width, Auto height: se è il riquadro a seguire il testo o il testo ad andare a capo nel riquadro |
| Text threading | collega un riquadro di testo al successivo così l'eccedenza scorre avanti |
| Text styles | nominati, riutilizzabili |
Prototype e code#
La scheda Prototype collega le schermate in un flusso cliccabile. La scheda Code mostra il design come codice.
Variabili e stili#
Due pannelli che trasformano un documento in un sistema invece che in un insieme di pagine:
- Variables: valori nominati (un colore, un numero, una stringa) usati in tutto il documento, con un selettore di variabili ovunque venga impostato un valore. Cambi la variabile, ogni uso segue.
- Styles: stili di testo e di oggetto nominati.
- Fills: l'editor di riempimento, gradienti e immagini inclusi.
Insieme ai Components, sono ciò che rende un design guidato dai token: lo spazio di lavoro DA di Vectra può esportare design token, e Composer è dove vengono usati.
Prototipazione#
Un prototipo qui è un grafo sopra i frame che hai già disegnato. Ogni interazione è fatta di quattro cose: un trigger (click o hover), un frame target, una transition e una durata. Trascina dalla maniglia di connessione di un frame verso il frame a cui deve portare.
Prototype Mode trasforma la tela nella vista del flusso; il Preview Player lo esegue come lo vedrebbe il lettore, con un riavvio. Non c'è un documento di prototipazione separato: i frame sono le schermate.
Dev Mode, consegnare il design al codice#
La scheda Inspect è l'altra metà di uno strumento di design: legge la selezione e ne produce il codice, su tre schede di piattaforma.
| Scheda | Output |
|---|---|
| CSS | il web |
| iOS | SwiftUI |
| Android | Jetpack Compose |
Accanto al codice generato riporta i numeri reali che chiede uno sviluppatore: dimensione, raggio, rotazione, opacità, riempimento, tratto, effetti, font e dimensione del font, e spaziatura misurata rispetto al genitore e rispetto ai fratelli: le due distanze che decidono un layout. Il codice si copia negli appunti o si scarica.
Esportare#
L'esportazione in Composer è una lista di impostazioni, non una scelta singola: aggiungine diverse, seleziona quali eseguire, e ogni impostazione selezionata produce il proprio file in un solo passaggio. Ogni impostazione porta:
| Format e quality | per impostazione, così un PNG e un JPG possono uscire insieme |
| Scale e DPI | @2x e la risoluzione di stampa |
| CMYK (print) | per la versione destinata alla stampa |
| Naming | un prefisso e un suffisso, project- e @2x |
| Background | inclusa la trasparenza, dove il formato lo permette |
Due dettagli che il pannello dichiara invece di lasciarti scoprire:
- Solo PNG e SVG portano trasparenza. Scegliere uno sfondo trasparente su un JPG è un'impostazione senza effetto, e il pannello lo dice.
- La sorgente di un'esportazione è un nodo oppure una slice: Create Slice crea una regione di esportazione dalla selezione corrente, ed è così che esporti parte di un frame senza tagliare il frame in pezzi.
I Presets salvano un intero set di impostazioni, così la configurazione di esportazione di un progetto si scrive una volta sola.
File che legge e scrive#
| Formato nativo | .comp |
| Esportazioni | .png · .jpg · .svg, a qualsiasi scala o DPI, in RGB o CMYK |
| Genera | CSS · SwiftUI · Jetpack Compose |
Inviare il lavoro ad altri moduli#
Produce una composizione, e la tavola attiva renderizzata come immagine. Accetta pixel art, arte vettoriale e immagini.
Lavorare con qualcun altro#
Composer sincronizza come documento: l'intero stato, con debounce, più azioni inviate. Due persone che modificano la stessa pagina nello stesso istante avranno una delle due che vince; lavorate su pagine diverse.
Limiti e problemi comuni#
- Auto width e auto height combattono con i layout fissi. Un riquadro impostato su auto width non andrà a capo; se il testo esce dal frame, di solito è per questo.
- Text threading non è automatico. Un riquadro riporta Not linked finché non lo colleghi.
- I Components si propagano dalla definizione, non da un'istanza. Modificare un'istanza non aggiorna le altre.