Figma基礎　コンポーネントとインスタンス

2024年11月20日2024年11月24日

URLをコピーしました！

Figmaのコンポーネントは、Figmaで使われる再利用可能なデザイン要素です。デザインにおいて、同じパーツを繰り返し使用する場合に便利で、一括更新や統一感のあるデザインを実現するための機能です。

コンポーネントの特徴は、元となる「親コンポーネント」があり、これがデザインの基となるオリジナル要素になります。親を修正すると、その変更がすべてのインスタンス（複製）に自動反映されます。ボタン、ヘッダー、フッター、アイコンなどをコンポーネント化することで、複数ページやプロジェクト全体で再利用可能となり作業効率があがります。

共通パーツのコンポーネント化

Figma基礎スマートフォン対応のワイヤーフレームの作成　で作成したワイヤーフレームは、トップページのみでしたので、このあとプロトタイプを作成するためには、サブページの作成が必要となります。Webサイトの場合、ヘッダー・フッターは、一般的に共通です。トップページのヘッダーは、サブページのヘッダーでもあります。Figmaでは、こういった共通パーツは、コンポーネント化して使います。今回は同様にフッターもコンポーネント化します。

ヘッダー部分を選択

ロゴやナビゲーションメニューを含むヘッダー全体を選択。

コンポーネントに変換

ヘッダーを右クリック → コンポーネントを作成「Create Component（コンポーネントを作成）」を選択。
コンポーネントが作成され、紫色の枠で囲まれます。

もしくは、プロパティパネルの上段にある菱形が４つ集まった「コンポーネントを作成」アイコンをクリックします。

同様にフッターもコンポーネント化しておきましょう。

次のページに共通パーツを挿入

通常は、トップページ全てをコピーし、次のサブページを作成しますが、今回は、インスタンスの動きを確認するために、新しいフレームを作成し、ヘッダーのインスタンスを配置していきます。

新しいページのデザインを開始。
アセット（Assets）パネルから挿入
左側の「Assets」パネルを開き、作成したコンポーネントをドラッグ＆ドロップでキャンバスに配置。
これにより、インスタンス（複製）が挿入されます。

レイヤーパネルを確認すると、ページ上部の「header」はコンポーネントとして作成されているため、菱形が4つ並んだアイコンで表示されています。一方、サブページに配置されている「header」は、そのコンポーネントを基にしたインスタンスなので、菱形1つのアイコンとして表示されます。