🎨

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

2023/08/12に公開

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さん、ベクター処理、頑張って〜〜

Discussion