田口 冬菜
田口 冬菜

necco note

neccoのデザインチームが選ぶ、2021年のお気に入りFigmaプラグイン13選!

  • Design

neccoでデザイナーをしている田口です。

neccoのデザイン制作に欠かせないツールとして「Figma」があります。きっとデザインチームはFigmaを使わない日はないぐらい、毎日お世話になっています。

2021年もウェブサイトやアプリのデザイン、情報整理、資料作成などいろんな場面でFigmaが大活躍でした。

同時に、作業効率化や制作物のクオリティをあげるための「プラグイン」もどんどん増えていきました。

そこで、2021年のFigma納めをする前に

「みんなの推しプラグインが知りたい!」
「知らないものがあったら取り入れたい!」

と思ったので、デザインチームのみんなにお気に入りのプラグインを紹介してもらいました!

neccoのデザイナー・デザインエンジニアが使い倒しているプラグインを集めたので、気になるものがあれば使ってみてください🙌

デザイナー・田口のお気に入りプラグイン

まずは私のお気に入りプラグインからご紹介させていただきます!

2021年はウェブサイト・ウェブアプリのデザイン、ダウンロード資料のデザインなどをFigmaですることが多く、プラグインは作業をより効率化できるもの、デザインの作り込みに役立つものを探していました。

たくさんのプラグインにお世話になりましたが、その中でも特に気に入って使っていたものをピックアップしました。

Master

コンポーネントをあとからまとめて生成してくれるプラグインです。コンポーネントにしたいものをまとめて選択・実行すれば、マスターコンポーネント・インスタンスをいっきに生成してくれます。買い切りの有料プラグインですが、めちゃくちゃ便利でたくさん使ってました。

Figma プラグイン Master
画像引用元:Figma Community「Master

Nisa Text Splitter

長文のテキストを一瞬で分割できるプラグインです。原稿をだーっと流し込んでからNisa Text Splitterで分割してデザインしていく、という使い方をすることが多かったです。リストを作るときも大活躍でした。テキストボックスを結合することもできて最高です。

Nisa Text Splitter
画像引用元:Figma Community「Nisa Text Splitter

Better Font Picker

フォントをプレビューしながら選べるプラグインです。フォント名を覚えていないとき、いろんなフォントを見ながら選びたいときに直感的に選べて便利です。

Better Font Picker
画像引用元:Figma Community「Better Font Picker

Content Reel

ダミーテキストをいれてくれるプラグインです。人の名前やメールアドレス、テキストなどをダミーで流しこんでくれます。デフォルトでは英語のテキストが用意されてますが、自分で好きなテキストを登録してテンプレ化することもできるので、日本語の長文、短文テキストも追加して使ってます。

Content Reel
画像引用元:Figma Community「Content Reel

Remove BG

Figma上で画像の背景を削除してくれるプラグインです。Photoshopやパスを使わずにササッと背景透過画像がつくれます。複雑なオブジェクトでなければキレイに切り抜いてくれるので、とても便利です。(Figmaで使用するにはRemove BGのサイトでアカウントの取得が必要です)

Remove BG
画像引用元:Figma Community「Remove BG

Icon Resizer

アイコンとフレームのサイズを一括で変更できるプラグインです。オブジェクトとフレームのサイズを別々で指定できて便利です。あとからオブジェクトサイズを微調整することはありますが、アイコンのフレームサイズをひとつひとつ直してそろえる手間がなくなりました。

Icon Resizer
画像引用元:Figma Community「Icon Resizer

Wave & Сurve

波線のパスが作れるプラグインです。振幅や波長などをかんたんにカスタマイズできて、Figmaでの表現の幅を広げてくれるツールです。

Wave & Сurve
画像引用元:Figma Community「Wave & Curve

デザイナー・今のお気に入りプラグイン

つづいて、デザイナーの今ちゃんからお気に入りのプラグイン、気になるプラグインを教えてもらいました!

neccoの中でもグラフィックが得意な今ちゃんらしい、グラフィック表現に役立つプラグインが多めに紹介されています。(すでに紹介済みのプラグインは機能の説明を省略させていただきます!)

Better Font Picker

やっぱりこれ!なんやかんや安定して一番使ってます。neccoは日本語ウェブフォントを使う機会が多いので、検証のときに重宝しています。

Better Font Picker
画像引用元:Figma Community「Better Font Picker

Japanese Dummy Text

指定したテキストレイヤーに任意/自動で日本語のダミーテキストを生成してくれるツールです。カンプづくりや文字量検証のときに便利!

Japanese Dummy Text
画像引用元:Figma Community「Japanese Dummy Text

Noise

お好みの密度・サイズでノイズのテクスチャが作れるグラフィックづくりお役立ちツール。「質感ほしいな〜」なときにサッと生成して合成モードで重ねるといい感じになります👌

