Figma で色を一括変更する方法 — カラースタイル管理とプラグインの使い分け、XD 移行で詰まりやすい点まで

「Figma で 30 ヶ所以上に散らばった色を、別の色に一括で置き換えたい」「XD から移行したらカラーがバラバラになってしまった」「ライト / ダーク両方の色を一気に整えたい」— Figma である程度の規模の作業を行っていると、色を一括で変更したいというニーズは高確率で発生します。

Figma には 標準機能だけで対応できる作業 と、プラグインに頼った方が圧倒的に早い作業 があります。やみくもにプラグインを探す前に、まず標準機能で何ができるかを押さえると、ツール選びの精度が上がります。

本記事では、Figma 標準機能による一括変更の基本 → 標準機能の限界 → プラグインの使い分け → グラデーション / 画像 fill の扱い → XD 移行特有のケース を、実務でそのまま使える順序で整理しました。Pixel Fine Converter の開発で XD → Figma 変換時のカラースタイルに関する挙動を検証してきた立場から、移行後に発生しやすい「カラー混在」への対処も合わせてまとめます。

この記事で得られること

  • Figma 標準機能でできる色に関する指定の一括変更の正しい手順（Selection Colors / カラースタイル）
  • 標準機能で詰まる典型的な場面と、プラグインを使うべき判断基準
  • ライト / ダークモードや Variables 連携での色管理
  • XD から移行したファイル特有のカラー混在問題への対処
  • 大量変更でも安全に進めるためのワークフロー設計

関連記事も合わせてどうぞ

フォント側の一括変更 は Figma でフォントを一括変更する方法 を、XD → Figma 変換時のカラー / グラデーション精度 は XD のカラー・グラデーションは Figma でどう変換される？ を、移行プロセス全体 は Adobe XD から Figma への移行 実践ガイド を参照してください。本記事は「すでに使われている色を一括で別の色 / カラースタイルに置き換える」運用に特化しています。

📝 はじめに — 色変更で困りやすい 3 つの場面

Figma で色を一括変更したい場面は、大きく次の 3 つに分かれます。それぞれ最適な手段が違うので、まず自分のケースを特定してから読み進めてください。

場面 A: 同じ色で揃っているデザインを、別の色 1 種類に置き換えたい

ブランドリブランディングで「#1976D2 → #0F62FE」に統一する、というケース。同じ色が使われているレイヤーを一括で選択して変更すれば終わるので、標準機能だけで完結できます。

場面 B: 複数の色が混在しているデザインを、整理しながら一括変更したい

XD から移行した直後や、複数人で作っていたファイルで起きやすいケース。「似たような青が 5 種類混在しているので、ブランドの青 1 つに統一したい」「グレースケールがバラバラなので 5 段階に整理したい」など。標準機能だけだと選択操作の繰り返しになり、プラグインを使った方が圧倒的に早いケースが該当します。

場面 C: ライト / ダークモードや Variables を活用して、テーマ単位で色を一括変更したい

「ダークモードのアクセントカラーだけを変えたい」「ブランドカラー変更を全モードに自動反映したい」など。Variables（Local variables）+ カラースタイル の組み合わせ で対応するケースで、設計時の構造がそのまま運用効率を決めます。

これらは別々の作業に見えて、解き方の本質は同じです。「Figma にどう同じ属性を持つレイヤーを認識させるか」 がカギになります。

🔧 Figma 標準機能で色を変更する基本

プラグインに飛びつく前に、Figma が標準で提供している色の一括変更機能を押さえます。多くのケースは標準機能だけで終わります。

Selection Colors（選択範囲の色一覧）

最も基本的なアプローチは、変更したい範囲のフレーム / ページを選択 → 右サイドバーの Selection colors（選択範囲の色）を確認 することです。日本語UI では右パネル上部に「選択範囲の色」、英語UI では「Selection colors」として、その範囲内で使われている色がすべて一覧表示されます。

一覧に並んだ色の 色見本をクリックして別の色に変更すれば、その色が使われているすべてのレイヤーが一括で更新 されます。フレームをまたいでも、Fill でも Stroke でも、同じ色値であれば全部に反映されます。

実機検証では、Selection colors 一覧には次の情報が表示されます。

  • HEX / RGB / HSL の値
  • 不透明度（opacity）
  • カラースタイル化されているかどうか（スタイル名 / リンクアイコン）

