実践でちゃんと使う。Figmaプラグイン機能13選!

実践でちゃんと使う。Figmaプラグイン機能13選!

2021年7月30日

デザインツールをPhotoshop→XD→Figmaとデザインツールも渡り歩いてきました。

Figmaにしてから実践で使用する大感動ツールを厳選して13個ご紹介します!

テキスト編

1.Better Font Picker

これ無しでは生きられないかもしれない!
Figmaはとにかくフォントが探しにくい!英語だし何言ってるかわからない!
このプラグインは表示したいテキストでフォントをプレビューしてくれます。
しかもフォント名の部分一致検索も可能なので(ただし英語)、フォント選びがはかどります。
ただ、目星をつけているときには便利だけど
本当にフォントを選びたいとなるとまだまだイラレなどでプレビューして探している自分がいます…。

2.SkewDat

テキストを斜めに加工してくれます。
何がすごいって、斜めにしてもテキストは編集可能なんです。
こういうのって適用したらアウトライン化されているイメージがあったのですが、
可変可能なところが本当に素敵です。バナー作成なんかやディティールの作り込みにも使えます。

3.arc

テキストをアーチ状に加工してくれます。
これは適用すると文字が一文字ずつ切り離されてアウトライン化されるので注意が必要ですが、
適用するテキスト文字とは別に加工した文字を生成してくれるのと、プレビューも出来るので安心です。
ただ、100%にした時にプレビューでは円になっていても適用すると円にならないのが悩み…
どなたか解決法あればお教えいただけると嬉しいです。(文字数が足りないのか?)

4.Google Sheets Sync

Figma Pluginの「Google Sheets Sync」を利用すると、スプレッドシートの内容をFigmaのデザインに反映することができます。
www.wakuwakubank.com

大量のテーブルデータをデザインに入れ込む時にとても便利でした…
スプレッドシートと連携するだけ!レイヤー名を合わせるなどの細かい設定は必要ですが、かなり時短になります。

5.Nisa Text Splitter

複数行の文章をそれぞれ切り離して使用したい時にとても便利なプラグイン。

装飾・加工編

6.Feather Icons

ベクターベータなので先の太さも自由に変更可能で、編集もできるとても便利なアイコンのプラグイン。
数は少ないですがWebデザインやアプリで使用するようなアイコンは最低限揃っているので便利です。

7.Unsplash

Unsplashの画像をFigmaから検索して、写真の入れ込みが出来るプラグイン。
お客さんの提供素材があるときには基本的には使う場面がありませんが、アテ画像や、素材を使用する必要がある場合にはとても重宝するアプリです。

8.Artboard Studio Mockups

このプラグインも魔法みたいなプラグインで大好きです。
モック画像にデザインを入れ込む際に、アートボードと連動していて勝手に画面にはめ込んでくれます。
モックもiPhoneやApplewatchなど様々な種類が用意されておりとても便利です。

9.remove BG

Figmaで一番の神アプリを選べと言われたら、このプラグインかもしれない…というもの
画像の背景を取り除いてくれます。すごすぎ!!!!

10.uiGradients

グラデのパレットを表示してくれるプラグイン。
配色に悩んだときなどもとても参考になります。ワンクリックでグラデを反映してくれるのもいいですね!

11.Noise

少しマニアックなプラグイン。ノイズ画像を生成してくれます。デザイン時の背景に少し質感を入れたいときなど、素材を探さずに使用できるのでとても便利です。

12.Dot Grid

こちらも同じく、ドットを作成してくれるプラグインで、背景画像やちょっとしたあしらいに使えます。しかし、画像ではなくシェイプで作成されるので大量に使うとデータが重くなる可能性があるので注意…!

レイヤー編

13.Rename it

XDやPhotoshopでもあった、レイヤー名を変更してくれるプラグイン。
例えば画像を書き出す時に[img_%n]としたら1から数字の割り振りでリネームしてくれます。

さいごに

いかがだったでしょうか。なるべく普段の業務で使用するプラグインをご紹介しました。他にもおすすめプラグインがあればぜひ教えて下さい!