Figmaのコンポーネントプロパティとは｜場所・作り方・使い分け

結論から書くと、コンポーネントプロパティは、メインコンポーネントを選んだときに右パネルの一番上に出る「プロパティ」の「＋」から作ります。

文字は「テキスト」、表示の有無は「ブール値」、部品の差し替えは「インスタンスの入れ替え」、状態は「バリアント」に分けます。

こう分けておくと、インスタンスの右パネルには変えてよい項目だけが並びます。

急ぐときは、次の「最短の手順」の5つの操作だけで作れます。

練習用のボタンで試すと、文字とアイコンをプロパティにしたことで、バリアントは状態の2個だけで済みました。

インスタンスで変えた文字やアイコンの切り替えは、親の色や既定の文字を直しても残りました。

• 撮影：2026年11月1日、Figmaデスクトップアプリ126.10.13（日本語表示）、Windows 11 Pro、無料のスタータープランのドラフト
• 実機で試したこと：4種類のプロパティの作成、優先されるインスタンスの設定、インスタンスでの値の変更
• あわせて試したこと：親を直したときの上書きの残り方、ネストされたインスタンスの公開
• 練習の素材：20×20の四角と丸のアイコン、その片方と文字「保存する」を並べたボタン（すべて自作）
• 有料プランで確かめたこと（2026年11月2日）：教育プランのアカウントで、ライブラリとしての公開、別のファイルでの利用、親の変更を「更新」で受け取る流れ
• 確かめていないこと：スロット、上書きのリセット、ブラウザー版とmacOSのFigma、Dev Modeでの見え方

最短の手順と早見表

ボタンにプロパティを付けるまでの流れは、次の5つです。

1. アイコンと文字を並べたフレームを選び、Ctrl+Alt+Kでコンポーネントにする
2. コンポーネントの中の文字レイヤーを選び、右パネルの「コンテンツ」の右のアイコンからテキストプロパティを作って適用する
3. 中のアイコンのインスタンスを選び、「外観」の右のアイコンからブール値のプロパティを作る
4. 同じアイコンを選んだまま、右パネル上部のアイコンからインスタンスの入れ替えのプロパティを作り、優先されるインスタンスを足す
5. コンポーネント全体を選び、「プロパティ」の「＋」→「バリアント」で状態を作る

迷ったら、変えたい内容から次の表で選んでください。

変えたいもの	まず使うプロパティ	だめなときの次の一手
ボタンの文字	テキスト	文字ごとにバリアントを作らず、テキストのままにする
アイコンのあり・なし	ブール値	見た目の大きさが変わるなら、オートレイアウトの幅を内包にする
アイコンの種類	インスタンスの入れ替え	候補が多すぎるなら、優先されるインスタンスで絞る
通常・無効などの状態	バリアント	色だけの違いならバリアブルも検討する
中に入れた別の部品の項目	ネストされたインスタンスの公開	メニューに出ないなら、中の部品にプロパティを作る

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

コンポーネントプロパティは、インスタンスの側で変えてよい部分を、作る側が先に決めておく仕組みです。

決めた項目はインスタンスを選んだときの右パネルにまとめて出るので、使う人はレイヤーを奥まで選ばずに文字やアイコンを変えられます。

公式ヘルプでは、作成と管理はすべてのプランで、デザインファイルの編集権限があれば使えると案内されています。

実際に、無料のスタータープランのドラフトで、4種類とも作って使えました。

種類（画面の表記）	インスタンスでの見え方	向いているもの
テキスト	文字を打てる欄	ボタンの文言、見出し
ブール値	オン・オフの切り替え	アイコンやバッジの表示・非表示
インスタンスの入れ替え	部品を選ぶ一覧	アイコンの種類
バリアント	値を選ぶ一覧	状態・サイズ・色の組み合わせ

バリアントそのものの作り方は、Figmaのバリアントの使い方で詳しく扱っています。

コンポーネントプロパティはどこにある

メインコンポーネントかコンポーネントセットを選ぶと、右パネルの名前の下に「プロパティ」という欄が出ます。

「＋」で開く一覧

その右端の「＋」を押すと「プロパティを作成」の一覧が開き、「バリアント」「テキスト」「ブール値」「インスタンスの入れ替え」「スロット」の5つが並びました。

中にインスタンスを入れたコンポーネントでは、下に「プロパティの公開元」として「ネストされたインスタンス」も出ました。

インスタンスや普通のフレームを選んでいるときは、この「プロパティ」の欄は出ません。

親から作るか、子のレイヤーから作るか

作り方は2通りあります。

