【2026年最新版】Figmaのコンポーネント作成・活用完全ガイド｜デザイン効率化

公開日：2026/03/11　更新日：2026/03/11　

※本ページにはプロモーション(広告)が含まれています

Figmaのコンポーネントを使いこなせていますか？

「同じデザイン要素を何度も作り直している」「ボタンの色を変更するたびに全ページを修正しなければならない」——Figmaを使い始めたばかりの方がよく直面するこのような問題は、コンポーネント機能を使えばほとんど解決できます。

コンポーネントはFigmaの最も強力な機能の一つです。一度作成したデザイン要素を「部品（コンポーネント）」として登録し、プロジェクト全体で再利用できます。本記事では、コンポーネントの基本から応用まで、実務で使える知識を丁寧に解説します。

この記事でわかること

コンポーネントとインスタンスの違いと仕組み
コンポーネントの作成・編集・管理方法
バリアント（Variants）を使った複数状態の管理
Auto Layoutとの組み合わせ方
コンポーネントプロパティの活用法
チームライブラリで共有する方法
コンポーネント設計のベストプラクティス

コンポーネントとは？基礎から理解しよう

コンポーネントとインスタンスの関係

Figmaのコンポーネント機能は「マスター（元になるデザイン）」と「インスタンス（複製品）」の親子関係で成り立っています。

コンポーネント（マスター）：ひし形アイコンで表示される「型」。ここを編集すると全インスタンスに変更が反映される
インスタンス：コンポーネントをコピーして配置した「複製品」。個別に一部を上書きすることも可能

例えば、ボタンのコンポーネントを作っておけば、画面内に100個のボタンがあっても、マスターのテキストや色を1か所変えるだけで全部のボタンが一括更新されます。

コンポーネントを使うメリット

メリット	詳細
一括更新	マスターを変更するだけで全インスタンスに反映
デザインの一貫性	同じコンポーネントを使うことでUIが統一される
作業効率化	再利用で制作スピードが大幅アップ
チーム共有	ライブラリ化してチーム全員が同じ部品を使える
修正コスト削減	仕様変更時の修正箇所が最小限になる

コンポーネントの作成方法

ステップ1：デザイン要素を用意する

まずコンポーネントにしたいデザインを作成します。ボタンを例に説明します。

長方形ツール（R）で横160px・縦48pxの角丸矩形を描く
背景色を設定（例：#58ce91）
テキストツール（T）で「ボタン」と入力し、中央に配置
矩形とテキストを両方選択する

ステップ2：コンポーネントに変換する

選択した要素をコンポーネントに変換する方法は3つあります。

ショートカット：Ctrl+Alt+K（Windows）/ Command+Option+K（Mac）
メニュー：右クリック → 「コンポーネントを作成」
ツールバー：画面上部の「コンポーネントを作成」ボタン（4つのひし形アイコン）

変換に成功すると、レイヤーパネルのアイコンがひし形に変わります。これがコンポーネント（マスター）です。

ステップ3：コンポーネントに名前を付ける

コンポーネントに適切な名前を付けましょう。スラッシュ（/）を使った命名規則を使うと、Figmaが自動的にグループ分けしてくれます。

例：「Button/Primary/Default」「Button/Secondary/Hover」
スラッシュ前がグループ名、後が個別の状態名になります

ステップ4：インスタンスを配置する

アセットパネル（Ctrl+Alt+O / Command+Option+O）を開く
作成したコンポーネントを検索する
キャンバスにドラッグして配置する

あるいは、コンポーネントを選択した状態でAlt（Windows）/ Option（Mac）を押しながらドラッグすると、インスタンスを直接複製できます。

バリアント（Variants）で複数状態を管理する

バリアントとは

バリアントは、同じコンポーネントの複数の状態（デフォルト・ホバー・押下・無効化など）をひとまとまりで管理する機能です。バリアントを使うと、インスタンスのプロパティを変えるだけで状態を切り替えられるようになります。

バリアントの作成手順

既存のコンポーネントを選択する
右サイドバーの「バリアントを追加」をクリック
追加されたバリアントを選択して外見を編集（例：ホバー状態の色変更）
各バリアントのプロパティ名と値を設定する（例：State = Default / Hover / Pressed）

バリアントの実用例：ボタンコンポーネント

プロパティ	値	外見の変化
Type = Primary	State = Default	緑背景・白文字
Type = Primary	State = Hover	少し暗い緑背景
Type = Primary	State = Disabled	グレー背景・薄いテキスト
Type = Secondary	State = Default	白背景・緑ボーダー・緑テキスト

コンポーネントプロパティを活用する

コンポーネントプロパティとは

コンポーネントプロパティを使うと、インスタンスごとにカスタマイズできる項目を明示的に定義できます。開発者がコードで言う「引数」のようなものです。2022年のアップデートで追加された機能です。

プロパティの種類

プロパティの種類	用途	例
Boolean（真偽値）	要素の表示・非表示	アイコンの有無、バッジの表示
Text（テキスト）	テキスト内容の変更	ボタンのラベル、見出し
Instance Swap（インスタンス交換）	コンポーネントの差し替え	アイコンの種類変更
Variant（バリアント）	状態の切り替え	Default/Hover/Pressed

Boolean プロパティの設定手順

コンポーネントを選択した状態で、右サイドバーの「+」（プロパティを追加）をクリック
「Boolean」を選択
プロパティ名を入力（例：「Has Icon」）
デフォルト値（trueまたはfalse）を設定
コンポーネント内のアイコンレイヤーに、このプロパティをバインドする

