スタッフブログ

今回は個人的に便利だと思うfigmaのおすすめプラグインをご紹介します。

PureImage Export

デザイン制作で、画像を角丸にしたりドロップシャドウを付ける機会は多いと思います。
ただしwebで実装する際はcssで表現するのがセオリーなので、画像を書き出す際それらを一旦解除したいときってありますよね。
とはいえ、ひとつひとつ解除するのも、終わったら元に戻さないといけないのもめんどくさい・・そういう時に便利なのがこちらのプラグインです。
角丸やシャドウを手動で解除することなく、元の状態の画像をそのまま書き出せます。

例えば、こんな画像があったとき。

まず、書き出したい画像を選択します。（複数選択もOK）
そして、figmaのプラグインから「PureImage Export」を選択して実行します。
すると、このようなポップアップが出るので、解除したいものにチェックをいれます。

今回は複数枚選択してるので「Export as ZIP」で保存します。

すると、このように任意のフォルダに角丸やシャドウ等を解除した画像を保存することができます。

便利ですね。これで角丸デザインで手間取ることもなくなります。

 

Photopea

figmaで画像の明るさや色味を調整したいとき、デフォルトの機能では微妙と感じることはないでしょうか。
そんなときに便利なのが「Photopea」です。figma上で、Photoshopと同じように画像を加工することができるプラグインです。

例えばこの画像を編集してみます。

まず、加工したい画像を選択した状態で、このプラグインを実行します。

すると、このようにPhotoshopのような画面が開くので、ほとんど同じ感覚で加工をすることができます。
トーンカーブからレベル補正まで、デフォルト機能にはない加工が可能になります。

加工が終わったら、ctrl+Sで保存します。
保存したら元画像が上書きされますので必要に応じて複製しておくといいと思います。

加工した画像がこちら。

いい感じになりました！

 

ちなみこれはfigmaのデフォルト機能で加工したものです。

がんばって加工してみましたがのっぺり感が否めず機能に限界を感じます。
明るさ等はそこそこ補正できますが、顔の模様や暗いところの細部が潰れてしまっています。

 

ついでに全部比較してみました。

 

もちろん、色調補正だけでなくぼかしを入れたりノイズを除去したりといった機能もあります。

シンプルな加工であればデフォルト機能でも十分ですが、
細かな調整が必要な画像や、より仕上がりにこだわりたい場合は、プラグインを活用するのがおすすめです。

用途に応じて使い分けてみてください。