コンポーネントは再利用可能なデザイン要素です。同じ要素を何度も作り直す手間を省き、デザイン全体の変更を簡単に管理できます。
コンポーネントには次の2つの種類があります。
- メインコンポーネントはデザイン要素のプロパティを定義します
- コンポーネントのコピーであるインスタンスをデザインに追加できます。
コンポーネントの作成について
任意のレイヤーのコレクションからメインコンポーネントを作成できます。これはアイコンやボタンのような単純な要素や、カードやメニューのような全体のレイアウトであってもかまいません。
メインコンポーネントを作成するには、使用したいレイヤーを選択して右サイドバーでコンポーネントを作成をクリックします。メインコンポーネントは、キャンバス上の紫色の境界ボックスと左サイドバーのレイヤーセクションにある四つのダイヤモンドアイコンで識別できます。
インスタンスの追加について
メインコンポーネントを作成したら、それのインスタンスをデザインに追加できます。インスタンスを追加するには、キャンバス上でメインコンポーネントを複製するか、左サイドバーのアセットタブからメインコンポーネントを選択してキャンバスにドラッグします。インスタンスは、その紫色の境界ボックスと外枠のダイヤモンドアイコンで識別できます。
インスタンスはメインコンポーネントに接続されています。これは、メインコンポーネントに加えた変更が同じファイル内のすべてのインスタンスに自動的に反映されることを意味しており、時間を節約できるとともに、デザインの一貫性を保つことができます。
インスタンスをメインコンポーネントと同じに見せたくない場合があるかもしれません。たとえば、ボタンは異なるアクションに対して異なるラベルが必要です。メインコンポーネントのラベルを変更すると、すべてのインスタンスがその新しいラベルを引き継ぎます。
インスタンスの一部のプロパティ(テキスト、塗り、線、サイズなど)は、メインコンポーネントとの接続を維持したまま変更することができます。これにより、インスタンスを新しいコンテキストに合わせてカスタマイズしたり、異なるデザインバリエーションを試したりすることができます。
インスタンスでデフォルトのプロパティを使用したい場合は、いつでも変更をリセットできます。元のデザインよりも好ましいものが見つかった場合、メインコンポーネントやファイル内の他のインスタンスに変更をプッシュすることもできます。
注意点として、インスタンスでは変更できない項目もあります。これはメインコンポーネントの構造に紐づいているためです。たとえば、インスタンス内でレイヤーの追加・削除や並べ替えを行うことはできません。また、レイヤーに適用された制約を修正することもできません。
インスタンスのデタッチについて
より広範な変更を行う必要がある場合は、インスタンスをデタッチし、そのメインコンポーネントとの接続を切断できます。これは、メインコンポーネントからの更新を受け取らなくなることを意味します。インスタンスを切り離すことは便利ですが、一度切り離されたインスタンスは将来メインコンポーネントに再接続することができないことを覚えておいてください。インスタンスを誤って切り離した場合は、すぐにキーボードショートカットを使用して元に戻すことができます:
- Mac: ⌘ Command Z
- Windows: ⌃ Control Z