Figmaでモザイクをかける方法。Pixelsでさらっと簡単に。ブログメモ デザイナー、コーチ、ディレクター|井川

igawa design.

Memo

Pixels。Figmaでモザイクをかける方法。素晴らしく簡単に。

です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。

Figmaのモザイクプラグイン「Pixels」とは?

ネット上に写真や画像をアップする際、個人情報や特定の箇所にモザイクをかけたいことがある。

Figmaにはデフォルトでは備わっていないようなので、プラグインを探してみたところ、「Pixels」というシンプルで素敵なプラグインが見つかった。

Pixelsは、ただモザイクをかけられるだけでなく、ベクター画像としてモザイク処理ができる。つまり、SVG画像として書き出せる。

モザイク用プラグイン、Pixels。

作者:Fabien さま
プラグインサイト:Pixels

Figmaでモザイク画像を作成してくれるプラグイン、「Pixels」。

英語だが、シンプルな単語のメニューばかりなので普通になんとかなる。


Pixelsのインストールと使い方。

petsインストールは簡単。数ステップで。

インストール方法。

インストールは上部メニューの「Resources(リソース)」から、「Pixels」で検索する。

Pixelsのインストール方法。

「Pixels」のパネルが表示されたら、「Run(実行)」をクリック。

Pixelsのインストール方法。

右クリックメニュー、または、プラグインの配布サイトPixelsからでもインストール可能。


「Pixels」パネルの開き方。

「Main menu(メインメニュー)」 > 「Plugins(プラグイン)」 > 「Pixels」で開く。

Pixels。Figmaのモザイク用プラグインの使い方。

右クリックメニューからでも可。


「Pixels」のパネルでモザイクの設定をする。

モザイクを調整するシンプルなパネルが現れる。

色数の少ないイラストよりも、色数の多い写真を使った方がモザイクがかかりやすい。

白黒にしたいときは、デザインパネルの「Fill(塗り)」 > 「Image(画像)」の、Saturation(彩度)を下げると良い。)

Pixels。Figmaのモザイク用プラグインの使い方。

Photo by:Tamas Pap

画像を見ながら、モザイクの具合を1〜80の間でスライダーをドラッグして調節する。

Pixels。Figmaのモザイク用プラグインの使い方。

「Vectorize」をクリックするとベクター画像へ変換される。Vectorizeされると、右横にベクター画像が出来上がる。

Pixels。Figmaのモザイク用プラグインの使い方。


Pixelsによるモザイク処理。

Pixelsのパネルを「×」で閉じるとラスター画像が1枚、「Vectorize」をクリックするとラスター画像とベクター画像の計2枚が作成される。

以上でモザイク処理は完了。後は右横のパネルから、Export(書き出し)をすると、JPGやSVGなどでモザイク画像が書き出される。

必ずグループ化をしてから書き出しを行う。グループ化しなければ別々の画像として書き出されてしまう。

Pixels。Figmaのモザイク用プラグインの使い方。

petsモザイク処理された画像が完成。

Pixels。Figmaのモザイク用プラグインの使い方。


特定の箇所にモザイクをかけたい場合は、2枚の画像を組み合わせる。

モザイクをかけたい画像全体にモザイク処理を行う。

4枚の画像が表示されているが、上記の画像が残っていただけで特に4枚必要というわけではない。紛らわしくてごめんなさい。

Pixels。Figmaのモザイク用プラグインの使い方。

モザイク部分は長方形ツールなどでマスクする。

モザイク処理がされた画像を、マスクする。(今回は目の部分。)

Pixels。Figmaのモザイク用プラグインの使い方。

そして、元画像の上にモザイク画像を配置する。

マスクされた目の部分の長方形の画像を、元画像の上に配置する。

Pixels。Figmaのモザイク用プラグインの使い方。

目の部分だけにモザイクがかかった画像が完成。

2枚の画像により、特定の箇所にモザイク処理がされる。後はこの2枚をグループ化して書き出す。

Pixels。Figmaのモザイク用プラグインの使い方。

今回はたまたまUnsplashで出会った可愛らしいワンちゃんの写真を使用したが、もちろんワンちゃんは特に悪いことはしてない。

Figmaでモザイクをかけられるんだって。

参考メモ。

参考:Figmaがダークモードに対応。背景設定も簡単で、目に優しい!


Figma プラグイン関連メモ。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..

    免責事項について

    • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
    • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
    • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。

    個人情報について

    • 個人情報はお問い合わせやお客さま対応のみでの利用とさせていただいております。
    • こちらから営業目的でご連絡することはありません。
    • ご本人様の了解や、法に基づいた理由がない限り、第三者へ開示することはありません。