見出し画像

【2020年版】リアルに作業を超効率化してくれたFigmaの必須プラグイン10選!!

今回は年末ということもあり、2020年に仕事でリアルに使い倒しまくったFigmaのプラグインを10個に絞ってまとめてみました!

こちらの記事はデザインの制作スピードをあげたい人向けに書いています。そのため一見面白そうだし革新的だけど実際コレどこで使うの?みたいなプラグインは今回あえて紹介してません。全てリアルに仕事の中で使い倒しているスタメンのプラグインのみに絞っています。

では早速紹介していきます!

01:Unsplash

画像1

もはや言わずもがな、有名なフリー写真素材サイトUnsplashのプラグインです。圧倒的な使用頻度、おそらく一番使っているプラグイン

以前はUnsplashのサイトで素材を探してDLしてFigmaにぶち込むというスタイルでしたが、このプラグインのおかげでFigma上で直接写真素材を探すことができるようになり、めちゃくちゃ効率が上がりました。これがなくなったらマジでつらいです(´・ω・`)


02:UiGradients

画像2

こちらも使わない日はないんじゃないかくらいに使い倒したプラグイン。ワンクリックで様々なグラデーションを反映してくれるグラデセットです。

即戦力のグラデーションが揃っているので、かなり重宝してます。自分でグラデつくるよりもイケてる見た目にしてくれます。使い方も幅広く、テキストに反映させたり、あしらいのパーツに反映させたり、オーバーレイで写真の色味を変えたりと本当に様々な場面で大変お世話になりました♪


03:Better Font Picker

画像3

こちらも有名なプラグインですね。普段UIデザインではNoto Sansばかり使っている私ですが、バナーやTwitter用の画像などグラフィックよりの作業をする時は大活躍してくれました。どのフォントがどんな形か見ながら探せるので助かります。フォントの数がめちゃめちゃあるので、いちいちい反映させて確認して探してたら日が暮れてしまう。そんな悩みを解決してくれた素晴らしいプラグインです。


04:RemoveBG

画像10

これもかなり使った!!ワンクリックで被写体を切り抜いてくれる超絶便利なプラグインです。最初使った時は「いやいや、言うてもどうせ精度微妙なんだろうな〜〜」なんて疑っていましたが、結果こやつは相当優秀でした。正直自分でPhotoshop使って切り抜くよりキレイなんじゃないか?というレベルでした。(私の技術が低いだけ?)これは厳しいかな〜?というそこそこ複雑な写真でもキレイに切り抜いてくれます。本当にすごい。

おかげで重たいPhotoshopを起動する機会もぐんと減り、ストレスも激減しました!ありがとうRemoveBG!

注意点として、無料で切り抜ける数に限りはあるのですが、月50枚とかなり余裕があるので今のところは無料の範囲で問題ないです。もし有料プランのみになっても課金して使いたい必須プラグインです。


05:Blobs

画像5

予想に反して使う頻度の高かったBlobs。こちらはうにょうにょした円形のオブジェクトをランダムで生成してくれるプラグインです。複雑度や頂点の数を調整することもできます。

インストールした当初はそんなに使う場面あるかな?と思っていたのですが、実際は仕事でかなり使いました。

02で紹介したUiGradientと組み合わせると最強です。単品であしらいにつかったり、上に切り抜いた画像を置いて背景に使ったり、写真をその形に切り抜いたり、このプラグインのおかげでただの円を使うよりも複雑でリッチな可愛いデザインが簡単につくれるようになりました。


06:Skewdat

画像5

これはバナーをつくるときなどグラフィック系の仕事で大活躍してくれたプラグインです。オブジェクトを水平・垂直どちからを軸にして斜めに傾けた形に変形させてくれます。

特にデフォルトで斜体が入っていないフォントを斜体っぽく変形させて勢いがある雰囲気を演出するのに使ってました。アウトライン化しなくてもテキストに使えて後から文字の打ち替えができるとこも優秀です。Figmaでバナー制作をしている人には是非入れておいてほしいプラグインです。


07:Split shape

画像6

これもかなり使った!!オブジェクトを設定した数値にそって切り分けてくれるプラグインです。列・行・余白を調整できるので、WEBデザインのレイアウトをつくる時にかなり重宝しました。自分でレイアウトを組もうとするとそこそこ時間がかかりますが、このプラグインを使えば瞬殺です。


08:Sorter

画像7

これは地味にお世話になったプラグイン。Frameを選択した設定に沿って並べ替えてくれます。スライドをつくっている時などプレビューでみるとFrameの順番が途中から狂ってしまってイライラ!なんてこともありましたが、このプラグインのおかげでFrameの並び替えが瞬殺なので助かりました。これとFigma標準機能であるRename機能をセットで使うことが多かったです!


09:Vectary 3D

画像8

Figmaでこんなことまで出来るのか!と驚かされたプラグイン。PCやスマホ、タブレットなどの3D素材にフレームを当て込んで即席モックアップがつくれてしまうプラグインです。

バナーなどでモックアップを入れたい時、もしくはその仮当てなどで使ってました。モックアップの素材を長い時間かけて探してPhotoshopで開いて画像を読み込ませて…という面倒な一連の作業がいらなくなったのはかなりでかいです。起動がちょっと重いのがたまに辛いですが、それを考慮しても入れておくべきプラグインだと思います。


10:Able

画像9

こちらは私がメンターをやらせてもらっているデイトラのデザインレビューの時にかなり使ったプラグインです。2つのオブジェクトを選択するとコントラスト値とAAなどの評価を出してくれます。

デザインを始める時にカラーパレットを作成しますが、このパレットで進めて大丈夫かな?と不安な時にサクッとコントラスト値を調べられるのでとても便利でした。


さいごに

今回は仕事中に使用頻度が高いものに絞って10個のプラグインを紹介させていただきました。その他にも使用頻度は低いものの、デザイン制作を助けてくれた優秀なプラグインがいっぱいあります。こちらもまた別の機会に紹介できたらいいなと思っておりますのでお楽しみに♪

Figmaに関するお役立ちツイートを日々発信しているので、良かったらフォローお願いします💛

それではまた!

読んでいただきありがとうございます!デザイナーのためになる記事を書けるよう頑張ります(^◇^)