【Figma】ベクターデータの中に二色以上の色が入ってる時、LocalVariablesで設定したモードが反映されない時がある

Figmaはベクターデータの取り扱いが苦手だなぁと感じることが多々ありますが、これも同じかな。

ダークモード対応の過程で…
local Variablesがリリースされて、ダークモード対応がめっちゃ楽になりましたよね。

以前はこんな感じで、Appearanceみたいなプラグインを使って、プロパティにLight/Darkのモードを持たせたり、カラー定義のラベルで工夫したり。。と割と一手間必要でした。

せっかくならlocalVariablesを使ってダークモード対応しよう！と頑張ってカラー定義やり直しました。

コレを利用して、その他のアイコンイメージの切り替えも楽しようぜー。と思ったのに、二色以上から構成されるベクターデータはmodeによる反転がうまくいかない！！

多分、一枚絵のVectorデータになってることが問題っぽい？

しょうがないので、レイヤーをいくつかに分けて、一つのPATH画像だけに、必ず一つの色しか持たせないようにしたらうまくいったっぽ。

具体的には背景ベクターオブジェクトと手前のベクターオブジェクトと分かれてる構造にしました。

これでOK！！と思ったけど、

あれ！？あれあれ？オレンジ色が二種類ある！（Devモードにするとわかりやすい）
これ、ベクターのレイヤーオブジェクトを全部分解しなきゃいけない？？と

思って、一番左のやつは分解したんだけど、すぐ隣のやつは…あれ？問題ない。

こ！これは！？またFigmaのベクター画像レイヤー認識苦手問題では？？

と気づいたので、色判定で問題のあったFigmaファイルに一旦戻って（Restoreして）、元々のベクターのレイヤー構成をしっかり見てみることにした。

ちなみに調べ方は

1. 対象ベクター画像をsvgで書き出す。
2. 書き出したsvgを再度Figmaに上げて読み込む

で、やったのがこちら。

なるほど。実態としては、すでに、はじめの段階から、分解されてたのね。Figma上でFlattenどこかでかました後に、ベクター内のPathに直接、色操作したために、Pathが別れてしまったのか。それはわからないけれど。

とにかく、すでにPathが全部綺麗に分解されてるものがそこにあるので、これらを使って、改めて、この状態でそれぞれのPathに色をアサインすると、ちゃんとmodeに合わせて色変えてくれるようになりました！

というわけで、改めて、今回の学びをば

Figmaでベクター画像を扱う時の注意

• ベクターデータに対してアサインする色は一つだけにとどめた方が良い。
  • 複数使いたい場合はPathを分ける。
• Figmaのレイヤーパネルで一見ぎゅっと一つのベクターデータにまとまっているように見えても、実態としては別れてる時がある。
  • Figma上のFlatten処理を信用しない。

Figmaさん、ベクター処理、頑張って〜〜