Noise Figmaプラグイン
画像引用元:Figma Community「Noise

Pattern Hero

指定したオブジェクトでパターンが簡単に作れちゃうツールです。背景づくりに便利そうで気になってます!

Pattern Hero
画像引用元:Figma Community「Pattern Hero

余談(by 今)

プラグインって使うときに名前だけで判断するの難しいですよね。Figmaはいろんなプラグインがあるし、インストールもしやすいからどんどん増えてしまいます…。サムネイルやツールチップとか出ればいいのになあ。

アシスタントデザイナー・中川のお気に入りプラグイン

次はアシスタントデザイナーの中川こゆきちゃんにお気に入りのプラグインを教えてもらいました!

UIデザインやデバイス展開が得意なこゆきちゃんらしいセレクトです。スタイルやワークスペースをささっと整えてくれて、いつも本当に助かってます!

Styler

カラーやテキストのスタイル、1個1個ぽちぽち登録するの面倒くさいなぁ…そんな作業を劇的に楽にしてくれる神プラグインです!

登録したいスタイルの名前にオブジェクトの名前を変えて、まとめて選択してスタイルに登録することができます。

Styler
画像引用元:Figma Community「Styler

(田口「Stylerの使い方もこゆきちゃんがさらりと紹介してくれました!」)

スタイル登録したいテキストやカラーを用意します。この時、レイヤーの名前はスタイル登録したい名前にしておきます。

準備ができたら、登録する要素をすべて選択し、[ Styler>Generate Styles ] を選択すると…

Styler 使い方

そのままスタイルに全部登録してくれます!なんて簡単!!

オブジェクトやレイヤーの名前変更は、Figma既存の機能が便利でとってもおすすめです。リネーム機能を使っていない方はぜひ試してみてください!簡単に一括で番号を割り振れたり、名前を変えたりできます!

リネーム参考記事:https://howno.page/entry/figma-rename/

Batch Styler

スタイル登録した後に、「フォントファミリーやウェイト変えたいなぁ」「カラースタイルのプロパティまとめて調整したいなぁ〜」ってなること、ありますよね?まとめてスタイルの調整ができる神プラグインがBatch Stylerです!!

Batch Styler
画像引用元:Figma Community「Batch Styler

中川「Batch Stylerを使ってテキストスタイルを楽に素早くつくる方法を思いついたので、今度そちらについてブログ書いてみようと思います💪」
田口「たのしみにしてます🙌」

デザインエンジニア・阿部のお気に入りプラグイン

最後に、デザインエンジニア / クリエイティブディレクターで資料づくりをすることも多い阿部さんからも、好きなプラグインを教えてもらいました!

TinyImage Compressor

イベント登壇やFigmaでPDF書き出しを良く使う人にオススメの神プラグインです。

Frameの前後の入れ替えや書き出しの有無、圧縮率の変更などができて、一つのPDFにまとめて書き出してくれます。A4比率で紙のデザインのラフを作ってPDFで書き出して印刷するや、イベント登壇時のPDFなどの書き出しに重宝します。

TinyImage Compressor
画像引用元:Figma Community「TinyImage Compressor

まとめ

neccoデザインチームのお気に入りFigmaプラグイン、2021年版のご紹介でした!

個人的にみんなの好きなプラグインが気になっていたので、2021年の最後にいっき見できて大満足でした!それぞれの得意なこと、好み、担当しているお仕事の傾向などが表れているのもおもしろかったです。

使ったことがないプラグインも紹介されていたので、ぜひ来年試してみたいと思います。デザインチームのみなさま、素敵なプラグイン紹介ありがとうございました!


📮 お仕事のご依頼やご相談、お待ちしております。

お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。

🤝 一緒に働きませんか?

下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。

  • アシスタントデザイナー
  • フロントエンドエンジニア
  • アシスタントフロントエンドエンジニア
  • エディター・ライター

🗒 会社案内資料もご活用ください。

弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。

株式会社necco ダウンロード資料へのバナー画像

(2024年4月時点)

田口 冬菜

田口 冬菜

Fuyuna Taguchi

三重県伊勢市生まれ。地元の二次救急病院で約6年間理学療法士として約6年働き、趣味ではじめたデザインにハマってデザイナーへ転職。転職のタイミングでより成長できる環境を求めて東京に引っ越し。都内のデザイン会社1社を経て、2020年からneccoに入社した。入社後にはモーションデザインのスキルを身につけ、現在デザイナー・モーションデザイナーとして働いている。個人ではブログを書いたり、たまに動画・映像関連のメディア出演をしたりしている。著書に『これからはじめるFigma WebUIデザイン入門』(マイナビ出版、2022)がある。インテリア、本、コーヒー、あまいもの、散歩、人の姿勢・動作観察が好き。

SHARE

Other Note

necco note

【新卒1年目】デザインや仕事の基本スキルアップに取り組んだ8か月の記録