Composer
Elrendezés és design: oldalak, keretek, komponensek és valódi tipográfia, egy prototípus nézettel és egy kód nézettel.
Egy mondatban#
Egy végtelen vászon dolgok elrendezéséhez: többoldalas dokumentumok, képernyőtervek és elrendezések, tipográfiai vezérlőkkel, amelyek túlmutatnak azon, hogy "válassz egy betűtípust és egy méretet".
Az elrendezés#
| Menüsor | File · Edit · View · Object · Vector · Text · Arrange · Plugins |
| Eszköztár | visszavonás/mégis, kijelölés, keret, alakzatok, vonal, nyíl, toll, típus, kéz: aztán Margins, Guides, Baseline, és a rajzlapszám |
| Bal | Pages, aztán Layers · Assets · Components · Frames, aztán a rétegkategória-lista |
| Középen | a vászon, a nagyítással és egy oldaljelzővel |
| Jobb | Design · Prototype · Code |
| Állapotsor | rajzlapok, objektumok, kijelölés, aktív eszköz, nagyítás |
Mit csinálhatsz itt#
Oldalak és keretek#
Egy dokumentumnak oldalai vannak; egy oldal kereteket (rajzlapokat) tartalmaz. Ez a különbség a Vectrához képest, amely egyszerre egy rajzlapon dolgozik: a Composer egy képernyőkészlethez vagy egy kifutókészlethez való.
Rétegek, assetek és komponensek#
Négy fül ugyanazon dokumentum fölött. A Components az újrafelhasználható darabok: definiáld egyszer, helyezd el sokszor, szerkeszd a definíciót, és minden példány követi. Az Assets az, amit a dokumentum behúz. A réteglista fajta szerint van csoportosítva (Text, Images, Graphics), ami gyorsabban átlátható, mint egy lapos lista egy zsúfolt oldalon.
Pontos elrendezés#
X, Y, W, H és egy sarokrádiusz, plusz igazítás és eloszlatás. A Margins, a Guides és egy Baseline rács kapcsolók az eszköztáron: a baseline rács az, ami a többoszlopos szöveget egy vonalba állítja egy kifutón át.
Tipográfia#
A rész, amely kiérdemli a Composer helyét:
| Betűtípus, méret, sorköz, betűköz | számként, nem csúszkaként |
| Igazítás | vízszintesen, és függőlegesen a dobozon belül: fent, középen, lent |
| Súly és kis-/nagybetű | beleértve az "ahogy gépelve van"-t |
| Bekezdésköz, listák | pontozott vagy számozott |
| Átméretezési mód | Fixed size, Auto width, Auto height: hogy a doboz követi-e a szöveget, vagy a szöveg tördelődik a dobozhoz |
| Szövegfűzés | egy szövegdoboz összekötése a következővel, hogy a túlcsordulás továbbfolyjon |
| Szövegstílusok | nevezett, újrafelhasználható |
Prototípus és kód#
A Prototype fül képernyőket köt össze egy kattintható folyamattá. A Code fül kódként mutatja a designt.
Változók és stílusok#
Két panel, amely egy dokumentumot rendszerré alakít, nem csak oldalak halmazává:
- Variables: nevezett értékek (egy szín, egy szám, egy string), amelyeket a dokumentumban mindenhol használnak, egy változóválasztóval, bárhol, ahol egy érték be van állítva. Változtasd meg a változót, minden felhasználás követi.
- Styles: nevezett szöveg- és objektumstílusok.
- Fills: a kitöltésszerkesztő, gradiensekkel és képekkel együtt.
A Components-szel együtt ezek teszik egy designt token-vezéreltté: a Vectra DA munkaterülete exportálhat design tokeneket, és a Composer az, ahol ezeket felhasználják.
Prototípuskészítés#
Egy prototípus itt egy gráf a már megrajzolt keretek fölött. Minden interakció négy dolog: egy trigger (kattintás vagy hover), egy cél keret, egy átmenet és egy időtartam. Húzz egy keret csatlakozási fogantyújáról oda, ahová vezetnie kell.
A Prototype Mode a vászont folyamatnézetté alakítja; a Preview Player úgy futtatja le, ahogy az olvasó látná, egy újraindítással. Nincs külön prototípus-dokumentum, a keretek maguk a képernyők.
Dev Mode, a design átadása a kódnak#
Az Inspect fül a design eszköz másik fele: beolvassa a kijelölést, és elkészíti hozzá a kódot, három platformfülön.
| Fül | Kimenet |
|---|---|
| CSS | a web |
| iOS | SwiftUI |
| Android | Jetpack Compose |
A generált kód mellett jelenti azokat a valódi számokat, amiket egy fejlesztő kér: méret, rádiusz, forgatás, átlátszatlanság, kitöltés, körvonal, effektek, betűtípus és betűméret, és a szülőhöz és a testvérekhez mért távolság: a két távolság, amely eldönt egy elrendezést. A kód a vágólapra másolódik vagy letölthető.
Exportálás#
A Composerben az exportálás egy beállításlista, nem egyetlen választás: adj hozzá többet, válaszd ki, melyiket futtatod, és minden kiválasztott beállítás a saját fájlját állítja elő egy menetben. Minden beállítás hordozza:
| Format és quality | beállításonként, így egy PNG és egy JPG együtt is távozhat |
| Scale és DPI | @2x és nyomdai felbontás |
| CMYK (print) | a nyomdakész verzióhoz |
| Naming | egy előtag és egy utótag, project- és @2x |
| Background | beleértve az átlátszót, ahol a formátum engedi |
Két részlet, amit a panel kimond, ahelyett hogy rád hagyná a felfedezését:
- Csak a PNG és az SVG hordoz átlátszóságot. Egy átlátszó háttér választása egy JPG-n egy hatástalan beállítás, és a panel ezt mondja.
- Egy export forrása vagy egy node, vagy egy slice: a Create Slice egy exportrégiót készít az aktuális kijelölésből, így exportálhatsz egy keret egy részét anélkül, hogy szétvágnád a keretet.
A Presets egy teljes beállításkészletet mentenek el, így egy projekt exportkonfigurációja egyszer íródik meg.
Fájlok, amelyeket olvas és ír#
| Natív formátum | .comp |
| Export | .png · .jpg · .svg, bármilyen skálán vagy DPI-n, RGB-ben vagy CMYK-ban |
| Generál | CSS · SwiftUI · Jetpack Compose |
Munka küldése más modulokba#
Előállít egy kompozíciót, és az aktív rajzlapot képként renderelve. Elfogad pixelművészetet, vektorgrafikát és képeket.
Közös munka#
A Composer dokumentumként szinkronizál: a teljes állapot, debounce-olva, plusz kiadott akciók. Két ember, aki ugyanazt az oldalt szerkeszti ugyanabban a pillanatban, azt eredményezi, hogy az egyikük nyer; dolgozzatok külön oldalakon.
Korlátok és gyakori buktatók#
- Az Auto width és az Auto height harcban áll a fix elrendezésekkel. Egy auto width-re állított doboz nem fog tördelni; ha a szöveg kilóg a keretből, ez általában ezért van.
- A szövegfűzés nem automatikus. Egy doboz Not linked-et jelez, amíg össze nem fűzöd.
- A komponensek a definícióból terjednek, nem egy példányból. Egy példány szerkesztése nem frissíti a többit.