【Figma】これ便利！ベクター画像を貼り付けて、画像の色変更がFigma上で自由自在に！

こんにちは！デザイナーの高山です。

弊社では以前、デザインツールに「AdobeXD」を使っていましたが、AdobeXDのサポート終了の噂が流れてから「Figma」を使い始めました。まだまだ全ての機能を使いこなせてはいない中ですが、少しずつ自分なりの使い方を見つけながら日々勉強中。

今日はそんなFigmaで普段私がデザインするときによく使うTipsの中の一つをご紹介します。

他社のデザインツールでもできるかもしれませんので、Figma以外のデザインツールを愛用されている方にも参考になると嬉しいです！

「イラストの色をちょっと変えてほしい」にスピーディーに対応

デザインが進んでいる中でのこの依頼は、デザイナー泣かせだったりしますよね。

色の好みがはっきりしているお客様からご指示いただくことが多いです。

バランスや色の効果を著しく損なうような場合は、違う色の方が良いというご提案もしますが、お客様の希望が強い場合や、バランス的に問題ない場合はデザインご提案の段階で色変更のご要望に応じることもあります。

特に、イラストをイラレなどで編集して書き出して、デザインツールに読み込んだ後に言われると、また画像の色を変えて書き出して、作り直すのかーと、ちょっと遠くを見ちゃいますよね。そんな場合に備えて、ベクターデータのあるイラストはFigma上にベクターデータごと貼り付けてしまいましょう！

（注）この方法はオブジェクトの多いイラストや複雑なイラストはあまり向かないのでご注意ください！シンプルでレイヤーや色数の少ないイラストは作業しやすいです。
色数が多かったりオブジェクトが多いイラストはイラレなどのイラスト編集ツールで一括選択して作業した方が早い場合もあります！

1.ベクターデータをコピー

まずは貼り付けたいベクター画像をイラスト編集ツール（例はAdobe Illustratorです）からコピーします。

弊社サイトにも登場するペンペンとロボ太です。（今名付けましたw）

2.Figma上にペースト

イラスト編集ツールからコピーしてきたベクターのイラストをペースト。

ちょっとそれっぽく周りにテキストを配置したり色もつけてみます。

お客様のご要望通りにトーンを抑えたイエローオレンジ系！これでバッチリでしょ！と思ったら

「お客様、やっぱりトリコロールカラーがいいんだって」。

なんだって〜？！
（あんまりないことですよ。いや、あまりないことであってほしい。）

3.Figma上でベクター画像の色を変更

お客様のご要望により色変更発生！デザイン後半では発生してほしくない作業ですね。。

ベクター画像をコピーしてきているので、Figma上で色を変更していきましょう！

ベクター画像をクリックして選択状態にすると、画面右の「デザイン」タブに「選択範囲の色」が表示されます。（画像の赤枠のところです。）
さらにその中に、「5色すべてを表示」が見えていると思います。
今回のイラストは全部で5色を使っているので、この状態だと2色隠れています。
この「5色すべてを表示」をクリックするとイラストに使われている全ての色が表示されます。