こんにちは、デザイン×エンジニアリング×ディレクションをベースに「新しい価値観」を創造するクリエイティブ集団、crage（くらげ）株式会社のデザインチームのKです！

今回はcrageデザインチームのメンバーから聞いた、オススメのFigmaプラグインをご紹介いたします。

現状、crageではFigmaとXDの2つのデザインツールを使っています！
チーム内でもXDをメインに使っていてFigmaはまだ使い始めて間もないというメンバーもいるので、これからどんどん使ってみたいプラグインや既にメインで使っているメンバーにはいつも使っている便利なプラグインなどたくさんのおすすめプラグインをご回答いただきました。
いくつかのジャンルに分けてご紹介いたします。
ぜひ、チェックしてみてください！

〜画像編〜

Unsplash 

フォトストック『Unsplash』の画像を簡単に挿入できるプラグインです。

Kさんのおすすめポイント：
『Unsplash』は、クオリティの高い画像が商用、非商用問わず無料で使えるサービスなので、このプラグインがあればFigma上で使えるのは最高です！画像の検索、挿入がとても楽になります。何より簡単に挿入できるのでとりあえずそれっぽい画像とか置きたい時のダミー画像としてもよく使ってました。

Insert Big Image

Figmaにサイズの大きい画像を縮小せずにインポートするプラグインです。

Hさんのおすすめポイント：
ページ一枚が縦に長いカンプ（SPだととくに）をFigmaに添付すると、ガビガビになっちゃうんですよね。ちょっと投影したいときとか不便。
そんなときに大変便利でした。

Remove BG

Figma上で画像の背景を切り抜けるプラグインです。

Aさんのおすすめポイント：
背景が複雑な画像については精度が落ちますが、FigmaでWFを引いたりアイデア出しなどを行うことも多いと思うので、そういった場面ではとても重宝するかと思います。ただ、このプラグインを使用するにはアカウント登録とAPI連携が必要なので、そこはちょっと面倒だなと思いました。使い方はこちらの記事で紹介しているので是非試してみてください。
Figmaで写真やイラストの背景を簡単に切り抜き・透過する方法 | wentz-design.com

〜アイコン編〜

Iconify

アイコンセット10万個以上の素材をベクター形式でFigmaに追加できるプラグインです。

Kさんのおすすめポイント：
アイコン探すのめちゃくちゃ楽です！！アイコンの数も多いので、よっぽど特殊でない限り大体見つかります。インポートしたアイコンを見失ってしまうことがたまにあるんですがこれはきっと私の使い方の問題。笑

Icons8

3万点以上ものおしゃれなアイコンが揃ったアイコン素材を追加できるプラグインです。

Aさんのおすすめポイント：
アイコンをサクッと探して追加できるのでおすすめです。アイコンはかなりの頻度で使用するので毎回いちいち検索してもってくるととても大変なので、こちらを入れておくと便利だと思います。

〜装飾編〜

Blobs 

ランダムな流体シェイプを作成してくれるプラグインです。

Aさんのおすすめポイント：
きれいな流体シェイプを簡単に作成することが出来ておすすめです。流体シェイプってベジェ曲線をつかって自作するときれいに作るのがけっこう難しいし面倒だと思います。そこでこのBlobsを使うとなんとFigma上で簡単にきれいな流体シェイプが作れちゃいます。是非使ってみてください。

Nさんのおすすめポイント：
手書きのパスで作ると地味に大変ですが、Figma上でうねうねシェイプが作れるので便利。色をつけて端に置いたり、写真をマスクしたり、サッと差し込むだけで柔らかい雰囲気が出るので、何かしらアクセントをつけたい！という時の助けになります。

Mesh Gradient 

綺麗なメッシュグラデーションをFigma上で作成できるプラグインです。

Aさんのおすすめポイント：
グラデーションにこだわりたい時や少し奇抜なデザインを求められる場面などで活躍すると思います。いちいちAdobe Illustratorなど他のアプリを立ち上げずともFigma上で完結するのでとても便利です。