ここで 重要な制約 は、Selection colors は 「現在の選択範囲」内 にしか働かない点です。ページ全体やファイル全体に対して一括変更するには、ページの全レイヤーを選択（Cmd/Ctrl + A）してから Selection colors を確認します。

カラースタイル（Color Styles / Local styles）の登録と編集

長期的に色を運用するなら、最初から カラースタイルとして登録 しておくのが最も強力な手段です。Figma の「カラースタイル」は、Figma 公式用語で Local styles、UI 上は「Color styles」と表示されます。

カラースタイルを登録する手順は次の通りです。

  1. 色（Fill 値）を確定したレイヤーを選択
  2. 右パネル Fill の スタイルアイコン（4 つの点が並んだアイコン） をクリック
  3. + ボタンで新規スタイル作成 → 名前を付けて保存（例: Brand/Primary, Text/Body, Surface/Background）

一度カラースタイルを登録してしまえば、スタイル側の色値を編集するだけで、参照しているすべてのレイヤーが自動で更新 されます。これが本記事で扱う「一括変更」の最もスマートな状態です。

階層構造は スラッシュ区切り（Primary/Default, Primary/Hover など）で表現され、サイドバーのスタイル一覧でツリー表示されます。命名規則を整えておくと、後の編集 / 整理が劇的に楽になります。

Fill / Stroke 両方のカラー編集

Figma の色は Fill（塗り） と Stroke（枠線） で別々に管理されます。Selection colors 一覧では両方の色が並んで表示されるため、Stroke だけの一括変更も同じ手順で可能 です。

カラースタイルも Fill / Stroke 両方に適用できます。たとえば「Border/Default をボタンの Stroke に当てる」「Surface/Card を Fill に当てる」など、用途別に分けて運用するのが定石です。

「同じ色で選択」系のアプローチ

フォント変更で使う 編集 → 次のオプションですべて選択 → 同じフォントで選択 に直接相当するメニューは、色にはありません。ただし Selection colors（選択範囲の色）の各色の行には ターゲット（照準）アイコン があり、これをクリックすると その色を使っているすべてのレイヤーを一括選択 できます（ホバー時に「Select all using this color」と表示）。カラースタイルが当たっている色も同じ一覧に並ぶため、同様に選択できます。

選択範囲をまたいでさらに広く拾いたい場合や、近似色をまとめたい場合は、後述のプラグインを使うのが現実的です。

⚠️ 標準機能の限界 — プラグインが必要になる場面

Selection colors とカラースタイルで多くのケースは解決しますが、次のような状況では 標準機能だけだと工数がかかりすぎる ので、プラグインを検討します。

限界 1: 大量の混在したカラーをまとめて整理したい

「似たような青が 5 種類、グレーが 8 種類、緑が 4 種類」のような混在状態を、Selection colors の手動編集だけで整理するのは非現実的 です。プラグインなら、似た色をグルーピングして一括で正規化できます。

限界 2: 複数ページ・複数ファイルにまたがる変更

Selection colors は選択範囲のみ。複数ページにまたがるブランドカラー変更は、各ページで Cmd+A して Selection colors を編集 という操作を繰り返す必要があります。ファイル横断ならさらに複雑です。プラグインなら ファイル全体 / 選択範囲を切り替えながら一気に処理 できます。

限界 3: ライト / ダーク両モード対応

Variables を使わずにライト / ダーク 2 ファイルで運用しているケースでは、片方のモードを変更したら もう一方も対応して変更 する必要があります。標準機能では各ファイルで個別に作業する必要があり、整合性確認のコストが高くなります。

Variables（Local variables）を使えばモード切り替えで対応できますが、既存ファイルを Variables 体制に移行する作業自体が大きな工数 になります。プラグインの中には Variables 化を補助するものもあります。

限界 4: HEX 値が微妙にズレた似た色を統合したい

#1976D2 / #1975D1 / #1A77D3 のように、目視では同じだが値が微妙にズレた色 が散らばっているケース。Selection colors では別の色として扱われ、それぞれ手動で正規化する必要があります。プラグインなら近似色をグルーピングして一括変更できます。

判断基準

場面標準機能プラグイン
同じ色を別の色に置き換え◎○
カラースタイル経由の一括変更◎○
数十色の混在を整理△◎
複数ページ・複数ファイル横断△◎
ライト/ダーク両モード対応△◎
近似色の統合 / 正規化×◎

「○」「◎」が違うだけで、標準機能でもできるケースは多いです。まず標準機能で試してから、限界を感じたらプラグインに切り替える 順序がお勧めです。

