Composer
Susun atur dan reka bentuk: pages, frames, components dan tipografi sebenar, dengan satu pandangan prototaip dan satu pandangan kod.
Secara ringkas#
Satu kanvas tanpa had untuk menyusun sesuatu: dokumen berbilang halaman, reka bentuk skrin dan susun atur, dengan kawalan tipografi yang melangkaui "pilih satu fon dan satu saiz".
Susun atur#
| Bar menu | File · Edit · View · Object · Vector · Text · Arrange · Plugins |
| Bar alat | undo/redo, select, frame, shapes, line, arrow, pen, type, hand: kemudian Margins, Guides, Baseline, dan kiraan artboard |
| Kiri | Pages, kemudian Layers · Assets · Components · Frames, kemudian senarai kategori layer |
| Tengah | kanvas, dengan zum dan satu penunjuk halaman |
| Kanan | Design · Prototype · Code |
| Bar status | artboard, objek, pilihan, alat aktif, zum |
Apa yang anda lakukan di sini#
Pages dan frames#
Satu dokumen mempunyai pages; satu page memegang frame (artboard). Itulah perbezaannya daripada Vectra, yang melukis pada satu artboard pada satu masa: Composer adalah untuk satu set skrin atau satu set spread.
Layers, assets dan components#
Empat tab di atas dokumen yang sama. Components adalah kepingan yang boleh digunakan semula, tentukan sekali, letakkan berkali-kali, sunting definisinya dan setiap instance mengikutinya. Assets adalah apa yang sedang ditarik masuk oleh dokumen itu. Senarai layer dikumpulkan mengikut jenis (Text, Images, Graphics), yang lebih pantas diimbas berbanding satu senarai rata pada satu halaman yang sibuk.
Susun atur dengan tepat#
X, Y, W, H dan satu jejari sudut, ditambah align dan distribute. Margins, Guides dan satu grid Baseline adalah suis pada bar alat: baseline grid itulah yang menjadikan teks berbilang lajur sejajar merentasi satu spread.
Tipografi#
Bahagian yang menjadikan Composer bernilai:
| Fon, saiz, leading, tracking | sebagai nombor, bukan sebagai satu slider |
| Alignment | mendatar, dan menegak dalam kotak: atas, tengah, bawah |
| Weight dan case | termasuk "as typed" |
| Paragraph spacing, senarai | berbucu atau bernombor |
| Resize mode | Fixed size, Auto width, Auto height: sama ada kotak itu mengikut teks atau teks itu wrap kepada kotak |
| Text threading | pautkan satu kotak teks kepada yang seterusnya supaya limpahan itu mengalir terus |
| Text styles | dinamakan, boleh digunakan semula |
Prototype dan code#
Tab Prototype menyambungkan skrin bersama menjadi satu aliran yang boleh diklik. Tab Code menunjukkan reka bentuk itu sebagai kod.
Variables dan styles#
Dua panel yang menjadikan satu dokumen satu sistem berbanding satu set halaman:
- Variables: nilai bernama (satu warna, satu nombor, satu string) digunakan merentasi dokumen, dengan satu variable picker di mana sahaja satu nilai ditetapkan. Tukar variable itu, setiap kegunaannya mengikut.
- Styles: style teks dan objek yang dinamakan.
- Fills: editor isian, termasuk gradient dan imej.
Bersama Components, ia adalah apa yang menjadikan satu reka bentuk dipacu-token: ruang kerja DA Vectra boleh mengeksport design token, dan Composer adalah tempat ia digunakan.
Prototaip#
Satu prototaip di sini adalah satu graf di atas frame-frame yang telah anda lukis. Setiap interaksi adalah empat perkara: satu trigger (click atau hover), satu frame sasaran, satu transition dan satu duration. Seret daripada handle sambungan satu frame ke frame yang sepatutnya dituju.
Prototype Mode menukar kanvas itu menjadi pandangan aliran; Preview Player menjalankannya sebagaimana pembaca akan melihatnya, dengan satu restart. Tiada dokumen prototaip yang berasingan, frame-frame itu adalah skrin itu sendiri.
Dev Mode, menyerahkan reka bentuk kepada kod#
Tab Inspect adalah separuh lain sebuah alat reka bentuk: ia membaca pilihan itu dan menghasilkan kod untuknya, pada tiga tab platform.
| Tab | Output |
|---|---|
| CSS | web |
| iOS | SwiftUI |
| Android | Jetpack Compose |
Di sebelah kod yang dijana itu ia melaporkan nombor sebenar yang diminta oleh seorang pembangun: saiz, radius, putaran, opacity, fill, stroke, effects, fon dan saiz fon, dan spacing yang diukur kepada ibu bapa dan kepada sibling: dua jarak yang menentukan satu susun atur. Kod itu disalin ke clipboard atau dimuat turun.
Mengeksport#
Export dalam Composer adalah satu senarai tetapan, bukan satu pilihan tunggal: tambah beberapa, pilih mana yang hendak dijalankan, dan setiap tetapan yang dipilih menghasilkan satu failnya sendiri dalam satu lintasan. Setiap tetapan membawa:
| Format dan quality | bagi setiap tetapan, jadi satu PNG dan satu JPG boleh keluar bersama |
| Scale dan DPI | @2x dan resolusi cetakan |
| CMYK (print) | untuk versi yang ditujukan untuk pencetakan |
| Naming | satu prefix dan satu suffix, project- dan @2x |
| Background | termasuk transparent, di mana format itu membenarkannya |
Dua perkara yang dinyatakan oleh panel dan bukan dibiarkan untuk anda temui sendiri:
- Hanya PNG dan SVG membawa ketelusan. Memilih satu background lutsinar pada satu JPG adalah satu tetapan yang tiada kesan, dan panel itu menyatakan begitu.
- Sumber satu export adalah sama ada satu node atau satu slice: Create Slice membuat satu kawasan eksport daripada pilihan semasa, dan itulah caranya anda mengeksport sebahagian satu frame tanpa memotong frame itu.
Presets menyimpan satu set tetapan sepenuhnya, jadi konfigurasi eksport bagi satu projek ditulis sekali sahaja.
Fail yang dibaca dan ditulis#
| Format asli | .comp |
| Eksport | .png · .jpg · .svg, pada mana-mana scale atau DPI, dalam RGB atau CMYK |
| Menjana | CSS · SwiftUI · Jetpack Compose |
Menghantar kerja ke studio lain#
Menghasilkan satu komposisi, dan artboard aktif dirender sebagai satu imej. Menerima karya seni piksel, karya seni vektor dan imej.
Bekerja bersama orang lain#
Composer melakukan sync sebagai satu dokumen: keseluruhan keadaan, debounced, ditambah tindakan yang dihantar. Dua orang menyunting halaman yang sama pada saat yang sama akan mempunyai salah seorang menang; bekerja pada halaman yang berbeza sebaliknya.
Had dan masalah biasa#
- Auto width dan auto height berlawanan dengan susun atur tetap. Satu kotak yang ditetapkan kepada auto width tidak akan wrap; jika teks berjalan keluar daripada frame, itu biasanya sebabnya.
- Text threading tidak automatik. Satu kotak melaporkan Not linked sehingga anda menghubungkannya.
- Components merebak daripada definisinya, bukan daripada satu instance. Menyunting satu instance tidak mengemas kini yang lain.