〜GIF編〜

GiffyCanvas

GIFアニメが簡単に作成できるプラグインです。

Hさんのおすすめポイント：
GIFラフ作成をする時に利用しています。
SP実機でみながら調整とかがしやすいので、便利です。
ただ、やっぱり解像度の問題などはあるので、お清書はPhotoshopで実施しています。

〜フォント編〜

Better Font Picker 

フォント選択時にプレビューが表示されるプラグインです。

Japanese Font Picker

フォント選択時にプレビューが表示されるプラグインです。（日本語フォント）

Iさんのおすすめポイント：
FigmaではAdobe IllustratorやPhotoshopのようにプレビューが表示されずフォント名のみのため、このプラグインを入れておくとフォント選びの時に便利です。日本語フォントにも対応できるようにJapanese Font Pickerも入れています。

〜作業を楽にする編〜

html.to.design 

他サイトのデザインをまるまるFigma上にデザインを起こしてくれるプラグインです。

Hさんのおすすめポイント：
URL入れると、そのままデータにおこしてくれて簡単です。
・模写したものと、実際のデザインを重ねて差分を見る時
・XD→Figmaへの乗り換え
・UIパーツの参考あつめをデータでしたいとき
などに超便利です。
Iさんのおすすめポイント：
Figma練習やトレース練習にも活躍してくれると思います。

Redlines

要素に対してサイズを記載してくれるプラグインです。

Hさんのおすすめポイント：
デザインが実装指示書とイコールになりつつある今日このごろ。
とはいえ、意図せずずれてることありますよね、、なので、指針となるガイドライン的なデザインが必要。
margin別にvariantsを作成していたのですが、どのエリア？が不明確になりやすいことも。
そんな時にめーちゃ便利です。めーちゃ。作成してくださった方に感謝！

Paginate

ページナンバー付与や連番で数字を振ってくれるプラグインです。

Nさんのおすすめポイント：
資料作成することが多いので、出来上がった資料にページ番号を流し込む際に使用しています。事前に番号を流し込むコンポーネントを登録し、指定したコンポネをプラグインパネルでカチッとクリックすればOK。
ただ、番号を表示させたくないフレームにもページ用コンポネを設置しておかないと、以降の番号がずれるのがちょっと面倒。

Chart

様々なグラフ・チャートを作成できるプラグインです。

Hさんのおすすめポイント：
Figmaでバナー作成なども行う必要が出てくる今日このごろ。
グラフを作成してくださいってこともあるんですよね。
雰囲気で作ると嘘のデータになっちゃうので、精緻につくるとなると、やっぱりデータ連携してグラフ起こしたい。
そんな時に大変便利です...! csvも読み込めちゃう。

Find and Replace

検索置換してくれるプラグインです。

Kさんのおすすめポイント：
テキストの差し替えとかあった時に大活用しています！作ってくれた人ありがとうって思っています！(Figmaの機能としてあってくれよと思うところですが笑)

Iさんのおすすめポイント：
表記ゆれの統一に便利だなと思っています。

Autoflow

画面遷移図やフローチャートをつくるときに線を自動で引いてくれるプラグインです。

Hさんのおすすめポイント：
画面フロー図として利用したい時に便利。そのまま画像として書き起こして、PRD(プロダクト要求仕様書)に添付できたりして便利。

最後に

いかがでしたか？
今回はおすすめのFigmaプラグインについてご紹介させていただきました。

Figmaをこれから使ってみたい！Figmaを使い始めたけど痒い所に手が届かなかった、プラグイン多すぎて何から使い始めればいいかわからないという方はぜひこの記事を思い出して参考にしてみてくださいね。

crageでは現在メンバーになっていただける方を募集中です。
ご興味ある方はぜひエントリーください！

新たな才能、求めています。

デザインチームのページはこちらから