Figmaでコンポーネントの機能を利用すると、マスターのパーツを作成でき、マスターの変更を各要素に反映できます。
この記事では、Figmaでコンポーネントの作成手順を紹介します。
フレームを作成し、フレーム内に描画して下図を作成します。今回はメニューを例にします。
フレームを選択した状態で右クリックします。ポップアップメニューの[コンポーネントを作成]の項目をクリックします。
選択したフレームがコンポーネント化されます。コンポーネントになると左側のレイヤーパネルのフレームの項目が白色から紫色に変化します。
別のフレームを作成します。
先ほど作成したコンポーネントをコピーしペーストしてフレーム内に配置します。下図の状態にしました。
同じフレームを複数作成しました、どのフレームにも左上にメニューのコンポーネントが配置されています。
コンポーネントのフレームを修正します。[更新履歴]のテキストを[アップデート]に変更します。
コンポーネントを変更すると、他のフレームに配置したメニューの項目にも変更が反映され、テキストが「アップデート」に変化しています。
コンポーネントの要素はレイヤーパネルで、4つのひし形のアイコンで表示されます。
コンポーネントをコピーした要素(インスタンス要素)はレイヤーパネルで菱型のアイコンで表示されます。
コンポーネントを複製して配置したインスタンスを修正した場合の動作を確認します。
コンポーネントをコピーして配置したインスタンス要素のテキストを変更します。2番目のテキストの[アップデート]の文字列を変更します。
[変更履歴]に変更しました。
編集を確定した状態が下図です。インスタンスの要素のテキストは[変更履歴]になりましたが、コンポーネントは変更が反映されていません。
他のフレームに配置した別のインスタンスの要素も変化していません。
インスタンス要素を修正した場合は、その項目のみが変更される動作が確認できました。
