Topics

Figmaでデザインパーツを分担して作っていると、思わぬトラブルに見舞われることがありますよね。特に、コンポーネント化したアイコンの色がうまく切り替わらずに困った経験はありませんか？

この記事では、多くのFigmaユーザーが直面する「アイコンインスタンスの色が反映されない問題」について、その原因と解決策を分かりやすく解説します。

僕が作ったボタンを先輩がコンポーネント化してくれたぞ！！しかもアイコン部分も切り替えができる！！すごい！でもアイコンがたりないからどんどんアイコンをコンポーネント登録して使いやすいコンポーネントにするぞ！

僕は黙々とアイコンを作りまくりました。

あれ？なんかアイコンコンポーネントがうまく切り替わらないぞ？ 先輩と同じ作り方してるはずなのに…。なんでうまく色が切り替わらないんだろ？

それはね、君のアイコンの作り方が原因よ！

先輩！ どうすれば色が変わるようになるんですか？

ふふん、いいでしょう！ 私がFigmaのアイコン切り替えの秘訣を教えてあげる。しっかりメモして、頭に叩き込んでね！

はいっ！頑張って覚えます！

なぜ色は引き継がれるの？Figmaのオーバーライドの仕組み

figmaでボタンを作成する際に、アイコン部分をインスタンスプロパティで切り替えられるように設定するケースはよくあります。しかし、いざアイコンを切り替えたときに、設定していた色が反映されない・勝手に変わってしまうといった問題が発生することも少なくありません。

Figmaでアイコン（icon）を切り替えたときに、設定した色味が反映されない・色が変わらないといったトラブルに遭遇したことはありませんか？この記事では、その原因と解決方法を分かりやすくご紹介します。

アイコン切り替えで色がちゃんと切り替わるようにアイコン側やボタン側の設定をちゃんと確認しましょう。

まずはボタンコンポーネントの構造を確認

まずは以下のような構造で、色がオーバーライドされる状況を確認しておきましょう。

① 大元のアイコンコンポーネントは黒

② ボタンの中にインスタンスとしてコピーされた状態で色だけオーバーライド

③ この状態で別のアイコンに切り替えると、アイコンの色が白ではなくデフォルトの色に戻ってしまうことがある

tips:マスターコンポーネントとオーバーライドの関係を理解する

最も基本的な注意点は、オーバーライドしたプロパティは、マスターコンポーネントの変更が反映されなくなるということです。

オーバーライドした部分: インスタンスで色やテキストを変更すると、その部分は独立します。後からマスターコンポーネントの同じ部分を変更しても、そのインスタンスには適用されません。オーバーライドしたもの（塗りや線の色味やテキスト等）が優先されます。

オーバーライドしていない部分: 変更していないプロパティ（例:paddingやmargin）は、マスターコンポーネントの変更がそのまま反映されます。

特に注意したいのが、マスターコンポーネントのレイヤー構造を変更した場合です。レイヤー名を変えたり、レイヤーを削除して新しいものを追加したりすると、Figmaはそれを別の要素だと認識し、インスタンスのオーバーライドがリセットされてしまうことがあります。

以上のことを踏まえてアイコンの色がなぜ切り替わらないのか原因を探っていきましょう。

原因1：「塗り（Fill）」と「線（Stroke）」の設定が混在している

一見同じ見た目のアイコンであっても、「塗り（Fill）」と「線（Stroke）」はFigma上ではまったく別のプロパティとして扱われます。そのため、塗りを使って表現されたアイコンから、線の太さで描かれたアイコンに切り替えると、色のオーバーライドが正しく反映されないことがあります。

例：

アイコンA

アイコンB

• アイコンA：塗り（Fill）で構成されたアウトライン化されたアイコン
• アイコンB：線（Stroke）で輪郭が描かれているアイコン

このように、アイコンの描き方が異なると、色の適用結果も変わってしまうため、表現方法を統一しておくことが重要です。アイコンBのアイコンをクリックするとFillは白い色が指定されていますが、このアイコンコンポーネントは線でしか構築されていないので色が置き換わりません。ただ実は塗りの方にはしっかり白が反映されています（塗り要素がないので白は行き場を失ってますね…）。