🔌 プラグインで色を一括変更する

Figma Community には色一括変更系のプラグインが複数あります。本記事では特定プラグインを断定的に推奨することは避け、選定の判断基準 を提示します（更新 / 公開停止 / リネームで状況が変わるため）。

一括変更プラグインの基本フロー

ほとんどの一括変更プラグインは、次のフローで動きます。

  1. プラグインを起動 → 対象範囲（選択 / ページ / ファイル全体）を選ぶ
  2. 使われている色 / カラースタイル の一覧が表示される
  3. 変更したい色を選択 → 新しい色 / スタイルを指定
  4. 「Apply」「Update」「Replace」で実行

実行前に プレビューが見られるか がプラグイン選定の重要ポイントです。プレビューなしでファイル全体に適用すると、想定外のレイヤーまで変わって戻すのが難しくなります。

プラグイン選定のチェックリスト

Figma Community で「color replace」「bulk color」「batch styler」「change colors」などで検索し、次の 5 項目で評価してください。

  1. 更新日が直近 6 ヶ月以内（古いプラグインは Figma API 仕様変更で動かない可能性）
  2. インストール数 / 評価（実績のある定番を優先）
  3. プレビュー機能の有無（適用前の差分確認）
  4. 対象範囲の指定（選択 / ページ / ファイル全体を切り替えられるか）
  5. カラースタイル対応（生の HEX だけでなくスタイル経由の置換ができるか）

代表的なプラグイン候補（2026 年時点）

Figma Community 内で頻繁に名前が挙がるプラグインには次のようなものがあります（公開停止 / 仕様変更の可能性があるため、利用前に最新版を確認してください）。

  • Batch Styler: カラースタイル / テキストスタイル を一括編集。複数スタイルを選んでまとめて値を変えられる
  • Chroma Colors: ローカルカラースタイルの登録 / 整理を補助
  • Theme Switcher / Color Theme Manager 系: ライト / ダークなどテーマ単位の色切り替えを支援
  • Color Picker / Color Replace 系: ファイル内の色を検出して一括置換

特定プラグインへの依存はリスクなので、複数のプラグインを試して使い分ける のが実用的です。

プラグインを使う上での注意

  • Undo（Cmd/Ctrl + Z）が効きにくい場面がある: プラグインの実装によっては Undo が部分的にしか機能しないことがあります
  • Variants の中身が一括で変わる: コンポーネントのテキストレイヤーや背景色が、想定外の Variants まで変わることがあります
  • ライブラリ参照を壊さない: 共有ライブラリのスタイルを編集すると、参照している全ファイルに影響します

事故防止の詳細は後述「大量の色変更を安全に進めるワークフロー」を参照してください。

🌈 グラデーション・画像 fill も含めて整理したいとき

ここまでは 単色（SOLID Fill） の話でした。Figma の塗りには グラデーション / 画像 / メッシュ などの種類もあり、これらは単色とは扱いが異なります。

グラデーション fill の一括変更

グラデーションは 個別のグラデーション定義 として扱われ、Selection colors ではグラデーションプレビューが小さく表示されます。グラデーションを一括変更するには次の選択肢があります。

  • グラデーションそのものをカラースタイル化: Color styles はグラデーションも登録可能。スタイル経由で参照しているレイヤーをまとめて変えられる
  • プラグイン経由: 一部のプラグインはグラデーション fill の検出 / 置換に対応

グラデーションを多用するデザインでは、最初からカラースタイル化しておく のが運用効率を大きく改善します。

画像 fill の扱い

画像 fill は 色 ではないため、本記事の「色一括変更」のスコープからは外れます。ただし、画像 fill の上に重ねる オーバーレイカラー は単色扱いなので、Selection colors やプラグインで一括変更可能です。

Variables を使った色管理（推奨）

長期運用を考えるなら、Variables（Local variables） を組み合わせるのが最もスケーラブルです。

  • Variables: 色の「値」を変数として管理（例: color/brand/primary = #1976D2）
  • モード切り替え: ライト / ダーク / ブランド別などのモード単位で値を切り替え
  • カラースタイルとの併用: Variables を参照したカラースタイルを作成

これにより、「ブランドカラー変更」のような根幹的な変更がトークンレベルで完結 します。本記事の範囲を超えますが、新規ファイル設計時には検討する価値があります。

🔄 XD から移行したファイルでのカラー混在問題

XD から Figma に移行したファイルでは、色一括変更のニーズが高頻度で発生 します。

XD 移行で起きやすいカラー混在状態

