Composer
Layout och design: sidor, ramar, komponenter och riktig typografi, med en prototypvy och en kodvy.
I korthet#
En oändlig arbetsyta för att arrangera saker: flersidiga dokument, skärmdesign och layouter, med typografiska kontroller som går längre än "välj ett typsnitt och en storlek".
Layouten#
| Menu bar | File · Edit · View · Object · Vector · Text · Arrange · Plugins |
| Toolbar | ångra/gör om, markera, ram, former, linje, pil, penna, typ, hand: sedan Margins, Guides, Baseline, och antalet ritbräden |
| Vänster | Pages, sedan Layers · Assets · Components · Frames, sedan listan över lagerkategorier |
| Mitten | arbetsytan, med zoom och en sidindikator |
| Höger | Design · Prototype · Code |
| Statusraden | ritbräden, objekt, markering, aktivt verktyg, zoom |
Vad du gör här#
Sidor och ramar#
Ett dokument har sidor; en sida håller ramar (ritbräden). Det är skillnaden mot Vectra, som ritar på ett ritbräde i taget: Composer är till för en uppsättning skärmar eller en uppsättning uppslag.
Lager, tillgångar och komponenter#
Fyra flikar över samma dokument. Components är de återanvändbara delarna, definiera en gång, placera många, redigera definitionen och varje instans följer med. Assets är det dokumentet drar in. Lagerlistan är grupperad efter typ (Text, Images, Graphics), vilket går snabbare att avläsa än en platt lista på en full sida.
Layout precist#
X, Y, W, H och en hörnradie, plus align and distribute. Margins, Guides och ett Baseline-rutnät är omkopplare på verktygsraden: baslinjerutnätet är det som gör att flerspaltig text radar upp sig genom ett uppslag.
Typografi#
Delen som gör att Composer förtjänar sin plats:
| Font, size, leading, tracking | som siffror, inte som ett reglage |
| Alignment | horisontellt, och vertikalt inom rutan: överkant, mitten, nederkant |
| Weight och case | inklusive "som skrivet" |
| Paragraph spacing, listor | punktlistor eller numrerade |
| Resize mode | Fixed size, Auto width, Auto height: om rutan följer texten eller texten radbryts till rutan |
| Text threading | länka en textruta till nästa så att överflöd flödar vidare |
| Text styles | namngivna, återanvändbara |
Prototype och Code#
Fliken Prototype kopplar samman skärmar till ett klickbart flöde. Fliken Code visar designen som kod.
Variabler och stilar#
Två paneler som gör om ett dokument till ett system i stället för en samling sidor:
- Variables: namngivna värden (en färg, ett tal, en sträng) som används genom dokumentet, med en variabelväljare varhelst ett värde ställs in. Ändra variabeln, varje användning följer med.
- Styles: namngivna text- och objektstilar.
- Fills: fyllnadseditorn, inklusive gradienter och bilder.
Tillsammans med Components är de vad som gör en design tokendriven: Vectras DA-arbetsyta kan exportera designtokens, och Composer är där de används.
Prototyping#
En prototyp här är en graf över de ramar du redan har ritat. Varje interaktion är fyra saker: en trigger (klick eller hover), en mål-ram, en transition och en duration. Dra från en ramas anslutningshandtag till ramen den ska leda till.
Prototype Mode gör om arbetsytan till flödesvyn; Preview Player kör det som läsaren skulle se det, med en omstart. Det finns inget separat prototypdokument, ramarna är skärmarna.
Dev Mode, att lämna designen till kod#
Fliken Inspect är den andra halvan av ett designverktyg: den läser markeringen och producerar koden för den, på tre plattformsflikar.
| Flik | Utdata |
|---|---|
| CSS | webben |
| iOS | SwiftUI |
| Android | Jetpack Compose |
Vid sidan av den genererade koden rapporterar den de riktiga siffror en utvecklare frågar efter: storlek, radie, rotation, opacitet, fyllning, kontur, effekter, typsnitt och typsnittsstorlek, och avstånd mätt till föräldern och till syskon: de två avstånden som avgör en layout. Koden kopieras till urklipp eller laddas ner.
Att exportera#
Export i Composer är en lista med inställningar, inte ett enda val: lägg till flera, välj vilka som ska köras, och varje vald inställning producerar sin egen fil i ett svep. Varje inställning bär med sig:
| Format och quality | per inställning, så att en PNG och en JPG kan lämna tillsammans |
| Scale och DPI | @2x och tryckupplösning |
| CMYK (print) | för den tryckklara versionen |
| Naming | ett prefix och ett suffix, project- och @2x |
| Background | inklusive transparent, där formatet tillåter det |
Två detaljer panelen anger i stället för att låta dig upptäcka dem själv:
- Bara PNG och SVG bär transparens. Att välja en transparent bakgrund på en JPG är en inställning utan effekt, och panelen säger det.
- Källan för en export är antingen en nod eller en slice: Create Slice gör en exportregion av den aktuella markeringen, vilket är hur du exporterar en del av en ram utan att klippa upp ramen.
Presets sparar en hel uppsättning inställningar, så att exportkonfigurationen för ett projekt skrivs en gång.
Filer den läser och skriver#
| Native format | .comp |
| Exports | .png · .jpg · .svg, i valfri skala eller DPI, i RGB eller CMYK |
| Generates | CSS · SwiftUI · Jetpack Compose |
Skicka arbete till andra studior#
Producerar en komposition, och det aktiva ritbrädet renderat som en bild. Accepterar pixelkonst, vektorkonst och bilder.
Att arbeta med andra#
Composer synkar som ett dokument: hela tillståndet, debounced, plus utlösta åtgärder. Två personer som redigerar samma sida i samma ögonblick får en av dem att vinna; arbeta på olika sidor.
Begränsningar och vanliga fallgropar#
- Auto width och auto height krockar med fasta layouter. En ruta satt till auto width radbryter inte; om text rinner utanför ramen är det oftast därför.
- Text threading är inte automatisk. En ruta rapporterar Not linked tills du trädar den.
- Komponenter sprids från definitionen, inte från en instans. Att redigera en instans uppdaterar inte de andra.