【Adobe XD】(対処法あり)乗算レイヤーが書き出し時に変色する

この記事は2020年10月時点での現象と、その対処について記載したものです。

書き出し前

こんな感じのクールな素材がXDのデザイン上にあったので、書き出したのですが、色が変わりました。そんな…。

書き出し後

発生条件:シェイプでマスクしていると起きる

検証したところ、「乗算の色おかしくなる問題」が発生するのは、描画モード:乗算のオブジェクトをシェイプでマスクしているときにかぎられます。

同じ乗算を使っている場合でも、マスクの有無によって書き出し結果が変わるのです。

乗算をつかった2種類のグループ
片方のグループではマスクを利用している
マスクを使っていたグループの方だけ、書き出し後の画像の色がおかしい

対処法:全部のレイヤーをマスクする

1つの画像にしたいレイヤーすべてを、1つのマスクグループに格納することで、書き出し後の画像の色が正常になります。

マスクグループの作り方を変えてから書き出すと、色が正常になった

今回冒頭でお届けした画像もレイヤーの状態をこの状態から

乗算しているオブジェクトだけがマスクグループに入っている

この状態に変更してから書き出したことで、

全体をマスクグループに入れた

無事に正しい色で書き出すことができました!

乗算が使われているデザインデータをうまく書き出しできないときは、マスクグループの作り方を見直してみてください!