XD では問題なく動いていたファイルでも、Figma に持って行くと次のようなカラー混在が起きやすくなります。

  • XD Document Assets が引き継がれない: XD で Assets パネルに登録していたドキュメントカラーが、Figma 側にローカルカラースタイルとして取り込まれない（変換ツールが対応していない場合）
  • 生の HEX 値が散らばる: Assets 登録されていなかった色は、Figma 側で各レイヤーに 直接の Fill 値（HEX 値） として転写される
  • 微妙にズレた値の混在: XD と Figma で色の解釈が微妙に異なる場合（OPACITY を含む RGBA 表現の丸め誤差等）に、似た値の色が複数生まれる

これらは XD のカラー周りが Figma に持ち込まれる過程で発生する 構造的な現象 で、変換ツール側の対応で軽減できる性質のものです。

Pixel Fine Converter での Document Colors 移行（Pro 機能）

Pixel Fine Converter は XD → Figma 変換時に、XD の Assets パネルに登録されているドキュメントカラーとテキストスタイル を Figma のローカルスタイルとして自動登録する機能 を Pro 機能として提供しています。

具体的には:

  • カラー Asset → Figma PaintStyle: XD の Assets パネル登録カラー（名前 / 色値 / opacity）を Figma のカラースタイルとして登録
  • テキストスタイル Asset → Figma TextStyle: フォント名 / サイズ / 行間 / 文字間隔を保持してテキストスタイル化
  • 変換後、すぐに Style パネルから運用可能: 移行後の整理にかかる工数を大幅に削減

これにより、Figma に持ち込んだ直後の「生 HEX 値の散在」を防ぎ、最初からカラースタイル経由の運用を始められます。

Pro 機能の挙動について

Pixel Fine Converter の Pro オプション「Import document colors & text styles」は、XD Assets パネル登録分のみ が対象です。ドキュメント内で使われているが Assets 登録されていない色は、引き続き生の HEX 値として転写されます。また、カラー Asset は 単色（SOLID） のみ対応で、グラデーションや画像 fill は対象外です（XD Color Asset 自体が単色仕様）。テキストスタイル の文字色（fontColor）は Figma TextStyle の仕様上ローカルスタイルには反映されません（フォント名 / サイズ / 行間 / 文字間隔は反映）。フォント不在時は Inter Regular にフォールバックします。

詳細な仕様は Features: Fine-tuning と Guide: Fine-tuning を参照してください。

XD のドキュメントカラーを Figma スタイル化 Figma Community で無料インストール

Figma Communityから1クリックで追加できます

移行後の一括変更ワークフロー

XD から移行した直後にお勧めする手順は次の通りです。

  1. Pixel Fine Converter で変換（Pro 機能 Import document colors & text styles を有効化）
  2. Figma で開いて、カラースタイル一覧を Local styles パネルで確認
  3. Assets 未登録だった色（生 HEX 値）を Selection colors で抽出
  4. 似た値の色を プラグインで近似色グルーピング → スタイル化
  5. すべての色をカラースタイル経由に揃える（このタイミングで整備しておくと、以降の色変更は標準機能で完結する）

最後のカラースタイル整備をやっておくと、今後のカラー運用が一気に楽になります。

🛠️ 大量の色変更を安全に進めるワークフロー

30 ヶ所以上の色変更を一括で行う場合、事故防止のためのワークフロー を組んでおくと安心です。

推奨ワークフロー（5 ステップ）

Step 1: ファイル複製でバックアップ: File → Duplicate で作業用ファイルを作成。元ファイルには触れない。

Step 2: スコープを明確にする: 「どのページ / フレームに対する変更か」「どの色を何に変えるか」を Notion / Issue 等で書き出してから着手。

Step 3: 小さく試す: いきなり全体置換せず、まず 1 ページだけプラグインで試して結果を確認。

Step 4: ページ単位で段階的に実行: ファイル全体を一気に置換するより、ページごとに置換 → 確認 → 次のページ、の方が事故時の影響範囲が小さくなります。

Step 5: カラースタイル整備: 置換後にカラースタイルを作成 / 更新しておくと、次回以降の変更が標準機能で完結します。

よくある事故パターン

  • ❌ 本番ファイルで直接置換 → 想定外のレイヤーが変わって戻せない: 必ず複製してから
  • ❌ 共有ライブラリのスタイルを編集 → 参照している全ファイルが意図せず変わった: ライブラリ編集は別タイミングで合意取り
  • ❌ Variants の中まで一括置換した結果、Variants の意味付けが壊れた: コンポーネント / Variants 内の色は慎重に
  • ❌ カラースタイルがないまま大量置換 → 後で部分修正が必要になり工数倍増: 置換と同時にカラースタイルを整備

