【Figma】ベクターデータの中に二色以上の色が入ってる時、LocalVariablesで設定したモードが反映されない時がある
Figmaはベクターデータの取り扱いが苦手だなぁと感じることが多々ありますが、これも同じかな。
ダークモード対応の過程で…
local Variablesがリリースされて、ダークモード対応がめっちゃ楽になりましたよね。
以前はこんな感じで、Appearanceみたいなプラグインを使って、プロパティにLight/Darkのモードを持たせたり、カラー定義のラベルで工夫したり。。と割と一手間必要でした。
せっかくならlocalVariablesを使ってダークモード対応しよう!と頑張ってカラー定義やり直しました。
コレを利用して、その他のアイコンイメージの切り替えも楽しようぜー。と思ったのに、二色以上から構成されるベクターデータはmodeによる反転がうまくいかない!!
多分、一枚絵のVectorデータになってることが問題っぽい?
しょうがないので、レイヤーをいくつかに分けて、一つのPATH画像だけに、必ず一つの色しか持たせないようにしたらうまくいったっぽ。
具体的には背景ベクターオブジェクトと手前のベクターオブジェクトと分かれてる構造にしました。
これでOK!!と思ったけど、
あれ!?あれあれ?オレンジ色が二種類ある!(Devモードにするとわかりやすい)
これ、ベクターのレイヤーオブジェクトを全部分解しなきゃいけない??と
思って、一番左のやつは分解したんだけど、すぐ隣のやつは…あれ?問題ない。
こ!これは!?またFigmaのベクター画像レイヤー認識苦手問題では??
と気づいたので、色判定で問題のあったFigmaファイルに一旦戻って(Restoreして)、元々のベクターのレイヤー構成をしっかり見てみることにした。
ちなみに調べ方は
- 対象ベクター画像をsvgで書き出す。
- 書き出したsvgを再度Figmaに上げて読み込む
で、やったのがこちら。
なるほど。実態としては、すでに、はじめの段階から、分解されてたのね。Figma上でFlattenどこかでかました後に、ベクター内のPathに直接、色操作したために、Pathが別れてしまったのか。それはわからないけれど。
とにかく、すでにPathが全部綺麗に分解されてるものがそこにあるので、これらを使って、改めて、この状態でそれぞれのPathに色をアサインすると、ちゃんとmodeに合わせて色変えてくれるようになりました!
というわけで、改めて、今回の学びをば
Figmaでベクター画像を扱う時の注意
- ベクターデータに対してアサインする色は一つだけにとどめた方が良い。
- 複数使いたい場合はPathを分ける。
- Figmaのレイヤーパネルで一見ぎゅっと一つのベクターデータにまとまっているように見えても、実態としては別れてる時がある。
- Figma上のFlatten処理を信用しない。
Figmaさん、ベクター処理、頑張って〜〜
Discussion