コンポーネント機能を使う

Theme テーマ

「コンポーネント」とはパーツのまとまりのことを呼び、Figmaのコンポーネント機能はパーツのまとまりを保存して使い回すことができ、効率的にデザインを進めることができます。

コンポーネントとは

Figmaで「コンポーネント」と呼ぶ場合は、ひとまとまりのパーツを登録して再利用するための機能のことを指します。「スタイル」は色やフォントなどの「状態」を残しておき、使い回すものでしたが、コンポーネントはパーツのまとまりという「実態」を残せる機能です。

XXページ、Lesson2-02参照。

コンポーネントの使い方として、デザイン内に複数登場するパーツ、たとえばボタンやヘッダー、フッターなどをコンポーネントとして登録するとよいでしょう。コンポーネントは一人で作業する際にも有用ですが、複数人でデザインをする際に特に効果を発揮する機能です。

練習１：コンポーネントを作成する

「コンポーネント練習１」セクションに移動します。「お手本」の場所には、コンポーネント登録済みの「button/pink」という名前のボタンがあります。「練習スペース」には黄色いボタンがあるので、これをコンポーネントとして登録してみましょう図1。

@div:figure

黄色いボタンをコンポーネントとして登録 @divend

「練習スペース」にある「Frame 1」のフレームを選択し、⌘ [Ctrl] + option [Alt] + K のショートカットキーでコンポーネントを作成します。また、フレーム名は「button/yellow」に変更しておきます。

フレーム名の変更は、キャンバス内のフレーム名が表示されている箇所をダブルクリックするか、レイヤータブのフレーム名をダブルクリックすることで変更できます。

コンポーネントの運用方法

登録したコンポーネントを運用する流れを確認しましょう。

コンポーネントをコピー・アンド・ペーストすると、「インスタンス」になります。コンポーネントはおおもとの部分で、実際にはインスタンスを複製して使い回していくことになります。

コンポーネントを変更すると、インスタンスにも変更が反映されます。

これは例えば、デザインの制作中に用意していたボタンの色を変更したい場合、デザインデータの中に複数あるボタンの色を順次変更していくことは手間がかかりますが、そのようなときにコンポーネントとして用意したボタンが有効となります。コンポーネント側の色を変更することで、インスタンスのボタンも連動して色が変更されることになります。

コンポーネントとインスタンスは、次のようなFigmaの表示上の違いがあります。