Figmaのコンポーネントは、右クリックメニューまたはショートカット（Mac: ⌥+⌘+K、Windows: Ctrl+Alt+K）で作成でき、一度作ると同じ要素を何度でも使い回せます。この記事では、基本の作成手順から、バリアント・プロパティ・デザインシステム運用まで、フリーランス案件で実際に使える構成を順に解説します。
▶ 3日で初案件PR
この記事でわかること
コンポーネント作成はショートカット1つで完了し、3分で最初の部品を作れます。バリアントとプロパティを組み合わせると、状態管理のコンポーネント数を半分以下に抑えられます。案件規模に応じた3段階の設計基準で、「どこまで作るか」の判断が明確になります。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
Figmaのコンポーネント作成は、フレームまたはグループを選択して「コンポーネントを作成」を実行するだけで始められます。作成したコンポーネントを元データとして扱い、複製した「インスタンス」を各画面に配置する運用が基本です。バリアントとプロパティを組み合わせることで、ボタンの状態やテキストの差し替えを設計の段階で整理でき、クライアントや開発者に渡せる品質のファイルに近づきます。
最初に確認すること
作業前に、コンポーネント化する要素が「フレームまたはグループ」になっているかを確認してください。テキストのみのレイヤーや、フレームに格納されていない状態では、コンポーネントが意図した形にならないことがあります（確認所要時間：1〜2分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| コンポーネントの作り方をゼロから知りたい | Figmaコンポーネントは3手順で作成できる | 5分 |
| コンポーネントとインスタンスの違いが曖昧 | コンポーネントとインスタンスの関係は親子構造で理解する | 3分 |
| ボタンの状態をまとめて管理したい | バリアントはボタンの状態を1セットで管理できる | 5分 |
| テキストやアイコンの差し替えを楽にしたい | プロパティ化で文字とアイコンを切り替えやすくする | 4分 |
| 案件でどこまで設計するか判断したい | フリーランス案件でコンポーネント設計を提案する基準は3段階 | 4分 |
Figmaコンポーネントは3手順で作成できる
手順は3つです。最初に対象を選択し、次に「コンポーネントを作成」を実行し、最後に命名します。これだけで最初のコンポーネントが完成します。
手順1：コンポーネントにする要素を選択する
キャンバス上で、コンポーネント化したいフレームまたはグループを選択します。ボタン1つからでも構いませんし、ラベルとアイコンをまとめたグループでも問題ありません。複数のフレームを同時に選択した場合は、それぞれが独立したコンポーネントとして一括作成されます（Figma公式ヘルプ：コンポーネントの作成）。
よくある失敗として、フレームではなく「子レイヤー（テキストやアイコン単体）」を選んでしまうケースがあります。その場合でもコンポーネントは作成されますが、余白やレイアウトが想定通りに機能しないため、1つ上のフレームを選択しているかを確認してから進めてください。
手順2：コンポーネントを作成する（3通りの実行方法）
作成の実行方法は3通りあります。右サイドバーのプロパティパネルにある「コンポーネントを作成」ボタンをクリックする方法は、視覚的に分かりやすく初めて使う場面に向いています。右クリックメニューから「コンポーネントを作成」を選ぶ方法は、マウス操作の流れで完結するため画面サイズの制約があるときに使いやすいです。ショートカットキーを使う方法は、Macなら ⌥ Option + ⌘ Command + K、Windowsなら Ctrl + Alt + K で実行でき、複数要素を続けて作成する作業に向いています（Figma公式ヘルプ：コンポーネントの作成）。
作成したコンポーネントは、レイヤーパネル上でアイコンが四角形4つの形に変わり、キャンバス上でも枠線の色が変わります。この変化を確認できれば、コンポーネントとして登録されたと判断できます。
手順3：名前を付けて整理する
コンポーネントを作成した直後に分かりやすい名前を付けると、後工程の混乱を防げます。アセットパネルで検索したときに名前で絞り込めるため、「Button/Primary」「Button/Secondary」のようにスラッシュ区切りで分類する命名が実務ではよく使われます（Figmaでコンポーネントをつくる6つのコツ｜necco）。
名前を付けずに作業を続けると、アセットパネルが「Component1」「Component2」の連番で埋まり、後から検索して使うときに探せなくなります。命名を後回しにしたまま進めたフリーランサーが、ファイルが肥大化してから整理し直す時間が必要になったという経験は少なくありません。
CHECK
▶ 今すぐやること: キャンバス上の任意のボタンを選択し、ショートカット（Mac: ⌥+⌘+K / Win: Ctrl+Alt+K）でコンポーネント化して、「Button/Primary」と名前を付ける（3分）
Q: テキストレイヤー単体でもコンポーネントにできますか？
A： 技術的には作成できますが、テキスト単体のコンポーネントは余白やレイアウトを含まないため、実務では1つ上のフレームをコンポーネント化する方が使い回ししやすくなります。
Q： コンポーネントを間違えて作ったとき、元に戻せますか？
A： コンポーネントを選択した状態で右クリックし「コンポーネントを切り離す」を選ぶと、通常のフレームに戻せます。インスタンスを配置済みの場合はインスタンスには影響しないため、後から整理することが可能です。
要点整理
フレームを選択してショートカットを実行し、「Button/Primary」形式で即座に命名することがコンポーネント作成の3ステップです。名前付けを後回しにすると連番の混乱が生じるため、作成直後に設定する習慣をつけてください。
コンポーネントとインスタンスの関係は親子構造で理解する
インスタンスの概念が曖昧なまま使い始めると、「コンポーネントを作ったのにどこで使えばいいか分からない」という迷いが生じやすくなります。
元データ（コンポーネント）と複製（インスタンス）の役割の違い
コンポーネントは設計の原本で、インスタンスはその複製です。アセットパネルからドラッグ＆ドロップでキャンバスに配置したものが「インスタンス」になります。元のコンポーネントを編集すると、配置したすべてのインスタンスに変更が反映されます。この構造によって、ボタンの色を変えたいときに全画面を手直しするのではなく、コンポーネント1か所の修正で全体を更新できます（Figmaでコンポーネントをつくる6つのコツ｜necco）。
インスタンスはコンポーネントから受け継いだ設定を保ちながら、一部（テキストや色）だけを個別に上書きすることもできます。ただし上書きした状態のまま放置し、後から元コンポーネントを大幅に変更すると、どのインスタンスが元の設計を引き継いでいてどれが上書きされているか分かりにくくなります。
コンポーネントを置く場所の選び方
コンポーネント自体（元データ）は、通常のキャンバス画面の外側か、専用のページに置いておくと管理しやすくなります。作業ページと同じ場所に置いてしまうと、作業中に誤って移動したり削除したりするリスクがあります（Figmaコンポーネント作成の解説｜shiba_design）。
チーム案件では、共有ライブラリ機能でコンポーネントを別ファイルから呼び出す運用が取られることもあります。
コンポーネントの編集時に迷いやすいポイント
インスタンスをダブルクリックして中の要素を直接変更すると「インスタンス側の上書き」になります。元のコンポーネント自体を変えたいときは、右クリックメニューから「メインコンポーネントに移動」を選ぶか、アセットパネルからコンポーネントを開いて編集してください。インスタンスを編集しているつもりで元データを変えてしまい、全インスタンスに影響が出た、という状況は、Figmaを使い始めたばかりの段階で一度は経験することが多いです。
Q: インスタンスとコンポーネントを、キャンバス上でどう見分けますか？
A： レイヤーパネルでアイコンの形が異なります。コンポーネント（元データ）は菱形4つが正方形に並ぶアイコン、インスタンスは菱形1つのアイコンで表示されます。最初はレイヤーパネルをこまめに確認しながら進めると判断しやすくなります。
Q： コンポーネントを別のファイルから呼び出せますか？
A： 共有ライブラリを公開設定にすることで、別ファイルからアセットパネルを通じて利用できます。フリーランスが単独で管理する小規模な案件では、同一ファイル内の運用が一般的です。
要点整理
元データ（コンポーネント）はコンポーネント専用ページに配置し、作業ページには配置しないことがファイル管理の基本です。インスタンス編集と元データ編集を混同しやすいため、右クリックメニューの「メインコンポーネントに移動」を積極的に使ってください。
バリアントはボタンの状態を1セットで管理できる
状態ごとにコンポーネントを個別に作ると、修正のたびに複数のコンポーネントを手直しすることになります。バリアントを使うことで、通常・ホバー・押下・無効などの状態を1つのコンポーネントセットの中に整理できます。
バリアントの作成手順
まず、バリアントを持たせたいコンポーネントを選択します。次に、右サイドバーにある「バリアントを追加」ボタンをクリックします。追加したバリアントは、プロパティパネルで状態名（たとえば「Default」「Hover」「Disabled」）を設定して管理します（Figmaでコンポーネントをつくる6つのコツ｜necco）。
バリアントを追加すると、コンポーネントセットという紫色の枠線で囲まれたグループが生成されます。この枠内の各コンポーネントが1つの状態に対応します。インスタンスを配置した画面では、右サイドバーのプロパティパネルからドロップダウンで状態を切り替えられます。
バリアントが有効な場面と向いていない場面
バリアントが有効なのは、ボタンのように外見が変わるが構造が同じ要素に対してです。状態の数が2〜5程度であれば管理しやすく、インタラクションのプロトタイプを作るときにも状態間のトリガーを設定しやすくなります。
一方、構造そのものが大きく異なる要素（たとえばカードとポップアップのように要素の組み合わせが根本的に異なるもの）を無理にバリアントでまとめようとすると、プロパティパネルが複雑になりすぎてかえって使いにくくなります。状態の数が7を超えたとき、または状態ごとに子要素の数が大きく違うときは、バリアントではなく独立したコンポーネントに分けることを検討してください（Figmaでコンポーネントをつくる6つのコツ｜necco）。
判断フロー：バリアントにするか、個別コンポーネントにするか
状態間で要素の種類と数がほぼ同じで、かつ状態の数が6種類以下であれば、バリアントでまとめてください。状態間で構造が異なる、または状態数が7以上になる場合は、個別コンポーネントに分けるか、プロパティを活用してバリアント数を減らす方向で見直してください。
Q: バリアントの状態名は英語にしないといけませんか？
A： 日本語の状態名でも機能しますが、開発者との連携を想定する場合は英語（Default, Hover, Disabled など）に揃えておくと、エンジニアとの認識合わせが楽になります。
Q： バリアントの一部だけ色やフォントを変えたいときはどうしますか？
A： 各バリアントは独立したコンポーネントとして編集できるため、状態ごとに色やサイズを個別に設定できます。共通部分はネストされたコンポーネントとして切り出しておくと、修正が元から波及しやすくなります。
要点整理
状態の数が6以下で構造が同じであればバリアントでまとめ、7以上または構造が異なる場合は個別コンポーネントに分けてください。開発連携を想定する場合は状態名を英語（Default/Hover/Disabled）に統一しておくと認識の齟齬が減ります。
プロパティ化で文字とアイコンを切り替えやすくする
バリアントだけでは、ラベルの文字やアイコンの有無をインスタンスごとに変えるたびに個別の手直しが必要になります。プロパティを設定することで、インスタンスを配置した画面のサイドバーからテキスト内容や表示・非表示を切り替えられるようになります。
テキストプロパティの設定手順
コンポーネント内にあるテキストレイヤーを選択し、右サイドバーの「テキストプロパティを作成」をクリックします。プロパティ名（たとえば「Label」）を設定すると、インスタンス配置時にそのプロパティ名でテキストを編集できる入力欄がサイドバーに表示されます（Figmaでコンポーネントをつくる6つのコツ｜necco）。
テキストプロパティを設定していない状態でも、インスタンスをダブルクリックすれば中のテキストを変更できます。ただしその場合は「インスタンスの上書き」として扱われ、元コンポーネントを変更したときに上書きが消えてしまうことがあります。プロパティとして明示しておくと、設計上の意図が明確になり、上書きによる意図しないリセットを防げます。
ブーリアンプロパティでアイコンの表示・非表示を制御する
コンポーネント内のアイコンレイヤーを選択し、「ブーリアンプロパティを作成」から「HasIcon」などのプロパティ名で登録します。インスタンスを配置した画面では、チェックボックスのオン・オフでアイコンの表示と非表示を切り替えられます。
アイコンありとアイコンなしの2種類をバリアントで管理していたものをブーリアンプロパティに切り替えると、バリアントの数を半分以下に減らせます。バリアントとプロパティはどちらか一方を使うものではなく、組み合わせて使うことでコンポーネントセットをシンプルに保てます（Figmaでコンポーネントをつくる6つのコツ｜necco）。
ネストされたコンポーネントとプロパティの連携
ボタンの中にアイコンコンポーネントをネストして配置している場合、外側のボタンコンポーネントのプロパティから内側のアイコンを差し替えられるよう設定できます。この「インスタンスの入れ替えプロパティ」を活用すると、アイコンの種類だけを変えたいときに外側のボタンに触るだけで対応できます。
ネスト構造は便利な反面、入れ子が深くなると「どのコンポーネントを編集すれば意図した箇所が変わるのか」が分かりにくくなります。実務では2〜3層程度を上限の目安にして、それ以上の深さになるときは構造を見直すか、コンポーネントをフラットに分割してください。
CHECK
▶ 今すぐやること: 手持ちのボタンコンポーネントを開き、テキストレイヤーに「Label」というテキストプロパティを設定して、インスタンス配置時にサイドバーから文字を変更できるか確認する（5分）
Q: プロパティを設定しても、インスタンス側でサイドバーに表示されません。原因は？
A： コンポーネント（元データ）側でプロパティを設定したかどうかを確認してください。インスタンス側で操作してもプロパティは設定できません。また、テキストレイヤーが別のグループに深くネストされている場合、プロパティのスコープが届いていないことがあります。コンポーネントを開いてから設定しているか、レイヤー構造を再確認してください。
Q： ブーリアンプロパティとバリアントはどちらを使えばよいですか？
A： 表示・非表示の切り替えだけが必要な場合はブーリアンプロパティ、見た目の変化（色・サイズ・形）が伴う場合はバリアントが向いています。組み合わせて使うことでコンポーネントセットをシンプルに整理できます。
要点整理
テキスト変更はテキストプロパティ、表示・非表示の切り替えはブーリアンプロパティ、見た目の変化はバリアントと役割を分けて使ってください。ネストは2〜3層を上限の目安にして、それ以上になるときはコンポーネントをフラットに分割することを検討してください。
PR提供: 日本デザインスクール（デザスク）
フリーランス案件でコンポーネント設計を提案する基準は3段階
案件の規模やクライアントの要望によって、適切な設計の粒度は変わります。以下の3段階で自分の案件がどこに当たるかを確認してください。
判断基準1：小規模案件（画面数5枚以下の単発制作）
画面数が少なく修正の頻繁さも限られる場合は、ボタン・入力欄・ナビゲーションなど繰り返し使う要素だけをコンポーネント化する最小構成で十分です。全要素をコンポーネント化すると、管理コストが制作コストに見合わなくなることがあります。
この規模では、コンポーネント化した要素に簡単な命名をしておくだけで、クライアントが後からファイルを触るときの見通しが変わります。フリーランスとしてFigma案件を受注する際、どの段階の設計を提案するかが単価や評価に直結することがあります。
判断基準2：中規模案件（複数画面・開発者連携あり）
エンジニアがFigmaのデータを参照しながら実装する案件では、コンポーネントの命名がコードのコンポーネント名に対応することが多くなります。この段階では、バリアントとプロパティを活用して状態管理を整え、実装可能な構造でコンポーネントを作ることが求められます。
開発者が「Auto Layoutで組まれているか」「パディングやギャップの設定はあるか」を確認することがあるため、見た目だけを整えるのではなく、Auto Layoutを使ったレイアウト設計も合わせて行うと連携の齟齬が減ります（マスターコンポーネントの具体的な構築方法｜zenn levtech）。
判断基準3：デザインシステム構築案件
カラーやタイポグラフィのスタイルをVariablesで管理し、コンポーネントとスタイルが連動した状態を構築することが求められます。この段階では、コンポーネントを作る技術だけでなく、どの粒度でコンポーネントを切り出すか（Atomic Designの考え方を参考に設計する粒度の判断）とドキュメント・Changelogの整備が仕事の範囲になります。
フリーランスがデザインシステム構築の提案をできるようになると、単発のUI制作よりも継続的な関わりが生まれやすくなります。ただし、デザインシステムの構築は工数の見積もりが難しく、スコープを明確にしないまま着手すると作業範囲が際限なく広がることがあります。提案段階でスコープと成果物を文書化することで、案件を安定させられます。
CHECK
▶ 今すぐやること: 現在の案件または練習ファイルを開き、上記の判断基準1〜3のどの段階に当たるかを確認し、コンポーネント化する要素のリストを書き出す（5分）
Q: コンポーネント設計の範囲をクライアントに説明するとき、どう伝えればよいですか？
A： 「再利用できる部品を作ることで、修正を1か所変えるだけで全体に反映できるようにします」と伝えると、技術に詳しくないクライアントにも伝わりやすくなります。範囲が広くなる場合は、「何をコンポーネント化するか」のリストを事前に合意しておくとスコープの齟齬が減ります。
Q： フリーランスがFigmaのコンポーネント設計スキルをアピールするには？
A： ポートフォリオのFigmaファイルを公開するとき、コンポーネントとバリアントを整理したファイルをそのまま共有するのが実績として伝わりやすいです。命名やレイヤー構造が整っていること自体が、「渡せるファイルを作れる人」の判断材料になります。
要点整理
画面数5枚以下であれば最小構成のコンポーネント化で十分です。開発者連携がある中規模案件ではAuto LayoutとプロパティのセットがFigmaファイルの品質基準になります。デザインシステム構築案件では提案段階でスコープを文書化することで作業範囲の肥大化を防げます。
Figmaコンポーネントの実務ノウハウは5つで整理できる
基本操作を理解したうえで作業の精度を上げるための実務的な知識を5つまとめます。
ノウハウ1：再利用頻度が高い要素から順番にコンポーネント化する
【対象】: ファイルに要素が増えてきて、何からコンポーネントにすべきか優先順位が決められない人
【手順】: 現在のデザインファイルを開き、同じ要素が3回以上出てくるものをメモします（3分）。ボタン・入力欄・タグ・ナビゲーションの順に、使用頻度の高いものから1つずつコンポーネント化します。アセットパネルで検索したときに見つかるか確認し、命名を調整します。
【コツ】: 「現時点で2回以上使っている」または「次の画面でも使う予定がある」という条件を設けて判断してください。全体を一気に整理しようとすると、コンポーネント化の作業自体が未完成のまま案件期限を迎えることがあります。3回以上登場するものだけを先にコンポーネント化し、小さく始めて必要に応じて追加していく方が実務に合っています。
【注意点】: 「再利用するかもしれない」という理由でほぼすべての要素をコンポーネント化するのは避けてください。一度しか使わない要素をコンポーネントにすると、アセットパネルに不要なコンポーネントが増え、本当に必要なものを探すときに時間がかかります。
ノウハウ2：命名ルールはスラッシュ区切りで分類を整理する
【対象】: コンポーネントの数が増えてきて、アセットパネルから目的のものを探しにくくなってきた人
【手順】: 現在のコンポーネント名の一覧をアセットパネルで確認します。「カテゴリ/コンポーネント名/バリアント名」の形式（例：Button/Primary/Default）でリネームします。複数のコンポーネントを選択して一括でリネームする場合は、レイヤーパネルで複数選択してCtrl+R（Mac: ⌘+R）でリネームパネルを開きます。
【コツ】: スラッシュ区切りを最初から使うと、アセットパネルでカテゴリごとにグループ化されて表示されるため、開発者に渡す段階でファイルの見通しが良くなります。命名はコンポーネント作成直後に設定する習慣が実務では機能します。
【注意点】: スラッシュを使った分類が4階層以上になると名前が長くなって読みにくくなります。カテゴリ・コンポーネント名・状態の3層を基本として、それ以上の細分化はVariablesやプロパティ側で管理する方向で検討してください。
ノウハウ3：バリアントとプロパティを組み合わせてコンポーネントセットを小さく保つ
【対象】: バリアントを使い始めたが、状態の組み合わせが増えるたびにコンポーネントセットが大きくなってしまっている人
【手順】: 現在のバリアントをすべて書き出し、「表示・非表示の切り替えだけ」のものと「見た目の変化が伴う」ものに分類します。表示・非表示だけのものをブーリアンプロパティに切り替えます。テキストが変わるだけのものをテキストプロパティに切り替えます。結果としてバリアントの数が減ったことを確認します。
【コツ】: 「表示・非表示はブーリアン、テキストはテキストプロパティ、見た目の変化はバリアント」と役割を分けて使う方がコンポーネントセットの枚数を抑えられます。バリアントの枚数が少ないほど、インスタンスを配置した画面でのプロパティパネルの操作が直感的になります。
【注意点】: テキストプロパティとバリアントを混在させているとき、バリアントを切り替えるとテキストプロパティの値がリセットされる場合があります。新しいプロパティの設定を加えるときは、小規模なテスト用ファイルで動作を確認してから本番ファイルに適用する習慣が助けになります。
ノウハウ4：Auto Layoutを前提にコンポーネントの内部構造を組む
【対象】: コンポーネントを作ったが、テキストが長くなったときに要素がはみ出したり、余白が崩れたりする人
【手順】: コンポーネントにしたいフレームを選択し、Shift + A でAuto Layoutを適用します。パディング（上下左右の余白）とギャップ（要素間の間隔）を設定します。コンポーネント化した後、テキストを長い文字列に変更して、余白とレイアウトが意図通りに保たれるか確認します。
【コツ】: Auto Layoutを組み込んでおくことで、テキストの長さが変わっても余白を保ったままコンポーネントが伸縮します。エンジニアが実装するときもCSSのflexboxに対応した構造として参照できるため、開発連携の際に「Figmaとは見た目が違う」という齟齬が減ります（マスターコンポーネントの具体的な構築方法｜zenn levtech）。
【注意点】: Auto Layoutを後から適用すると、既存の子要素の位置やサイズが想定と変わることがあります。子要素の設定（幅のFill/HugとFixed）を一つずつ確認してから進めてください。最初に小さなフレームで試してから本番の要素に適用する手順で、想定外のずれを防げます。
ノウハウ5：コンポーネント設計の見直し判断
【対象】: コンポーネントを作ったが、案件を進めるうちに構造が複雑になって使いにくくなっている人
【手順】: 現在のコンポーネントセットを開き、「インスタンスを配置してから操作しにくい」と感じる場面を1つ特定します。その原因がバリアントの多さかプロパティの競合か、ネストの深さかを判断します。原因ごとに、バリアント削減・プロパティ化・コンポーネント分割の3択から対処を選びます。
【コツ】: 「インスタンスを使う側（自分や開発者）が直感的に操作できる粒度が適切な粒度」という考え方が実務では機能します。コンポーネントを使うたびに迷いが生じるのは設計の見直しが必要なサインです。操作のしやすさを基準に見直しを行うことで、改善ポイントが見えやすくなります。
【注意点】: コンポーネントの構造を大きく変更すると、それを使っているインスタンス側に影響が出ることがあります。変更前には、影響を受けるインスタンスがどの画面にあるかを右クリック → 「インスタンスに移動」で確認してから作業してください。
要点整理
3回以上登場する要素から優先してコンポーネント化し、作成直後に「Button/Primary/Default」形式で命名してください。Auto Layoutは最初から組み込み、バリアント・プロパティの役割分担を整理することでコンポーネントセットをシンプルに保てます。操作に迷いが生じたらそれが構造見直しのタイミングです。
フリーランス向けコンポーネント設計の実例を体験談で確認する
コンポーネント設計がどう実務に影響するか、実際の経験談からポイントを整理します。
ケース1（設計整理が後工程の効率を変えた事例）
コンポーネントの命名やバリアント設計を丁寧に整えることで、開発者との連携がスムーズになったという経験が報告されています。Figmaでコンポーネントをつくる6つのコツ｜neccoでは「バリアントとプロパティを整理したら、デザインの修正対応が格段にやりやすくなった」という声が紹介されています。
コンポーネントの整備を後回しにせず制作中に継続して整える運用が、修正コストを下げます。命名を後回しにしたまま進めた場合、納品段階でファイルを整理し直す時間が別途必要になります。フリーランスの作業効率を上げるには、こうした前工程での設計投資が後の時間節約につながります。
ケース2（コンポーネント設計のなさが問題になった事例）
画面ごとにボタンを個別に複製し続けた結果、色の変更を依頼されたときに全画面を1枚ずつ修正することになったという経験があります。Figmaコンポーネント作成の解説｜shiba_designでは「コンポーネントを使わずに作っていたので、デザイン変更のたびに全ファイルを手直しすることになった」という声が紹介されています。
コンポーネントを使わない場合、修正の範囲が画面数に比例して広がります。最初にコンポーネントを整えていれば、元データを1か所変更するだけで全体に反映でき、修正作業を短縮できます。
Q: 既存ファイルにコンポーネントが全くない状態から整理を始めるときの順序は？
A： ボタンから始めると効果を感じやすいです。次に入力欄、ナビゲーション、カードの順に進めると、再利用の恩恵を得ながら整理を進められます。全部を一度に整理しようとせず、1つのコンポーネント化が完了したら次に移る方が実務の流れを止めずに進められます。
Q： コンポーネントを作るとファイルが重くなりますか？
A： インスタンスを大量に配置すると描画の処理は増えますが、コンポーネント自体がファイルを大幅に重くする直接の原因にはなりにくいです。画像の解像度やエフェクトの多用の方が動作の重さに影響する場合があります。
要点整理
既存ファイルの整理はボタン→入力欄→ナビゲーション→カードの順に進めてください。コンポーネント自体がファイルを重くする主因にはなりにくく、動作の重さは画像解像度とエフェクト設定を見直すことで改善できます。
Figmaコンポーネントで設計の整備を整える
Figmaのコンポーネントは、右クリックまたはショートカット（Mac: ⌥+⌘+K / Win: Ctrl+Alt+K）で作成を始められ、命名・バリアント・プロパティを整えることで修正1か所が全体に反映される設計に近づきます。
フリーランスとして案件でFigmaを使う場合、コンポーネントを「作れる」だけでなく「渡せる形で作れる」ことが差になります。命名・Auto Layout・バリアント設計の3点を整えたファイルは、クライアントや開発者への引き渡し後も崩れにくく、追加修正の依頼を受けやすい状態を保てます。まずは手元のボタン1つをコンポーネント化し、バリアントとプロパティを1つずつ設定してみることから始めてください。
| 状況 | 次の一歩 | 所要時間 |
| コンポーネントをまだ一度も作ったことがない | ボタン1つを選択してショートカットでコンポーネント化し、「Button/Primary」と命名する | 5分 |
| 作ったがインスタンスの使い方が分からない | アセットパネルからドラッグ＆ドロップで配置し、サイドバーでプロパティを確認する | 3分 |
| バリアントを設定したが枚数が多くなってきた | 表示・非表示のみの差分をブーリアンプロパティに切り替えてバリアント数を減らす | 10分 |
| 案件でどこまで設計するか迷っている | 判断基準1〜3の表と照らし合わせて、案件の規模とコンポーネント化の範囲を書き出す | 5分 |
Figmaコンポーネントの作り方に関するよくある質問
Q: Figmaの無料プランでもコンポーネントは使えますか？
A： 使えます。無料プランのStarterでもコンポーネントの作成・インスタンスの配置・バリアントの設定が可能です。共有ライブラリの機能は有料プランで利用できる範囲が広がりますが、単一ファイル内でのコンポーネント活用は無料プランで一通り試せます（Figma公式ヘルプ：コンポーネントの作成）。
Q： コンポーネントを削除すると、配置済みのインスタンスはどうなりますか？
A： コンポーネント（元データ）を削除すると、配置済みのインスタンスは通常のフレームに変換されます。見た目はそのまま残りますが、以降はコンポーネントとの連携が切れた状態になります。削除の前に、影響するインスタンスの数と場所を確認してから進めてください。
Q： デザインシステムを作るとき、Atomic Designは必ず意識する必要がありますか？
A： 必須ではありませんが、粒度の基準を持っておくと設計の判断が早くなります。Atomic Designの考え方（atoms→molecules→organisms）を参考にしつつ、プロジェクトの規模に合わせて柔軟に崩して使うことが多いです。厳密に従うことよりも、「なぜこの粒度でコンポーネントを切るのか」を説明できる状態にしておく方が、チームや開発者との連携では役に立ちます。
【出典・参照元】
Figma公式ヘルプ：デザインで再利用するためのコンポーネントの作成