Figmaで画像やアイコンの色を変更する方法

本記事では、Figmaで簡単にアイコンの色を変更する方法について解説します。

まずは、作業の様子をGIFにしましたので確認ください。めんどくさいのかなぁと思っていましたが非常に簡単にできるので覚えておくとなにかと便利です。

では、どのようにやるのかを説明していきます。

アイコンを準備する

色を変更したいアイコンを準備します。

僕はよくこちらのサービスからアイコンをダウンロードして使っています。
※実は下のサービスだとダウンロードの段階で、アイコンの色を変更できちゃうのですがまぁね。

ICOOON MONO (https://icooon-mono.com/)

Figmaで作業

画像を貼り付けます。

アイコン画像と同じサイズで図形を作成します。

図形とアイコンを同時選択して、“Use as mask”を選択します。

そうするとマスクされた状態になります。

あとは、図形の方を選択すれば、Fillの部分から好きな色を選択することができます。

まとめ

Figmaでアイコンを色を変更する方法について解説しました。

アイコンの色を変更したいけど、どうやるんだろうって方は是非こちらの記事を参考にしてみてください。

これからWebデザインについて学んでみたい人には、デイトラのデザインコースがオススメです！
Figmaを使ってWebデザインをしていくので、モダン企業でWebデザイナーとして働きたい人にも相性が抜群です。（モダンな企業はFigmaを採用しているところが多い）

ちなみに僕も受講しております。こちらが体験記になります。