• 親（コンポーネント全体）の「＋」から作る：プロパティはできるが、どのレイヤーに効かせるかを後から適用する
• 子（中の文字やアイコン）を選んで作る：作ったプロパティがそのレイヤーにすぐ適用される

親から作ったテキストプロパティは、どのレイヤーにも適用していない間、行の右に丸い「i」の印が出ていました。

バリアントだけは、親の「＋」からしか作れません。

テキストプロパティを作る

親から作ってレイヤーに適用する手順です。

1. コンポーネントを選び、「プロパティ」の「＋」→「テキスト」を押す
2. 「プロパティを作成」の窓で、名前（例：ラベル）と値（例：保存する）を入れて「プロパティを作成」を押す
3. コンポーネントの中の文字レイヤーを選ぶ
4. 右パネルの一番上の「コンテンツ」の欄の右にあるアイコンを押す
5. 一覧の「ボタンのプロパティ」から「ラベル」を選ぶ

適用すると「コンテンツ」の欄が紫色の「ラベル」に変わり、プロパティの行の「i」の印が消えました。

値に入れた文字が、インスタンスを置いたときの最初の文字になります。

ブール値で表示を切り替える

アイコンを出すか消すかを切り替えるプロパティを、子のレイヤーから作りました。

1. コンポーネントの中のアイコンを選ぶ
2. 右パネルの「外観」の見出しの右にある、目のアイコンの隣のアイコンを押す
3. 「利用できるバリアブルまたはプロパティはありません」と出たら、右上の「＋」を押す
4. 「プロパティまたはバリアブルの作成」で、作成が「Property」になっていることを見て、名前を入れる
5. 値はTrue（表示）のまま「プロパティを作成」を押す

名前の欄には最初から「アイコン四角を表示」のように、レイヤー名を使った名前が入っていました。

作ると「外観」の欄に紫色の「アイコンを表示」が出て、そのレイヤーに適用された状態です。

公式ヘルプによると、ブール値で切り替えられるのは今のところレイヤーの表示と非表示だけです。

インスタンスの入れ替えのプロパティを作る

アイコンを別のアイコンに差し替えられるようにします。

1. コンポーネントの中のアイコン（インスタンス）を選ぶ
2. 右パネルの一番上、インスタンス名の右に並ぶアイコンのうち、入れ替えのプロパティを作るアイコンを押す
3. 「プロパティを作成」の窓で、名前を入れる（最初は「インスタンス」）
4. 値には、今のアイコン（例：アイコン四角）が入っている
5. 「優先されるインスタンス」の右の「＋」を押し、候補にしたいアイコンにチェックを入れる
6. 「プロパティを作成」を押す

インスタンス名の右には3つのアイコンが並び、左端は「同じレイヤーを選ぶ」操作で、押すと「ページには選択できるマッチングレイヤーがありません」と出ました。

入れ替えのプロパティを作るアイコンは、その右隣でした。

優先されるインスタンスに入れたものは、インスタンスで一覧を開いたとき、最初から「優先」として並びます。

アイコンが多いライブラリで、使ってよいものだけを見せたいときに役立ちます。

インスタンスの入れ替えそのものの操作は、Figmaのインスタンス入れ替えの使い方を見てください。

バリアントのプロパティを足す

3つのプロパティを付けたボタンで、「プロパティ」の「＋」→「バリアント」を選びました。

ボタンはコンポーネントセット（紫の点線の枠）に変わります。

プロパティの一覧には「プロパティ1・デフォルト」が足され、前に作った3つはそのまま残りました。

1. 「プロパティ1」をダブルクリックして名前を「状態」に変える
2. 枠の下の「＋」を押してバリアントを1つ足す
3. 足したバリアントの値を「無効」にして、塗りを灰色にする

足したバリアントにも、3つのプロパティがそのまま付いています。

インスタンスでの見え方と、値を変えたときの動き

左の「アセット」の「このファイル内で作成」からボタンをカンバスに置くと、右パネルに「状態」「ラベル」「アイコンを表示」「アイコン」の4つが並びました。

それぞれ値を変えた結果です。

変えたもの	結果
ラベルを「送信する」に	ボタンの文字だけが変わった
アイコンを「アイコン丸」に	一覧の「優先」に2つだけが並び、選ぶと丸に変わった
アイコンを表示をオフに	アイコンが消え、ボタンは108×40から80×35に縮んだ。右パネルの「アイコン」の欄も消えた
状態を「無効」に	灰色のバリアントに変わり、文字「送信する」とアイコンのオフはそのまま残った

ボタンが縮んだのは、オートレイアウトの幅と高さを「内包」にしていたためです。

幅を固定にしているボタンでは、アイコンが消えた分だけ余白が空きます。

