レイヤー入門: レイヤーの結合
ワークフローのレベルを引き上げる準備ができたら、時間を節約してくれる機能をチェックして、新しいデザインを今すぐアップグレードしましょう。
オートレイアウト
基本的な要素がすべて揃い、レイアウトを試してみたいと思ったら、プロパティ「オートレイアウト」をフレームに追加し、デザインのサイズ変更、整列、間隔を自動化してみましょう。
新しいレイヤーを追加したり、長いテキスト文字列に対応したり、さまざまなデバイスや画面サイズに対応するデザインを作成したりする必要がある場合に最適な機能です。
この旅行アプリのデザインでは、新しいローマツアーの旅行先カードを追加すると、他のカードが自動的に移動し、フレームに含まれるようにリフローされます。
コンポーネント
コンポーネントは、デザイン全体で再利用できる要素です。同じ要素を何度も作り直す手間を省き、1つまたはすべてのデザインにまたがるデザインの変更を簡単に管理できます。
任意のレイヤーまたはオブジェクトのコレクションからコンポーネントを作成できます。アイコンやボタンのような単一のオブジェクトでも、カードやメニューのようなレイアウト全体でもかまいません。レイヤーを選択し、右サイドバーにある[コンポーネントを作成]❖ をクリックします。
コンポーネントには次の2つの種類があります。
- コンポーネントのプロパティを定義するメインコンポーネント。
旅行アプリでは旅行先カードのコンポーネントを作成しました。これには、各旅行先のカードを作成する上で必要なすべてのレイヤーが含まれています。 - コンポーネントのコピーであり、デザインに追加できるインスタンス。
カードコンポーネントには4つの独立したインスタンスがあります。各インスタンスには、旅行先に固有の写真と関連するテキストがあります。
旅行先カードのメインコンポーネントの都市名の色を変更すると、作成した4つのインスタンスも更新されます。