Composer
Asettelu ja suunnittelu: sivut, kehykset, komponentit ja aito typografia, prototyyppinäkymällä ja koodinäkymällä.
Yhdellä lauseella#
Ääretön canvas asioiden järjestelyyn: monisivuiset dokumentit, ruutusuunnittelut ja asettelut, typografisilla säätimillä, jotka menevät pidemmälle kuin "valitse fontti ja koko".
Asettelu#
| Menu bar | File · Edit · View · Object · Vector · Text · Arrange · Plugins |
| Toolbar | kumoa/tee uudelleen, select, frame, muodot, viiva, nuoli, pen, type, hand: sitten Margins, Guides, Baseline, ja artboardien määrä |
| Left | Pages, sitten Layers · Assets · Components · Frames, sitten tasokategorialista |
| Centre | canvas, zoomilla ja sivuosoittimella |
| Right | Design · Prototype · Code |
| Status bar | artboardit, objektit, valinta, aktiivinen työkalu, zoom |
Mitä täällä tehdään#
Sivut ja kehykset#
Dokumentilla on sivuja; sivu pitää sisällään kehyksiä (artboardeja). Se on ero Vectraan verrattuna, joka piirtää yhdelle artboardille kerrallaan: Composer on tarkoitettu ruutujoukolle tai aukeamajoukolle.
Tasot, assetit ja komponentit#
Neljä välilehteä saman dokumentin yllä. Components ovat uudelleenkäytettäviä paloja, määrittele kerran, sijoita monta kertaa, muokkaa määritelmää ja jokainen instanssi seuraa mukana. Assets on se, mitä dokumentti tuo mukanaan. Tasolista on ryhmitelty lajin mukaan (Text, Images, Graphics), mikä on nopeampi silmäillä kuin litteä lista vilkkaalla sivulla.
Asettele tarkasti#
X, Y, W, H ja kulmasäde, sekä align ja distribute. Margins, Guides ja Baseline-ruudukko ovat kytkimiä työkalupalkissa: baseline-ruudukko on se, mikä saa monipalstaisen tekstin linjaan aukeaman yli.
Typografia#
Osa, joka ansaitsee Composerille paikkansa:
| Font, size, leading, tracking | lukuina, ei liukusäätimenä |
| Alignment | vaakasuunnassa, ja pystysuunnassa laatikon sisällä: top, middle, bottom |
| Weight ja case | mukaan lukien "as typed" |
| Paragraph spacing, listat | luetellut tai numeroidut |
| Resize mode | Fixed size, Auto width, Auto height: seuraako laatikko tekstiä vai kiertyykö teksti laatikkoon |
| Text threading | linkitä yksi tekstilaatikko seuraavaan, jotta ylivuoto jatkuu |
| Text styles | nimettyjä, uudelleenkäytettäviä |
Prototyyppi ja koodi#
Prototype-välilehti kytkee ruudut yhteen napsautettavaksi kuluksi. Code-välilehti näyttää suunnittelun koodina.
Muuttujat ja tyylit#
Kaksi paneelia, jotka muuttavat dokumentin järjestelmäksi sivujoukon sijaan:
- Variables: nimettyjä arvoja (väri, luku, merkkijono), käytettynä läpi dokumentin, muuttujavalitsimella aina, kun arvo asetetaan. Vaihda muuttujaa, jokainen käyttökohta seuraa mukana.
- Styles: nimettyjä teksti- ja objektityylejä.
- Fills: täyttöeditori, gradientit ja kuvat mukaan lukien.
Yhdessä Componentsin kanssa ne ovat se, mikä tekee suunnittelusta tokenpohjaisen: Vectran DA-työtila voi viedä suunnittelutokeneita, ja Composer on paikka, jossa niitä käytetään.
Prototyyppaus#
Prototyyppi täällä on graafi jo piirrettyjen kehysten yli. Jokainen vuorovaikutus on neljä asiaa: trigger (napsautus tai hover), target- kehys, transition ja duration. Vedä kehyksen liitäntäkahvasta kehykseen, johon sen pitäisi johtaa.
Prototype Mode muuttaa canvasin flow-näkymäksi; Preview Player ajaa sen sellaisena kuin lukija sen näkisi, uudelleenkäynnistyksellä. Erillistä prototyyppidokumenttia ei ole, kehykset ovat ruudut.
Dev Mode, suunnittelun antaminen koodille#
Inspect-välilehti on suunnittelutyökalun toinen puolisko: se lukee valinnan ja tuottaa sille koodin, kolmella alustavälilehdellä.
| Tab | Output |
|---|---|
| CSS | web |
| iOS | SwiftUI |
| Android | Jetpack Compose |
Generoidun koodin rinnalla se raportoi todelliset luvut, joita kehittäjä kysyy: koko, säde, rotaatio, opasiteetti, täyttö, viiva, efektit, fontti ja fonttikoko, sekä väli mitattuna vanhempaan ja sisaruksiin: kaksi etäisyyttä, jotka päättävät asettelun.Koodi kopioituu leikepöydälle tai latautuu.
Vienti#
Vienti Composerissa on lista asetuksia, ei yksi valinta: lisää useita, valitse, mitkä ajetaan, ja jokainen valittu asetus tuottaa oman tiedostonsa yhdellä ajolla. Jokainen asetus kantaa mukanaan:
| Format ja quality | asetuskohtaisesti, joten PNG ja JPG voivat lähteä yhdessä |
| Scale ja DPI | @2x ja tulostusresoluutio |
| CMYK (print) | painovalmiille versiolle |
| Naming | etuliite ja jälkiliite, project- ja @2x |
| Background | mukaan lukien transparent, siellä missä formaatti sen sallii |
Kaksi yksityiskohtaa, jotka paneeli ilmoittaa sen sijaan, että jättäisi ne sinun löydettäväksesi:
- Vain PNG ja SVG kantavat läpinäkyvyyttä. Läpinäkyvän taustan valitseminen JPG:lle on asetus, jolla ei ole vaikutusta, ja paneeli sanoo niin.
- Viennin lähde on joko node tai slice: Create Slice tekee vientialueen nykyisestä valinnasta, ja näin viet osan kehyksestä leikkaamatta kehystä palasiksi.
Presets tallentavat koko asetusjoukon, joten projektin vientikokoonpano kirjoitetaan kerran.
Tiedostot, jotka se lukee ja kirjoittaa#
| Natiivi formaatti | .comp |
| Vienti | .png · .jpg · .svg, missä tahansa skaalassa tai DPI:ssä, RGB:nä tai CMYK:na |
| Generoi | CSS · SwiftUI · Jetpack Compose |
Työn lähettäminen muihin studioihin#
Tuottaa koosteen, ja aktiivisen artboardin renderöitynä kuvaksi. Hyväksyy pikselitaidetta, vektoritaidetta ja kuvia.
Työskentely toisen kanssa#
Composer synkronoi dokumenttina: koko tila, viivästettynä, sekä lähetetyt toiminnot. Kaksi ihmistä muokkaamassa samaa sivua samalla hetkellä päätyy siihen, että toinen heistä voittaa; työskentele eri sivuilla sen sijaan.
Rajoitukset ja yleiset sudenkuopat#
- Auto width ja auto height taistelevat kiinteitä asetteluja vastaan. Auto width -asetuksella oleva laatikko ei kierrä; jos teksti valuu kehyksen ulkopuolelle, syy on yleensä tämä.
- Text threading ei ole automaattista. Laatikko raportoi Not linked, kunnes ketjutat sen.
- Komponentit periytyvät määritelmästä, ei instanssista. Instanssin muokkaaminen ei päivitä muita.