親を直したときに上書きは残るか

インスタンスで値を変えた後に、親のほうを2か所直しました。

親で直したこと	値を変えていないところ	インスタンスで変えたところ
デフォルトのバリアントの塗りを青から緑に	すべてのインスタンスが緑になった	文字・アイコン・表示の切り替えは残った
ラベルの値を「保存する」から「登録する」に	コンポーネントセットの2つのバリアントが「登録する」になった	「送信する」に変えたインスタンスは「送信する」のまま

ラベルの値は、プロパティの行にマウスを重ねると出る編集のアイコンを押し、「テキストプロパティの編集」の窓の「値」で直しました。

親を直しても変わらないインスタンスは、そのプロパティが上書きされています。

上書きを親の値に戻す操作は今回は試していないので、Figmaのオーバーライドとはを見てください。

ネストされたインスタンスのプロパティを外に出す

ボタンを中に入れたカードを作ると、カードのインスタンスを選んだだけでは、中のボタンの文字やアイコンは右パネルに出ません。

公式ヘルプが「ネストしたインスタンスの公開」と呼ぶ機能で、中のプロパティを外に出せます。

1. ボタンのインスタンスを選び、Shift+Aでオートレイアウトのフレームに入れて、Ctrl+Alt+Kでコンポーネントにする
2. そのコンポーネントの「プロパティ」の「＋」→「ネストされたインスタンス」を押す
3. 「プロパティの公開元」の窓で「ボタン」にチェックを入れる

チェックを入れると、プロパティの欄に「ネストされたインスタンス」と「ボタン」が出ました。

このカードのインスタンスを選ぶと、右パネルに「ボタン」の見出しがあり、その下で状態・ラベル・アイコンを表示・アイコンをそのまま変えられました。

公式ヘルプには、この項目は中にプロパティを持つインスタンスがあるときだけ出ると書かれています。

バリアントだけで作ると何個になるか

今回のボタンは、状態が2つ（デフォルト・無効）、アイコンが3通り（なし・四角・丸）でした。

作り方	必要なバリアントの数	計算
すべてバリアントで作る（文字は固定）	6個	状態2×アイコン3
文字も3種類（保存する・送信する・登録する）をバリアントで作る	18個	状態2×アイコン3×文字3
状態だけバリアント、残りはプロパティ	2個	状態2

プロパティにした文字は自由に打てるので、文言が増えてもバリアントは2個のままです。

状態が4つ、サイズが3つと増えるほど、この差は掛け算で開きます。

目安は、見た目の設計が変わるもの（状態・サイズ）をバリアントにすることです。

中身だけが変わるもの（文字・アイコン・表示の有無）をプロパティにすると、セットが増えすぎません。

無料プランでできたこと・できないこと

無料のスタータープランのドラフトでは、この記事の操作はすべてできました。

一方、アセットの欄の下には「同じコンポーネントを複数のファイルで利用」という案内が出ていました。

案内の中身は、プロフェッショナルプランにアップグレードするとチームに共有できる、というものです。

作ったコンポーネントを別のファイルで使うには、ライブラリとして公開する必要があります。

無料のドラフトでは案内が出るところまでで、公開の流れは次の節で有料プランを使って確かめました。

コンポーネント・スタイル・バリアブル・ライブラリの役割の違いは、Figmaの再利用機能の違いにまとめています。

有料プランでライブラリとして公開し、別のファイルで使う

2026年11月2日に、有料の教育プランのアカウントで練習用のボタンをライブラリとして公開し、別のファイルで使いました。

ボタンは、文字「保存する」をテキストプロパティ「ラベル」にした、1つだけのコンポーネントです。

ドラフトのままでは公開できない

公開は、左の「アセット」の右上にある本のアイコンから「ライブラリの管理」を開き、「このファイル」の「公開…」で始めます。

ドラフトのファイルで押すと、「フォルダに移動してライブラリアセットを公開する」という窓が出ました。

「フォルダに移動」でチームのプロジェクトに移すと、続けて「ライブラリを公開」の窓が開きます。

一覧ではコンポーネントの「ボタン」が「追加済み」になっていて、「公開」を押せば公開は終わりです。

手順をまとめると次のとおりです。

1. ライブラリにしたいファイルを、チームのフォルダ（プロジェクト）に入れる
2. 「アセット」の本のアイコンから「ライブラリの管理」を開く
3. 「このファイル」の「公開…」を押す
4. コンポーネントにチェックが入っていることを見て、「公開」を押す

別のファイルでプロパティを使う

別のファイルで「ライブラリの管理」の「チーム」を開くと、公開したファイルが並び、押すと「追加済み」に変わりました。

