Composer
Layout og design: sider, frames, komponenter og rigtig typografi, med en prototype-visning og en kodevisning.
I én sætning#
Et uendeligt canvas til at arrangere ting på: dokumenter med flere sider, skærmdesign og layouts, med typografiske kontroller, der går videre end "vælg en skrifttype og en størrelse".
Opbygningen#
| Menulinje | File · Edit · View · Object · Vector · Text · Arrange · Plugins |
| Værktøjslinje | fortryd/gentag, vælg, frame, former, linje, pil, pen, type, hånd: så Margins, Guides, Baseline, og antal frames |
| Venstre | Pages, så Layers · Assets · Components · Frames, og derefter lag-kategori-listen |
| Centrum | canvasset, med zoom og en sideindikator |
| Højre | Design · Prototype · Code |
| Statuslinje | frames, objekter, markering, aktivt værktøj, zoom |
Hvad du gør her#
Sider og frames#
Et dokument har sider; en side rummer frames (arbejdsflader). Det er forskellen fra Vectra, som tegner på én arbejdsflade ad gangen: Composer er til et sæt skærme eller et sæt opslag.
Lag, assets og komponenter#
Fire faner over det samme dokument. Components er de genbrugelige stykker, definér én gang, placér mange, redigér definitionen, og hver instans følger med. Assets er det, dokumentet trækker ind. Laglisten er grupperet efter type (Text, Images, Graphics), hvilket går hurtigere at skimme end en flad liste på en travl side.
Layout præcist#
X, Y, W, H og en hjørneradius, plus align og distribute. Margins, Guides og et Baseline-gitter er knapper på værktøjslinjen: baseline-gitteret er det, der får flerkolonnetekst til at flugte på tværs af et opslag.
Typografi#
Den del, der gør Composer værd at have:
| Font, size, leading, tracking | som tal, ikke som en skyder |
| Alignment | vandret, og lodret i boksen: top, midte, bund |
| Weight og case | inklusive "as typed" |
| Paragraph spacing, lister | punktopstillede eller nummererede |
| Resize mode | Fixed size, Auto width, Auto height: om boksen følger teksten, eller teksten ombryder til boksen |
| Text threading | link én tekstboks til den næste, så overløb flyder videre |
| Text styles | navngivne, genbrugelige |
Prototype og kode#
Fanen Prototype kobler skærme sammen til et klikbart flow. Fanen Code viser designet som kode.
Variabler og styles#
To paneler, der gør et dokument til et system frem for et sæt sider:
- Variables: navngivne værdier (en farve, et tal, en streng) brugt på tværs af dokumentet, med en variabelvælger, hvor end en værdi sættes. Skift variablen, og hver brug følger med.
- Styles: navngivne tekst- og objektstyles.
- Fills: fyld-editoren, inklusive gradienter og billeder.
Sammen med Components er de det, der gør et design token-drevet: DA- arbejdsområdet i Vectra kan eksportere design-tokens, og Composer er, hvor de tages i brug.
Prototyping#
En prototype her er en graf over de frames, du allerede har tegnet. Hver interaktion er fire ting: en trigger (klik eller hover), en target-frame, en transition og en duration. Træk fra en frames connect-håndtag til den frame, den skal føre til.
Prototype Mode gør canvasset til flow-visningen; Preview Player afspiller det, som læseren ville se det, med en genstart. Der findes ikke et separat prototype-dokument, frames'ene er skærmene.
Dev Mode, overdragelse af designet til kode#
Fanen Inspect er den anden halvdel af et designværktøj: den læser markeringen og producerer koden til den, på tre platformsfaner.
| Fane | Output |
|---|---|
| CSS | webben |
| iOS | SwiftUI |
| Android | Jetpack Compose |
Ved siden af den genererede kode rapporterer den de reelle tal, en udvikler spørger efter: størrelse, radius, rotation, opacitet, fyld, streg, effekter, skrifttype og skriftstørrelse, og afstand målt til forælderen og til søskende: de to afstande, der afgør et layout. Kode kopieres til udklipsholderen eller downloades.
Eksport#
Eksport i Composer er en liste af indstillinger, ikke ét valg: tilføj flere, vælg hvilke der skal køres, og hver valgt indstilling producerer sin egen fil i én omgang. Hver indstilling rummer:
| Format og quality | pr. indstilling, så en PNG og en JPG kan følges ad |
| Scale og DPI | @2x og trykopløsning |
| CMYK (print) | til den trykklare version |
| Naming | et præfiks og et suffiks, project- og @2x |
| Background | inklusive transparent, hvor formatet tillader det |
To detaljer, panelet fastslår i stedet for at lade dig opdage dem selv:
- Kun PNG og SVG bærer gennemsigtighed. At vælge en gennemsigtig baggrund på en JPG er en indstilling uden effekt, og panelet siger det.
- Kilden til en eksport er enten en node eller en slice: Create Slice laver et eksportområde ud af den aktuelle markering, hvilket er, hvordan du eksporterer en del af en frame uden at skære frame'en op.
Presets gemmer et helt sæt indstillinger, så eksportopsætningen for et projekt skrives én gang.
Filer, det læser og skriver#
| Native format | .comp |
| Exports | .png · .jpg · .svg, i enhver skala eller DPI, i RGB eller CMYK |
| Genererer | CSS · SwiftUI · Jetpack Compose |
Sende arbejde til andre moduler#
Producerer en komposition, og den aktive arbejdsflade renderet som et billede. Accepterer pixelart, vektorgrafik og billeder.
Arbejde sammen med andre#
Composer synkroniserer som et dokument: hele tilstanden, debounced, plus afsendte handlinger. To personer, der redigerer den samme side på samme øjeblik, ender med, at én af dem vinder; arbejd i stedet på forskellige sider.
Grænser og almindelige faldgruber#
- Auto width og auto height bekæmper faste layouts. En boks sat til auto width vil ikke ombryde; hvis tekst løber ud over frame'en, er det som regel derfor.
- Text threading er ikke automatisk. En boks melder Not linked, indtil du forbinder den.
- Components spreder sig fra definitionen, ikke fra en instans. At redigere en instans opdaterer ikke de andre.