設定後はインスタンスのサイドバーにチェックボックスが表示され、クリックするだけでアイコンの表示・非表示を切り替えられます。

Auto Layoutとコンポーネントの組み合わせ

Auto Layoutとは

Auto Layoutは、フレーム内の要素を自動で整列・間隔調整するFigmaの機能です。コンポーネントと組み合わせると、テキスト量が変わっても自動的にサイズが調整されるレスポンシブなコンポーネントが作れます。

Auto Layout付きボタンの作成

ボタンのテキストと（必要に応じて）アイコンを選択する
Shift+A でAuto Layoutを追加する
右サイドバーで水平方向・垂直方向のパディングを設定（例：水平16px・垂直12px）
要素間のギャップを設定（例：8px）
このフレームをコンポーネントに変換する

こうすると、インスタンスのテキストを長くしても短くしても、パディングを保ったままボタンが自動リサイズされます。

チームライブラリでコンポーネントを共有する

チームライブラリとは

Figmaの有料プランでは、作成したコンポーネントを「チームライブラリ」として公開し、チームの全員が同じコンポーネントを使えるようになります。これがいわゆる「デザインシステム」の基盤となります。

ライブラリの公開手順

コンポーネントをまとめたファイルを開く
メニュー（ハンバーガーアイコン）→「ライブラリ」を選択
「チームライブラリとして公開」をクリック
公開後、チームメンバーが「アセット」パネルからライブラリを有効化できる

ライブラリを利用する手順

使いたいファイルを開く
アセットパネル（Ctrl+Alt+O）を開く
「ライブラリ」タブで利用したいライブラリをONにする
ライブラリのコンポーネントが検索・使用できるようになる

コンポーネント設計のベストプラクティス

アトミックデザインを参考にする

「アトミックデザイン」は、UIを原子（Atoms）→分子（Molecules）→有機体（Organisms）→テンプレート→ページという階層で設計する考え方です。Figmaのコンポーネント設計に応用できます。

Atoms（原子）：ボタン、テキスト、アイコン、インプットフィールドなど最小単位
Molecules（分子）：検索バー（インプット＋ボタン）、カードなど複数Atomsの組み合わせ
Organisms（有機体）：ヘッダー、フッター、フォームなど複数Moleculesの組み合わせ

コンポーネント設計の7つのルール

命名規則を統一する：スラッシュ記法（Type/Variant/State）を徹底する
余分なレイヤーを作らない：不要なグループやフレームを整理してレイヤーをシンプルに保つ
Auto Layoutを積極的に使う：固定サイズより自動レイアウトで柔軟なコンポーネントを
カラースタイルを使う：色を直接指定せず、定義したカラースタイルを使う
テキストスタイルを使う：フォントサイズ・ウェイトもスタイルで統一する
プロパティで柔軟性を持たせる：バリアントとコンポーネントプロパティで差異を吸収する
ドキュメントを残す：コンポーネントの説明欄に使い方を記載する

よくある質問（FAQ）

Q1. コンポーネントを誤って削除してしまいました。インスタンスはどうなりますか？

コンポーネント（マスター）を削除すると、既存のインスタンスは「切り離されたインスタンス」となり、独立したフレームとして残ります。マスターとの同期は失われますが、見た目はそのまま保持されます。削除前にCtrl+Z（Undo）で取り消しが可能です。

Q2. インスタンスの一部だけ変更したのに、マスター更新後に上書きされてしまいます。防ぐ方法はありますか？

インスタンスで個別に変更したプロパティ（オーバーライド）は、通常マスター更新後も保持されます。ただし、変更したプロパティとマスターの変更が競合する場合は上書きされることがあります。インスタンスを右クリック→「オーバーライドをリセット」で元の状態に戻すことも可能です。

Q3. バリアントとコンポーネントプロパティはどう使い分けますか？

バリアントは「外見の大きな違い（状態・種類）」を表すのに向いています。一方、コンポーネントプロパティは「テキストの変更」「要素の表示切り替え」など細かいカスタマイズに適しています。2つを組み合わせることが最も効果的です。

Q4. 無料プランでもチームライブラリは使えますか？

無料プランでもチームライブラリ機能は使えますが、共有できるチームメンバー数に制限があります。複数人で本格的に共有するにはプロフェッショナルプラン以上が推奨されます。

Q5. コンポーネントを別のファイルに移動するにはどうすればいいですか？

コンポーネントをコピー（Ctrl+C）して別のファイルにペースト（Ctrl+V）することで移動できます。ただし、元のファイルのインスタンスはマスターとの接続が切れます。ライブラリ機能を使うほうが、ファイルをまたいだ管理には適しています。

まとめ

Figmaのコンポーネント機能は、デザイン作業を効率化し、チーム全体のUIの一貫性を保つための核心的な機能です。本記事の要点をまとめます。

コンポーネントとインスタンス：マスターを変えると全インスタンスに反映される親子関係
命名規則：スラッシュ記法でグループ管理（Button/Primary/Default）
バリアント：同じコンポーネントの複数状態をひとまとめに管理する
コンポーネントプロパティ：Boolean・Text・Instance Swapで柔軟なカスタマイズ
Auto Layout：コンテンツ量に応じて自動リサイズするレスポンシブコンポーネント
チームライブラリ：コンポーネントをチーム全体で共有してデザインシステムを構築

最初は小さなことからコンポーネント化を始め、徐々にデザインシステムを育てていくことをおすすめします。コンポーネントを使いこなすことで、修正・変更の工数が大幅に削減され、より創造的な作業に集中できるようになります。