❓ よくある質問

Q: Figma の標準機能だけで全色を一括変更できますか？

「同じ色値」単位での一括変更なら Selection colors で可能です。異なる色が混在している状態を 1 操作でまとめて整理 したい場合や、近似色をグルーピングして正規化したい場合は、プラグインを使う方が現実的です。

Q: カラースタイルを後付けで適用する効率的な方法は？

Selection colors（選択範囲の色）でターゲットアイコンから同じ色のレイヤーを一括選択 →（必要なら）まとめてスタイルを当てる、という手順がお勧めです。すでにスタイル化済みの色も同じ一覧に並ぶので、未スタイル化の生 HEX 値のレイヤーだけを拾って整理できます。プラグインによっては、自動でこの作業を補助するものもあります。

Q: グラデーションを一括変更したいです

グラデーションは個別の定義として扱われるため、Selection colors では単色と同様に編集可能 です。グラデーション自体をカラースタイル化しておくと、後の変更が劇的に楽になります。プラグインでもグラデーション対応のものがあります。

Q: ライト / ダークモードの色を切り替えるには？

最もスマートな方法は Variables（Local variables）でモードを定義 し、カラースタイルから Variables を参照する構造を作ることです。既存ファイルを Variables 化するのは大きな工数ですが、長期運用ではリターンが大きい設計です。プラグインの中には Variables 化を補助するものもあります。

Q: XD から移行したファイルで色がバラバラです

XD の Assets パネル登録カラーを Figma のローカルカラースタイルとして取り込めるか、変換ツールに依存します。Pixel Fine Converter の Pro 機能を使えば、Document Colors を Figma ローカルスタイルとして自動登録できます。Assets 未登録の色は移行後に整理が必要です。詳細は XD のカラー・グラデーションは Figma でどう変換される？ を参照してください。

Q: 一括置換した後で「やっぱり戻したい」と思ったらどうすれば？

Undo（Cmd/Ctrl + Z）は実行直後のみ有効で、ファイルを閉じた後やページを変えた後は使えないことが多いです。事前に File → Duplicate でバックアップを取っておく のが最も確実です。プラグイン経由の変更は Undo が部分的にしか効かない場合があるので、特に重要です。

Q: 共有プロジェクトのスタイルを編集したら他のファイルにも影響しますか？

共有ライブラリで配布しているカラースタイルを編集すると、参照しているすべてのファイルに自動で反映 されます。意図的な変更ならメリットですが、検証が不十分な状態で編集すると広範囲に影響が及びます。ライブラリ編集は別タイミングで関係者と合意を取ってから行ってください。

🎯 まとめ

Figma の色一括変更は、ファイルの状態（カラースタイル の整備度 / 色混在度 / 規模） で最適な手段が変わります。

記事のポイント

  • 同じ色の一括変更 は Figma 標準の Selection colors で完結する
  • カラースタイルが整備されているファイル は、スタイル側を編集するだけで参照レイヤーが全更新される（最もスマート）
  • 数十色の混在 / 近似色の統合 / 複数ページ横断 は、プラグインを使う方が圧倒的に早い
  • ライト / ダーク両モード対応 は、Variables + カラースタイルの組み合わせが本命
  • グラデーションも一括変更可能、最初からカラースタイル化しておくと運用が楽
  • XD から移行した直後のカラー混在 は、Pixel Fine Converter の Pro 機能（Document Colors & Text Styles）でローカルスタイル化を自動化できる
  • 大量変更時 は必ずファイル複製でバックアップ → 小さく試す → ページ単位で進める

最も大事なのは、変更を始める前にカラースタイル の整備された状態であるかを確認すること です。カラースタイル があれば変更は一瞬、なければプラグインや手作業が必要になります。今のうちにカラースタイル を整備しておくと、次の色変更で時間を大幅に節約できます。

XD から Figma へ移行した直後の カラー混在 / Assets 未登録カラー で困っている場合は、まず Pixel Fine Converter の Pro 機能で Document Colors を Figma ローカルスタイル化するところから始めると、後続の一括変更工程が楽になります。

XD のドキュメントカラーを Figma スタイル化 Figma Community で無料インストール

Figma Communityから1クリックで追加できます

関連ページ