Composer
Layout a design: stránky, rámy, komponenty a skutečná typografie, s pohledem na prototyp a pohledem na kód.
V jedné větě#
Nekonečné plátno pro aranžování věcí: vícestránkové dokumenty, návrhy obrazovek a rozvržení, s typografickými ovládacími prvky, které jdou dál než "vyberte font a velikost".
Rozvržení#
| Menu bar | File · Edit · View · Object · Vector · Text · Arrange · Plugins |
| Toolbar | zpět/znovu, select, frame, shapes, line, arrow, pen, type, hand: pak Margins, Guides, Baseline a počet artboardů |
| Left | Pages, pak Layers · Assets · Components · Frames, pak seznam kategorií vrstev |
| Centre | plátno, se zoomem a ukazatelem stránky |
| Right | Design · Prototype · Code |
| Status bar | artboardy, objekty, výběr, aktivní nástroj, zoom |
Co tu děláte#
Stránky a rámy#
Dokument má stránky; stránka drží rámy (artboardy). To je rozdíl oproti Vectra, která kreslí na jeden artboard najednou: Composer je na sadu obrazovek nebo sadu dvoustran.
Vrstvy, assety a komponenty#
Čtyři karty nad stejným dokumentem. Components jsou znovupoužitelné kusy, definujte jednou, umístěte mnohokrát, upravte definici a každá instance ji následuje. Assets je to, co dokument přebírá. Seznam vrstev je seskupený podle druhu (Text, Images, Graphics), což se prochází pohledem rychleji než plochý seznam na rušné stránce.
Přesné rozvržení#
X, Y, W, H a poloměr rohu, plus align a distribute. Margins, Guides a mřížka Baseline jsou přepínače na toolbaru: mřížka baseline je to, co srovná víceloupcový text napříč dvoustranou.
Typografie#
Část, díky které si Composer vysloužil svoje místo:
| Font, size, leading, tracking | jako čísla, ne jako posuvník |
| Alignment | vodorovné, a svislé v rámci boxu: top, middle, bottom |
| Weight a case | včetně "as typed" |
| Paragraph spacing, seznamy | s odrážkami nebo číslované |
| Resize mode | Fixed size, Auto width, Auto height: jestli box sleduje text, nebo se text zalamuje do boxu |
| Text threading | propojí jeden textový box s dalším, aby přetékající text plynul dál |
| Text styles | pojmenované, znovupoužitelné |
Prototype a code#
Karta Prototype propojí obrazovky do klikatelného toku. Karta Code ukazuje design jako kód.
Proměnné a styly#
Dva panely, které mění dokument v systém místo sady stránek:
- Variables: pojmenované hodnoty (barva, číslo, řetězec) použité napříč dokumentem, s výběrem proměnné všude, kde se nastavuje hodnota. Změňte proměnnou, změní se každé její použití.
- Styles: pojmenované styly textu a objektů.
- Fills: editor výplně, včetně přechodů a obrázků.
Spolu s Components je to to, co dělá design řízený tokeny: pracovní prostor DA ve Vectra umí exportovat design tokeny, a Composer je místo, kde se používají.
Prototypování#
Prototyp je tady graf nad rámy, které jste už nakreslili. Každá interakce jsou čtyři věci: trigger (klik nebo hover), cílový rám (target), transition a duration. Přetáhněte z propojovacího úchytu rámu k rámu, na který má vést.
Prototype Mode promění plátno v pohled na tok; Preview Player ho spustí tak, jak by ho viděl čtenář, s možností restartu. Neexistuje samostatný dokument pro prototypování, rámy jsou obrazovky.
Dev Mode, předání designu kódu#
Karta Inspect je druhá polovina návrhového nástroje: čte výběr a produkuje pro něj kód, na třech kartách platforem.
| Karta | Výstup |
|---|---|
| CSS | web |
| iOS | SwiftUI |
| Android | Jetpack Compose |
Vedle vygenerovaného kódu hlásí skutečná čísla, na která se ptá vývojář: velikost, poloměr, rotace, opacita, výplň, obrys, efekty, font a velikost fontu, a rozestupy měřené k rodiči a k sourozencům: dvě vzdálenosti, které rozhodují o layoutu. Kód se kopíruje do schránky nebo stahuje.
Export#
Export v Composer je seznam nastavení, ne jedna volba: přidejte jich víc, vyberte, které z nich spustit, a každé vybrané nastavení vyprodukuje vlastní soubor v jednom průchodu. Každé nastavení nese:
| Format a quality | pro každé nastavení zvlášť, takže PNG a JPG mohou odejít společně |
| Scale a DPI | @2x a tiskové rozlišení |
| CMYK (print) | pro verzi určenou do tisku |
| Naming | prefix a suffix, project- a @2x |
| Background | včetně transparentního, tam, kde to formát dovolí |
Dva detaily, které panel rovnou řekne, místo aby vás nechal na ně přijít sám:
- Průhlednost nesou jen PNG a SVG. Zvolit průhledné pozadí na JPG je nastavení bez efektu, a panel to řekne.
- Zdrojem exportu je buď uzel, nebo slice: Create Slice udělá z aktuálního výběru exportní oblast, čímž vyexportujete část rámu, aniž byste ho museli rozřezat.
Presets uloží celou sadu nastavení, takže exportní konfigurace projektu se napíše jednou.
Soubory, které čte a zapisuje#
| Nativní formát | .comp |
| Exporty | .png · .jpg · .svg, v libovolném měřítku nebo DPI, v RGB nebo CMYK |
| Generuje | CSS · SwiftUI · Jetpack Compose |
Odesílání práce do jiných studií#
Produkuje kompozici, a aktivní artboard vykreslený jako obrázek. Přijímá pixel art, vektorovou grafiku a obrázky.
Práce s někým dalším#
Composer synchronizuje jako dokument: celý stav, s odstupem, plus odeslané akce. Když dva lidé editují stejnou stránku ve stejném okamžiku, jeden z nich vyhraje; pracujte raději na různých stránkách.
Limity a časté zádrhely#
- Auto width a auto height bojují s pevným layoutem. Box nastavený na auto width se nezalomí; pokud text vyjíždí z rámu, obvykle je to tímto.
- Text threading není automatický. Box hlásí Not linked, dokud ho nepropojíte.
- Components se šíří z definice, ne z instance. Úprava instance neaktualizuje ostatní.