Composer
Layout og design, sider, rammer, komponenter og ekte typografi, med en prototypevisning og en kodevisning.
På én linje#
Et uendelig lerret for å ordne ting: dokumenter med flere sider, skjermdesign og layout, med typografikontroller som går forbi «velg en font og en størrelse».
Oppsettet#
| Menu bar | File · Edit · View · Object · Vector · Text · Arrange · Plugins |
| Toolbar | angre/gjør om, select, frame, former, linje, pil, penn, type, hånd: deretter Margins, Guides, Baseline, og tegnebrett-antallet |
| Left | Pages, deretter Layers · Assets · Components · Frames, deretter lagkategori-listen |
| Centre | lerretet, med zoomen og en sideindikator |
| Right | Design · Prototype · Code |
| Status bar | tegnebrett, objekter, utvalg, aktivt verktøy, zoom |
Hva du gjør her#
Sider og rammer#
Et dokument har sider; en side inneholder rammer (tegnebrett). Det er forskjellen fra Vectra, som tegner på ett tegnebrett om gangen: Composer er til et sett med skjermer eller et sett med oppslag.
Lag, ressurser og komponenter#
Fire faner over det samme dokumentet. Components er de gjenbrukbare delene, definer én gang, plasser mange, rediger definisjonen og hver forekomst følger med. Assets er det dokumentet henter inn. Laglisten er gruppert etter type (Text, Images, Graphics), som er raskere å skumme enn en flat liste på en travel side.
Legg ut presist#
X, Y, W, H og en hjørneradius, pluss align and distribute. Margins, Guides og et Baseline-rutenett er brytere på verktøylinjen: baseline-rutenettet er det som får flerkolonnetekst til å stemme overens på tvers av et oppslag.
Typografi#
Delen som gjør at Composer fortjener sin plass:
| Font, size, leading, tracking | som tall, ikke som en glidebryter |
| Alignment | horisontalt, og vertikalt i boksen: øverst, midten, nederst |
| Weight og case | inkludert «som skrevet» |
| Paragraph spacing, lister | punktliste eller nummerert |
| Resize mode | Fixed size, Auto width, Auto height: om boksen følger teksten eller teksten brytes til boksen |
| Text threading | koble én tekstboks til den neste slik at overflyt flyter videre |
| Text styles | navngitte, gjenbrukbare |
Prototype og kode#
Prototype-fanen kobler skjermer sammen til en klikkbar flyt. Code- fanen viser designet som kode.
Variabler og stiler#
To paneler som gjør et dokument om til et system i stedet for et sett med sider:
- Variables: navngitte verdier (en farge, et tall, en streng) brukt på tvers av dokumentet, med en variabelvelger overalt hvor en verdi settes. Endre variabelen, hver bruk følger med.
- Styles: navngitte tekst- og objektstiler.
- Fills: fyllredigereren, inkludert gradienter og bilder.
Sammen med Components er dette det som gjør et design tokenstyrt: Vectra sin DA-arbeidsflate kan eksportere design tokens, og Composer er der de blir brukt.
Prototyping#
En prototype her er en graf over rammene du allerede har tegnet. Hver interaksjon er fire ting: en trigger (klikk eller hover), en target-ramme, en transition og en duration. Dra fra en rammes tilkoblingshåndtak til rammen den skal føre til.
Prototype Mode gjør lerretet om til flytvisningen; Preview Player kjører den slik leseren ville sett det, med en omstart. Det finnes ikke noe eget prototypedokument, rammene er skjermene.
Dev Mode, å gi designet videre til kode#
Inspect-fanen er den andre halvdelen av et designverktøy: den leser utvalget og produserer koden for det, på tre plattformfaner.
| Fane | Utdata |
|---|---|
| CSS | nettet |
| iOS | SwiftUI |
| Android | Jetpack Compose |
Ved siden av den genererte koden rapporterer den de virkelige tallene en utvikler spør om: størrelse, radius, rotasjon, opasitet, fyll, strøk, effekter, font og fontstørrelse, og avstand målt til forelderen og til søsknene: de to avstandene som avgjør en layout. Koden kopieres til utklippstavlen eller lastes ned.
Eksport#
Eksport i Composer er en liste med innstillinger, ikke ett enkelt valg: legg til flere, velg hvilke som skal kjøres, og hver valgte innstilling produserer sin egen fil i én omgang. Hver innstilling bærer:
| Format og quality | per innstilling, så en PNG og en JPG kan forlate sammen |
| Scale og DPI | @2x og trykkoppløsning |
| CMYK (print) | for den trykkeklare versjonen |
| Naming | et prefiks og et suffiks, project- og @2x |
| Background | inkludert transparent, der formatet tillater det |
To detaljer panelet sier rett ut i stedet for å overlate til deg å oppdage:
- Bare PNG og SVG bærer transparens. Å velge en gjennomsiktig bakgrunn på en JPG er en innstilling uten effekt, og panelet sier det.
- Kilden til en eksport er enten en node eller en slice: Create Slice lager en eksportregion av det gjeldende utvalget, som er hvordan du eksporterer en del av en ramme uten å kutte opp hele rammen.
Presets lagrer et helt sett med innstillinger, så eksportoppsettet for et prosjekt skrives én gang.
Filer den leser og skriver#
| Native format | .comp |
| Exports | .png · .jpg · .svg, i hvilken som helst skala eller DPI, i RGB eller CMYK |
| Generates | CSS · SwiftUI · Jetpack Compose |
Å sende arbeid til andre moduler#
Produserer en komposisjon, og det aktive tegnebrettet rendret som et bilde. Godtar pikselkunst, vektorkunst og bilder.
Å jobbe sammen med noen andre#
Composer synkroniserer som et dokument: hele tilstanden, forsinket, pluss dispatchede handlinger. To personer som redigerer den samme siden i samme øyeblikk vil ha én av dem som vinner; jobb heller på ulike sider.
Begrensninger og vanlige fallgruver#
- Auto width og auto height kolliderer med faste layouter. En boks satt til auto width vil ikke bryte tekst; hvis tekst renner utenfor rammen, er det som regel derfor.
- Text threading er ikke automatisk. En boks viser Not linked helt til du kobler den.
- Komponenter forplanter seg fra definisjonen, ikke fra en forekomst. Å redigere en forekomst oppdaterer ikke de andre.