アセットの欄からボタンを置くと、右パネルの名前の下にライブラリのファイル名が出て、その下に「ラベル」の欄が並びました。

ラベルを「送信する」に変えると、変わるのはボタンの文字だけです。

プロパティの使い勝手は、同じファイルの中で使うときと変わりません。

親を直して「更新」で受け取る

ライブラリのファイルでボタンの塗りを青から緑に変えると、右パネルのプロパティの下に「変更を公開…」のボタンが出ました。

ただし、公開した直後の時点では、使う側のファイルのボタンはまだ青のままです。

使う側の左下に出た更新のアイコンを押すと、「ライブラリの管理」の「更新」に、変わったコンポーネントと「すべて更新」が並びました。

「すべて更新」を押すと、2つのボタンが緑になりました。

ラベルを「送信する」に変えていたボタンも変わったのは色だけで、文字は「送信する」のままです。

流れを短くまとめると、次の3つです。

• 親を直しても、公開するまで使う側には届かない
• 公開した後も、使う側で更新を受け取るまで見た目は変わらない
• 受け取ると色は親に合わせて変わり、プロパティで変えた文字は残る

無料のドラフトで出ていた「同じコンポーネントを複数のファイルで利用」の案内は、このアカウントのアセットの欄には出ませんでした。

更新が届かないときの調べ方は、Figmaのライブラリ更新が反映されない原因と対処法にまとめています。

公開を取り消すとき

確かめた後は、ライブラリの公開を取り消しました。

「ライブラリの管理」の「このファイル」でライブラリの行を押して開き、下の「公開を取り消す」を押すと、「ライブラリから削除しますか?」の確認が出ます。

「削除」を押すと「ライブラリの公開が取り消されました」と出て、使う側の「チーム」の一覧からも消えました。

公式ヘルプ（英語）によると、取り消しても使う側に置いたインスタンスは残り、更新が届かなくなります。

練習に使ったファイルは2つとも、取り消した後にごみ箱へ移しました。

うまくいかないとき

「プロパティ」の欄が見つからない

原因は、選んでいるのがインスタンスか普通のフレームであることが多いです。

レイヤーの一覧で、塗りつぶしたひし形のアイコン（メインコンポーネント）か、コンポーネントセットを選び直してください。

プロパティを作ったのにインスタンスで変えても何も起きない

親から作ったプロパティを、まだどのレイヤーにも適用していない可能性があります。

プロパティの行に「i」の印があれば未適用なので、中の文字やアイコンを選んで、テキストなら「コンテンツ」、ブール値なら「外観」の右のアイコンから適用します。

インスタンスで「アイコン」の欄が消えた

ブール値でアイコンを非表示にすると、そのアイコンに付けた入れ替えの欄も右パネルから消えました。

表示をオンに戻すと、また選べるようになります。

「ネストされたインスタンス」がメニューに出ない

中に入れた部品がインスタンスでない、または中の部品にプロパティが無い可能性があります。

先に中の部品のコンポーネントにプロパティを作ってから、外側のコンポーネントを選び直してください。

親の文字を直したのにインスタンスが変わらない

インスタンスで文字を変えていると、その文字が残ります。

対処は、上書きを戻すか、インスタンスで同じ値に打ち直すかの2つです。

プロパティの名前が編集の状態になった

プロパティの行をダブルクリックすると、名前を書き換える状態になります。

名前を変えずにEnterを押せば、そのまま元の名前で確定しました。

まとめ

• コンポーネントプロパティは、メインコンポーネントを選んだときの右パネルの「プロパティ」の「＋」から作る
• 文字はテキスト、表示の有無はブール値、アイコンの差し替えはインスタンスの入れ替え、状態はバリアントに分ける
• 中の文字やアイコンを選んで作ると、そのレイヤーにすぐ適用される
• インスタンスで変えた値は、親の色や既定の文字を直しても残る
• 中に入れた部品の項目は、ネストされたインスタンスの公開で外に出せる
• 無料のドラフトでも作成と利用はでき、別ファイルでの共有はプランの案内が出る
• 有料プランでは、チームのフォルダに入れたファイルをライブラリとして公開すると別のファイルでもプロパティが使え、親の変更は「更新」で受け取る

次の一歩は、手元のボタンのバリアントを見直し、文字やアイコンだけが違うものをプロパティにまとめてみることです。

部品を置いて上書きする基本は、Figmaのアセット・コンポーネントの使い方も参考にしてください。

参考：コンポーネントのプロパティを調べる、コンポーネントプロパティの作成と管理、Unpublish a library（いずれもFigma公式ヘルプ、2026年11月1〜2日に確認）。