【Figma解説シリーズ #04】コンポーネント機能の使い方

はじめに

先日公開した「【Figma解説シリーズ第3弾】デザインファイル内での基本操作について」では、ファイル内に格納されているツールの使い方について解説しました。今回はFigma解説シリーズ第4弾として、「コンポーネント機能」にフォーカスします！Figmaのコンポーネントは、作業効率が爆上がりする強力な機能です。デザインシステムの構築やUI設計において欠かせないこの機能を、基礎から丁寧に解説していきます。

▶︎前回記事

コンポーネント機能を学ぶ前に：リージョンツールの違いについて

フレーム

キャンバス上のアートボードとしての役割もありますが、フレームに内包されたオブジェクトに対し、”レイアウト情報を持たせることができる”のがフレームの最大の特徴です。普通にグループにすると単純な親子関係になりますが、フレームにすることでレスポンシブなレイアウト制御が可能になります。また、”オートレイアウト機能“でより細かなレイアウトの指定ができます。

グループ

レイヤーの整理整頓、プロパティの一括適用ができます。複数のオブジェクトを選択してcmd + G（Mac）またはCtrl + G（Windows）でグループ化できます。主に視覚的な整理や、まとめて移動・操作したい時に使用します。

セクション

フレームをまとめフレームをまとめ、名前をつけ共有できるようなものです。デザインファイル全体を整理する際に便利で、複数のフレームやアートボードをカテゴリごとに区分けできます。、名前をつけ共有できるようなものです。

コンポーネント機能とは？

コンポーネント機能は、繰り返し使用するデザインパーツを1つのマスターとして管理し、複製して使い回せる機能です。ボタン、アイコン、カードなど、デザインシステム内で統一したいパーツをコンポーネント化することで、一貫性のあるデザインを効率的に作成できます。

コンポーネントの最大のメリット

一括更新が可能：メインコンポーネントを編集すれば、すべてのインスタンスに変更が反映される。
デザインの一貫性を保てる：同じパーツを使い回すことで、デザインの統一感が生まれる。
作業効率の向上：一度作成すれば何度でも再利用でき、修正も一箇所で完結。
チーム共有が容易：チームライブラリとして公開すれば、メンバー全員が同じコンポーネントを使用できる。

コンポーネントについて

メインコンポーネント(親)

メインコンポーネントとは親コンポーネントとも呼ばれ、元となるコンポーネントのことを言います。作成したパーツをコンポーネントにする際に、最初に作成されるのがこのメインコンポーネントです。

メインコンポーネントの作成方法：
①コンポーネント化したいオブジェクトを選択
②上部ツールバーの菱形アイコンをクリック、またはOption + Cmd + K（Mac）/Alt + Ctrl + K（Windows）
③紫色の菱形アイコンがレイヤーパネルに表示されたら作成完了

メインコンポーネントに加えた変更は、すべてのインスタンス(子)に自動的に反映されます。

インスタンス(子)

インスタンスは、メインコンポーネントから複製された「子」のコンポーネントです。メインコンポーネント(親)を配置・複製すると自動的にインスタンスとして生成されます。

インスタンスの作成方法：
①メインコンポーネント(親)を選択
②Option（Mac）/Alt（Windows）を押しながらドラッグ、またはCmd + D/Ctrl + Dで複製
③アセットパネルからドラッグ&ドロップでも配置可能

インスタンス(子)は基本的にメインコンポーネント(親)の構造を引き継ぎますが、テキストや色などの一部プロパティは個別に変更できます。これを「インスタンスオーバーライド」と呼びます。

オーバーライドとバリアント

オーバーライドは、インスタンスごとに異なる内容を設定する機能です。例えば、ボタンのコンポーネントで「送信」「キャンセル」など、テキストだけを変更したい場合に使用します。
さらに進んだ使い方として、バリアント機能というものがあります。これは1つのコンポーネントセット内で、複数の状態（デフォルト、ホバー、押下など）やサイズ（大・中・小）を管理できる機能です。バリアントを使えば、関連するコンポーネントをまとめて整理でき、プロパティパネルからワンクリックで切り替えられます。
詳しい解説は次回の記事にて解説させていただきます。

よくある質問

Q. コンポーネントにしたオブジェクトを自由に動かしたい！

A. コンポーネントを触る際、元々のオブジェクトに戻したい！と思うタイミングがあります。自由に扱いやすくするためにはコンポーネント登録されているものだと制約等がかかっているため難しいですよね。インスタンスを選択した上で、右クリック→「インスタンスの切り離し」でオブジェクトに戻すことができます。インスタンスを外すことでオブジェクトに戻すことができます。
ただし、切り離すとメインコンポーネントとの紐付けが完全に解除されるため、以降の一括更新は反映されなくなります。一時的な編集であれば、オーバーライドの活用をお勧めします。

Q.メインコンポーネントに反映させる方法はありますか？

A. 通常メインコンポーネントを作成し、メインコンポーネントのみを編集すれば、すべてのインスタンスに変更が自動反映されます。逆に、インスタンスで加えたオーバーライドをメインコンポーネントに反映させたい場合は、編集パネル→「変更をメインコンポーネントにプッシュ」を選択しメインコンポーネントを変更するか、既存のメインコンポーネントのプロパティを手動で調整する必要があります。

Q.メインコンポーネントとインスタンスの見分け方を知りたい！

A.様々あるとは思いますが、レイヤー内のアイコンの形で見分けるのが一般的です。

メインコンポーネント：紫色の菱形（◆）アイコン
インスタンス：紫色の中抜き菱形（◇）アイコン

また、インスタンスを選択すると、右パネルの上部に「メインコンポーネントに移動」ボタンが表示されます。
これをクリックすれば、元となるメインコンポーネントの場所へジャンプできます。

まとめ

コンポーネント機能は、Figmaを使いこなす上で最も重要な機能の一つです。
最初は慣れないかもしれませんが、メインコンポーネントとインスタンスの関係性を理解し、オーバーライドやバリアントを使いこなせるようになれば、デザイン作業の効率は飛躍的に向上します。
小さなアイコンやボタンから始めて、徐々に複雑なコンポーネントに挑戦してみてください。チームでのデザインシステム構築にも不可欠なので、ぜひマスターしましょう！

次回のFigma解説シリーズ第5弾ではパーツ管理に役立つ「バリアントの使い方について」詳しく解説していきますので、お楽しみに！

thumb_up いいね 24

いいねありがとうございます！