✅ 対処法：
アイコンはすべて「塗り」で作成するルールにしましょう。線で描いたアイコンは、必ずアウトライン化（command+shift+O）して「塗り」のオブジェクトに変換します。これにより、実装時にも扱いやすくなるメリットがあります。

弊社の場合実装する時はsvgのpathをcss変数に入れたり、Astro Iconで組み込んだりするので、すべて塗りで統一してます。

線（Stroke）のままだと、アイコンを拡大・縮小したときに線の太さが変わってしまい、デザインが崩れる原因にもなります。特別な理由がない限り、アウトライン化して「塗り」に統一するのがベストよ！

線のみで構築した場合、アイコンの拡大縮小した場合に線のサイズはそのままになってしまいます。矢印などの簡易なパスのものであれば問題も少ないですが複雑なアイコンですと12pxでは潰れてしまったり80pxにしたら逆に間延びしたデザインになってしまう場合が多いです。

線で構築したアイコンはサイズ変更すると線の太さまで変わらないのでアウトライン化するのが一番良いです。アウトライン前のものを残したい場合はコンポーネントの近くに元データを置いておきましょう。

線（Stroke）で構築したものも結合したら塗り（Fill）に変更されますがその場合も一部分のみ大きさが変わらないなどの不具合が出ることが多くなります。

原因2：レイヤー名が一致していない

Figmaでは、コンポーネントのインスタンス切り替え時に同じレイヤー名を持つ要素に対して、スタイルやプロパティが引き継がれるという仕様があります。

例：

アイコンA

アイコンB

• アイコンAのベクターのレイヤー名：Vector
• アイコンBのベクターのレイヤー名：Vector2

このようにレイヤー名が異なると、Figmaは「別のもの」と判断し、オーバーライドしたスタイルがうまく適用されません。

✅ 対処法：アイコンで使用するレイヤー名を統一（例：すべてVector）

とりあえず、色をつけたいパスのレイヤー名は全部同じ名前にしておこうね！

原因3：レイヤー構造（階層）が異なる

レイヤー名を統一してもうまく切り替わらない場合があります。その場合はレイヤー構造の違いなどが関係しているかもしれません。インスタンスの切り替え元と切り替え先で、レイヤー数や構造が異なるとプロパティが正しくマッピングされないことがあります。ただし、同じレイヤー名であれば多少の階層の違いは問題ないケースもあります。

例：

アイコンA

アイコンB

アイコンC

• アイコンAは「Vector（path）」アウトライン化し1つのベクターにまとめる（基本となるアイコン）
• アイコンBは「Flame（Flame） > Vector（path）」という階層 → OK（パス名「Vector」に色が引き継がれる）
• アイコンCは「Vector（Flame） > Flame（path）」という構造 → NG（Flame名「Vector」に設定された色の変化が現れる）

このように、レイヤー名「Vector」がグループを内包している構造では、スタイルの当たり方に注意が必要です。また同じ名前でも色が変わるのは一番上の階層のみで（アイコンC参照）2階層目のVectorには色の変化は反映されない。

✅ 対処法：レイヤー名だけでなく、実際にスタイルが当たるパス構造が一致するように設計すると、トラブルを回避しやすくなります。

ベクター名が合っていれば、少し構造が違っても大丈夫なことが多いわ。でも、チーム開発では後から参加する人のためにも、できるだけ内部構造は統一しておくと親切よ。

原因4：元になったコンポーネントと塗り「塗り（Fill）」や「線（Stroke）」の数が異なる

1色の場合はレイヤーを結合したりレイヤー構造、レイヤー名を統一すれば心配はありません。しかし、元となるコンポーネントと「塗り（Fill）」や「線（Stroke）」の数が異なったアイコンなどに切り替える場合は、一部の色だけ切り替わり、他の色はそのままの状態になり、意図通りにいかないケースもあります。基本的にはアイコンは１色統一にしましょう。または２色使う必要がある場合は２色アイコン用のアイコンバリアブルを別で作るなど工夫が必要です。

