Composer
Düzen ve tasarım: sayfalar, çerçeveler, bileşenler ve gerçek tipografi; bir prototip görünümü ve bir kod görünümüyle.
Tek cümleyle#
Düzenlemek için sonsuz bir tuval: çok sayfalı belgeler, ekran tasarımları ve düzenler; "bir yazı tipi ve bir boyut seçmek"ten daha ileri giden tipografi denetimleriyle.
Yerleşim#
| Menü çubuğu | File · Edit · View · Object · Vector · Text · Arrange · Plugins |
| Araç çubuğu | geri al/yinele, seçim, çerçeve, şekiller, çizgi, ok, kalem, tip, el; sonra Margins, Guides, Baseline, ve çalışma yüzeyi sayacı |
| Sol | Pages, sonra Layers · Assets · Components · Frames, sonra katman kategorileri listesi |
| Orta | zoom ve bir sayfa göstergesiyle tuval |
| Sağ | Design · Prototype · Code |
| Durum çubuğu | çalışma yüzeyleri, nesneler, seçim, etkin araç, zoom |
Burada ne yaparsınız#
Sayfalar ve çerçeveler#
Bir belgenin sayfaları vardır; bir sayfa çerçeveler (çalışma yüzeyleri) taşır. Bu, aynı anda tek bir çalışma yüzeyi üzerine çizen Vectra'dan farkıdır: Composer, bir ekran seti ya da bir yayılma seti için tasarlanmıştır.
Katmanlar, varlıklar ve bileşenler#
Aynı belge üzerinde dört sekme. Components, yeniden kullanılabilir parçalardır: bir kez tanımlanır, birçok kez yerleştirilir; tanımı düzenleyin ve her örnek onu izler. Assets, belgenin dışarıdan çektiği şeydir. Katman listesi türe göre gruplanmıştır (Text, Images, Graphics); yoğun bir sayfada düz bir listeden daha hızlı taranır.
Hassas düzenleme#
X, Y, W, H ve bir köşe yarıçapı, artı align and distribute. Margins, Guides ve bir Baseline gridi, araç çubuğundaki değiştiricilerdir: taban çizgisi gridi, bir yayılma boyunca çok sütunlu metnin hizalanmasını sağlayan şeydir.
Tipografi#
Composer'a yerini kazandıran kısım:
| Font, size, leading, tracking | bir kaydırıcı olarak değil, sayı olarak |
| Alignment | yatay, ve kutu içinde vertical: top, middle, bottom |
| Weight ve case | "as typed" dahil |
| Paragraph spacing, listeler | madde işaretli ya da numaralı |
| Resize mode | Fixed size, Auto width, Auto height: kutu metni izler mi, yoksa metin kutuya mı sarılır |
| Text threading | taşmanın devam etmesi için bir metin kutusunu bir sonrakine bağlayın |
| Text styles | adlandırılmış, yeniden kullanılabilir |
Prototype ve Code#
Prototype sekmesi ekranları tıklanabilir bir akışa bağlar. Code sekmesi tasarımı kod olarak gösterir.
Değişkenler ve stiller#
Bir belgeyi bir sayfa setinden çok bir sisteme dönüştüren iki panel:
- Variables: belge genelinde kullanılan adlandırılmış değerler (bir renk, bir sayı, bir dize); bir değer ayarlanan her yerde bir variable picker ile birlikte. Değişkeni değiştirin, her kullanımı izler.
- Styles: adlandırılmış metin ve nesne stilleri.
- Fills: gradyanlar ve görüntüler dahil dolgu editörü.
Components ile birlikte, bunlar bir tasarımı token güdümlü yapan şeylerdir: Vectra'nın DA çalışma alanı tasarım token'ları dışa aktarabilir, ve Composer bunların kullanıldığı yerdir.
Prototipleme#
Buradaki bir prototip, zaten çizdiğiniz çerçeveler üzerine kurulu bir graftır. Her etkileşim dört şeydir: bir tetikleyici (tıklama ya da üzerine gelme), bir hedef çerçeve, bir geçiş ve bir süre. Bir çerçevenin bağlantı tutamacından yönlendirmesi gereken çerçeveye sürükleyin.
Prototype Mode, tuvali akış görünümüne dönüştürür; Preview Player, bir yeniden başlatmayla birlikte, onu okuyucunun göreceği gibi çalıştırır. Ayrı bir prototipleme belgesi yoktur, çerçeveler ekranların ta kendisidir.
Dev Mode, tasarımı koda devretmek#
Inspect sekmesi, bir tasarım aracının diğer yarısıdır: seçimi okur ve onun kodunu, üç platform sekmesinde üretir.
| Sekme | Çıktı |
|---|---|
| CSS | web |
| iOS | SwiftUI |
| Android | Jetpack Compose |
Üretilen kodun yanında, bir geliştiricinin istediği gerçek sayıları bildirir: size, radius, rotation, opacity, fill, stroke, effects, font ve font size, ve parent'a ve siblings'e ölçülen aralık: bir düzene karar veren iki mesafe. Kod panoya kopyalanır ya da indirilir.
Dışa aktarma#
Composer'da dışa aktarma tek bir seçim değil, bir ayar listesidir: birkaç tane ekleyin, hangilerinin çalıştırılacağını seçin, ve seçili her ayar tek bir geçişte kendi dosyasını üretir. Her ayar şunları taşır:
| Format ve quality | ayar başına, bu yüzden bir PNG ve bir JPG birlikte çıkabilir |
| Scale ve DPI | @2x ve baskı çözünürlüğü |
| CMYK (print) | baskıya gidecek sürüm için |
| Naming | bir önek ve bir sonek, project- ve @2x |
| Background | formatın izin verdiği yerde transparent dahil |
Panelin sizi keşfetmeye bırakmak yerine belirttiği iki ayrıntı:
- Yalnızca PNG ve SVG saydamlık taşır. Bir JPG'de saydam bir arka plan seçmek, etkisi olmayan bir ayardır, ve panel bunu söyler.
- Bir dışa aktarımın kaynağı ya bir node'dur ya da bir slice: Create Slice, mevcut seçimden bir dışa aktarım bölgesi yapar; bu, çerçeveyi kesmeden bir çerçevenin bir bölümünü dışa aktarmanızı sağlar.
Presets, tüm bir ayar setini kaydeder: bir projenin dışa aktarma yapılandırması yalnızca bir kez yazılır.
Okuduğu ve yazdığı dosyalar#
| Native format | .comp |
| Exports | herhangi bir ölçek ya da DPI'da, RGB ya da CMYK'da .png · .jpg · .svg |
| Generates | CSS · SwiftUI · Jetpack Compose |
Diğer stüdyolara iş göndermek#
Üretir: bir kompozisyon, ve görüntü olarak render edilmiş etkin çalışma yüzeyi. Kabul eder: pixel art, vektör sanat ve görüntüler.
Başkasıyla çalışmak#
Composer, bir belge olarak senkronize olur: bütünüyle durum, gecikmeli, artı gönderilen eylemler. Aynı sayfayı aynı anda düzenleyen iki kişiden biri kazanır; farklı sayfalar üzerinde çalışın.
Sınırlar ve sık karşılaşılan arızalar#
- Auto width ve auto height, sabit düzenlerle çakışır. Auto width'e ayarlı bir kutu sarılmaz; metin çerçeveden taşıyorsa, genellikle nedeni budur.
- Text threading otomatik değildir. Bir kutu, siz onu zincirlemeden Not linked der.
- Bileşenler, bir örnekten değil, tanımdan yayılır. Bir örneği düzenlemek diğerlerini güncellemez.