Composer
レイアウトとデザイン：ページ、フレーム、コンポーネント、そして本物のタイポグラフィ。プロトタイプビューとコードビューを備える。
一言で言うと#
ものを配置するための無限キャンバスです。複数ページのドキュメント、画面デザイン、レイアウトを、「フォントとサイズを選ぶ」を超えたタイポグラフィ制御とともに扱います。
レイアウト#
| メニューバー | File · Edit · View · Object · Vector · Text · Arrange · Plugins |
| ツールバー | undo/redo、select、frame、shapes、line、arrow、pen、type、hand。続いてMargins、Guides、Baseline、アートボードの数 |
| 左 | Pages、続いてLayers · Assets · Components · Frames、そしてレイヤーカテゴリー一覧 |
| 中央 | キャンバス。ズームとページインジケーター付き |
| 右 | Design · Prototype · Code |
| ステータスバー | アートボード、オブジェクト、選択、アクティブなツール、ズーム |
ここですること#
ページとフレーム#
ドキュメントはページを持ち、ページはフレーム（アートボード）を持ちます。これが、一度に1つのアートボードで描くVectraとの違いです。Composerは複数の画面や複数の見開きのためのものです。
レイヤー、アセット、コンポーネント#
同じドキュメントの上に4つのタブがあります。Componentsは再利用可能な部品で、一度定義して何度も配置し、定義を編集すればすべてのインスタンスが追従します。Assetsはドキュメントが取り込んでいるものです。レイヤー一覧は種類（Text、Images、Graphics）でグループ化されており、フラットな一覧より、混み合ったページでも速く見渡せます。
精密にレイアウトする#
X, Y, W, Hとコーナー半径、それにalign and distribute。Margins、Guides、Baselineグリッドはツールバーの切り替えです。ベースライングリッドは、見開きをまたいだ複数列のテキストを揃えるためのものです。
タイポグラフィ#
Composerの存在意義となる部分です。
| Font, size, leading, tracking | スライダーではなく数値として |
| Alignment | 水平方向、そしてボックス内での垂直方向：top、middle、bottom |
| Weightとcase | 「as typed」を含む |
| Paragraph spacing、リスト | 箇条書きまたは番号付き |
| Resize mode | Fixed size、Auto width、Auto height：ボックスがテキストに追従するか、テキストがボックスに折り返すか |
| Text threading | あるテキストボックスを次のボックスにリンクし、あふれた分を流し込む |
| Text styles | 名前付きで再利用可能 |
プロトタイプとコード#
Prototypeタブは画面同士をつないで、クリックできるフローにします。Codeタブはデザインをコードとして表示します。
変数とスタイル#
ドキュメントを、ただのページの集まりではなくシステムに変える2つのパネルです。
- Variables：名前付きの値（色、数値、文字列）で、値を設定するあらゆる場所にあるvariable pickerを通じてドキュメント全体で使われます。変数を変えれば、すべての使用箇所が追従します。
- Styles：名前付きのテキストスタイルとオブジェクトスタイル。
- Fills：グラデーションや画像を含むフィルエディタ。
Componentsと合わせて、これらがデザインをトークン駆動にします。VectraのDAワークスペースはデザイントークンを書き出すことができ、Composerはそれを使う場所です。
プロトタイピング#
ここでのプロトタイプは、すでに描いたフレームの上に作られるグラフです。各インタラクションは4つの要素からなります。トリガー（クリックまたはホバー）、ターゲットフレーム、トランジション、デュレーションです。あるフレームの接続ハンドルから、遷移先のフレームへドラッグします。
Prototype Modeはキャンバスをフロービューに変え、Preview Playerはリスタート付きで読者が見る通りに実行します。専用のプロトタイピング用ドキュメントは存在せず、フレームそのものが画面になります。
Dev Mode、デザインをコードへ渡す#
Inspectタブは、デザインツールのもう一方の半分です。選択内容を読み取り、3つのプラットフォームタブごとにコードを生成します。
| タブ | 出力 |
|---|---|
| CSS | Web向け |
| iOS | SwiftUI |
| Android | Jetpack Compose |
生成されたコードと並んで、開発者が求める実際の数値、サイズ、半径、回転、不透明度、フィル、ストローク、エフェクト、フォントとフォントサイズ、そして親要素と兄弟要素の両方に対して測られた間隔、つまりレイアウトを決める2つの距離が報告されます。コードはクリップボードにコピーするか、ダウンロードできます。
書き出す#
Composerでのエクスポートは単一の選択ではなく設定のリストです。複数追加し、実行するものを選べば、選ばれた設定ごとに1回のパスでそれぞれのファイルが生成されます。各設定は次を持ちます。
| Formatとquality | 設定ごとに個別なので、PNGとJPGを一緒に出力できる |
| ScaleとDPI | @2xや印刷解像度 |
| CMYK (print) | 印刷用バージョンのために |
| Naming | 接頭辞と接尾辞、project-や@2x |
| Background | フォーマットが許す場合はtransparentを含む |
パネルが発見させるのではなく明言している、2つの詳細です。
- 透明度を保持するのはPNGとSVGだけです。 JPGで背景を透明に設定するのは効果のない設定であり、パネルもそう表示します。
- エクスポートのソースはnodeかsliceのどちらかです。Create Sliceは現在の選択からエクスポート範囲を作り、フレームを切り分けずにその一部だけをエクスポートする方法です。
Presetsは設定一式をまるごと保存するので、プロジェクトのエクスポート設定は一度だけ書けば済みます。
読み書きするファイル#
| ネイティブ形式 | .comp |
| エクスポート | .png · .jpg · .svg、任意のスケールまたはDPI、RGBまたはCMYKで |
| 生成 | CSS · SwiftUI · Jetpack Compose |
他のスタジオへ作業を送る#
生成するもの：コンポジション、そしてアクティブなアートボードを画像としてレンダリングしたもの。受け取れるもの：ピクセルアート、ベクターアート、画像。
誰かと一緒に作業する#
Composerはドキュメントとして同期します。状態全体をデバウンスしつつ、実行されたアクションも同期します。2人が同じページを同じ瞬間に編集すると、どちらか一方が勝ちます。別のページで作業してください。
制限とよくあるつまずき#
- Auto widthとAuto heightは固定レイアウトとぶつかります。 Auto widthに設定されたボックスは折り返しません。テキストがフレームからはみ出しているなら、たいていこれが原因です。
- Text threadingは自動ではありません。 リンクするまでボックスはNot linkedと表示されます。
- Componentsは定義から伝播し、インスタンスからは伝播しません。 インスタンスを編集しても、他のインスタンスは更新されません。