✅ 対処法：

• 単色、複数色のアイコンを混ぜない。
• 複数色アイコンが必要な場合はバリアブルでアイコンコンポーネントを複製し２色アイコン用のものを作成。
• 複数色アイコンを利用する場合は色のオーバーライドは基本的に使用しない。

単色アイコンをオーバーライドしても、1つの色しか変更できないから気をつけてね！

原因5：ブレンドモードやマスクの影響

アイコンにマスクや特殊なブレンドモード（乗算など）が使用されていると、色を変えても見た目に変化が現れないことがあります。

✅ 対処法：
マスクやブレンドモードを使っている場合は、オブジェクトを結合・統合（Flatten）するなどして、見た目通りの単純なパスオブジェクトに変換してからコンポーネント化しましょう。

この場合も、最後はアウトライン化したりしてシンプルなパスにしておくと安心よ。乗算を使っている場合はライブトレースなどでしっかりパス化しておくと安心よ。

検証まとめ

実際に確認された色反映の挙動

以下は、さまざまなアイコンをボタン内で切り替えた際に確認できた色反映の挙動です（画像参照）。

運用Tips

検証からわかったポイント：

• レイヤー名と構造が一致しているかが非常に重要
• 塗りの指定はColor StyleまたはVariablesで管理が安心だが必ずしも指定する必要はない
• アイコン作成は実装のしやすさも考慮して塗りに統一（線だと拡大縮小の時に大きさがずれがちなのでアウトライン化がおすすめ）
• 既存アイコンに要素を追加したい場合は今反映されているバリアントを編集せず新しいアイコンを作り一つ一つ差し替えていくほうが色トラブルを避けやすい

デザイン作成から実装までにスムーズに進めるためのポイント：

• フレームのサイズを揃える（24px,40px,80pxなどバラバラのサイズにしない）
• アイコン部分は拡大縮小にするとアイコンサイズの拡大縮小に応じてサイズをいい感じにリサイズしてくれる（実装はもちろんデザイン上でもデータの取扱はかなり楽になります）

さらに弊社の実装上のルール：

• 色は真っ黒#000にする（Astro Iconは元データが黒じゃないと色変更が効かない）

運用フェーズで起こりやすいトラブル：

• 既存アイコンの修正は慎重に：運用中に既存アイコンへ要素を追加したり修正したりすると、意図せず構造が変わり、色の反映トラブルが起きがちです。その場合は、既存コンポーネントを直接編集せず、ルールを守って新しいアイコンコンポーネントとして作成し、差し替える方が安全です。

まとめ

わかったかしら？ アイコンを作る時は、基本的にこの3つのルールを守ればOKよ！ 1. 描き方は「塗り」に統一する（線はアウトライン化！） 2. 色を付けたいパスの「レイヤー名」を統一する 3. アイコンの「レイヤー構造」をできるだけシンプルに保つ それと、運用フェーズで特に気をつけたいのが既存アイコンの修正ね。修正の過程で構造が変わってしまい、色が反映されなくなるトラブルがよくあるの。 だから、既存のアイコンを直接変更するんじゃなくて、ルールを守って新しいコンポーネントを作り、そちらでアイコンを修正するの。その後、ボタンコンポーネント側で古いアイコンを新しいアイコンに差し替えれば、色のトラブルはかなり少なくなるはずよ。

ありがとうございます！ これで僕もアイコンマスターです！ 先輩が教えてくれた方法でコンポーネントを作ってみます！

アイコンのインスタンスを切り替える際、見た目は同じでも内部構造が違うだけで、色の反映はうまくいきません。

今回ご紹介したポイント、特に「塗りに統一」「レイヤー名を統一」という2点を徹底するだけで、ほとんどのトラブルは防げるはずです。

それでもうまく切り替わらない場合は内部構造の違いや親レイヤーに同じ名前が付いている場合が多いです。

この記事が、あなたのFigmaでのデザイン作業をより快適にする手助けとなれば嬉しいです。