Works
Blog Recruit Contact 無料でAI診断する
デザイン
calendar_today
A.E. A.E.

【Figma】特定の色を一括変更するには

Figmaで特定の色を一括変更する方法をステップごとに解説します。さらに、ライブラリーにカラーを追加する方法も紹介します。

【Figma】特定の色を一括変更するには

以前の記事にてXDで特定の色を一括変更する方法を解説しましたが、今回はFigmaで特定の色を一括変更する方法をご紹介します!

手順

STEP 01

まず、アートボードやフレームなど、変更したい範囲をすべて選択します。
すべて選択すると、右側のパネル(赤枠部分)に使用中のカラーが一覧で表示されます。

STEP 02

変更したい色を選択し、新しい色に変更します。
選択した色が使用されているすべての要素が、自動的に更新されます。

Figmaではライブラリーにカラーを追加しなくても一括変更が可能ですが、プロジェクトの管理がしやすくなるため、ライブラリーに追加することをおすすめします。

カラーをライブラリーに追加する方法

  1. 選択中の色を右クリックし、「スタイルを作成」を選択します。
  2. 「+」アイコンをクリックし、新しいスタイルを作成します。
  3. 必要な項目を入力し、スタイル名を設定します。スタイル名を設定しない場合、カラーコードでスタイルが追加されます(後から変更も可能です)。

まとめ

いかがでしたか?
Figmaを使用すれば、プロジェクト内の色を簡単に一括で変更することが可能です。
効率化によってデザインの柔軟性を向上させ、クオリティを高めていきたいですね。

この記事が皆様のデザイン作業の一助となれば幸いです。

A.E.

A.E.

Designer

ユーザー体験の細部にこだわり、心地よいデザインを。

View Profile arrow_outward

Related

あわせて読みたい

【連載】Web制作者のための画像生成AI完全ガイド 2026 ー 第3回:Web制作現場での実践活用ガイド(最終回)
デザイン
デザイン

【連載】Web制作者のための画像生成AI完全ガイド 2026 ー 第3回:Web制作現場での実践活用ガイド(最終回)

画像生成AIをWeb制作で実践活用するためのガイド。Gemini 3 Proで日本語テキスト入りバナーを作る手順、ブログ・LP・EC・プレゼン別の活用法、著作権・商用利用の注意点を解説。AIと人間のハイブリッド制作ワークフローも紹介。連載最終回。

【連載】Web制作者のための画像生成AI完全ガイド 2026 ー 第2回:主要6ツール徹底比較 ― 機能・料金・特徴
デザイン
デザイン

【連載】Web制作者のための画像生成AI完全ガイド 2026 ー 第2回:主要6ツール徹底比較 ― 機能・料金・特徴

ChatGPT、Gemini、Midjourney、SD、FLUX.2、Adobe Fireflyの6大画像生成AIを徹底比較。機能比較表・料金比較表付きで、日本語テキスト精度、フォトリアリズム、商用利用安全性などを一覧化。用途別の選定フローチャートで「結局どれを使うべき?」に回答。