

Desigral | デザイラル 編集長
樹神 大輝(コタマ ヒロキ)
Desiral:デザイラル メディア編集部として不定期で更新します。デザイン界隈の最新ニュースからすぐ使えるノウハウまで、わかりやすく紹介。現役デザイナーがトレンドをキャッチアップしながらマイペースにお届けしています。
Webデザインをするデザイナーやクリエイターに、今やなくてはならない存在のデザインツール「Figma」ですが、プラグインを活用することで便利に優れた表現を自在に作れることも魅力の一つです。
今回は、「初めてFigmaにプラグインを入れる人」「配色・カラーパレットやアーチ文字など作業を効率化したい人」「実務で使えるおすすめプラグインを知りたい人」などに向けて現役デザイナーがFigmaのプラグインを厳選してご紹介します。
プラグインの入れ方も簡単にまとめていますので、ぜひ参考にしてみてください。
Figmaでは数多くのクリエイターが拡張機能としてプラグインを公開してくれています。Figmaのプラグインメニューから検索することもできますし、Figmaコミュニティから探して活用するのもおすすめです。

Figmaのプラグインをインストールするには、Figmaのデザインエディタを開き、画面下部にあるメニューパレットから「リソース」アイコンを選択します。
検索ボックスの下にある「Plugins & widgets」を選択した状態で任意のプラグイン名を入力すると、プラグインを検索することができます。

任意のプラグインをクリックすれば、即座に実行することが可能です。Figmaのプラグインには、無料で利用できるものも多いですが、ものによってはライセンスが必要だったり有料のものも多く存在するので、有料で使えないプラグインは無料の代替プラグインを探してみるものいいかもしれません。
プラグインの導入はこれだけで完了です。よく使うプラグインは上に表示されるようになるので、呼び出したい時に随時活用してみましょう。


Adobe illustratorではお馴染みのパス上文字ですが、Figmaのデフォルト機能では作ることができません。ですが、「To Path」というプラグインを使えば、図形やペンツールで描いた線に沿って文字や文章を簡単に配置することが可能です。

こちらもAdobe illustratorではお馴染みの文字等を斜めにするシアー効果ですが、Figmaのデフォルト機能にはないのでプラグインで補うことができます。同じようなプラグインで、「SkewDat」というものもありますが、いつからか有料になってしまったので、無料で使えるシアー効果の代替プラグインを探している方にはおすすめです。
文字だけではなく図形や写真にも適応でき、効果を付与した後からも斜めになったまま文章の編集も可能です。

Figmaで波線や波形の表現をしたいときにおすすめのプラグインです。パラメータを調整するだけで、様々なサイン波形や曲線を作成することができます。ペンツールで書こうとするとなかなか綺麗に描けないので、サクッと波を作りたい時に便利です。

デザインのトレンドにもよく登場するノイズ表現。ざらっとした質感でWeb上にアナログのような質感を出したい時にも便利です。毎回テクスチャを素材サイトで探すより、「Noise」というプラグインを使えば細かいディテールをパラメータで調整しながらノイズテクスチャを作成することができます。
類似のプラグインで「Noise & Texture」もありますが、最近はユーザー登録が必要になったようなので面倒ごとを避けたい方には「Noise」がおすすめです。

柔らかい親しみのあるデザインを作成したい時に、正円や四角ではないオブジェクトを使いたい時があります。そんな時に便利なのが、有機的なバブルのようなオブジェクトを作れる「Blobs」です。作成した後にパスを手動で調整もできるので、ランダム性を持たせながら思った形を自在に作成することができます。

様々な参考デザインを探して、似た雰囲気を出したいなという時におすすめなのが「Image Palette」というプラグインです。画像を選択して実行するだけで、画像からカラーを抽出して自動で配色パターンのカラーパレットを作成することができます。

Figmaでグラデーション表現をしたい時、配色に慣れていないと微妙なグラデーションになることもしばしば。そんな方には自動でいい感じのグラデーションを提案してくれるプラグイン「uiGradients」はいかがでしょうか。塗りたいオブジェクトを選択して起動するとグラデーションパターンを複数から選んで適応できるので、カラーに悩んだ時にもおすすめです。

Figmaだけでは、画像の切り抜きを綺麗に行うことができず苦戦している方も多いのではないでしょうか。そんな時におすすめなのが背景切り抜きができるプラグイン「Magic Cut - remove background」です。精度はぼちぼちですが、無料で使えて、Photoshopの範囲選択の切り抜きのような操作性で細かい調整が可能なので、Figmaだけで作業を完結させたい人はぜひご活用してみてはいかがでしょうか。

2020年代にデザイントレンドが起こったニューモフィズムという表現を簡単に再現できるプラグイン「Neumorphism」です。オブジェクトを選択して、パラメータを調整することで、うまい具合にシャドウ効果などでニューモフィズムっぽく仕上げてくれます。

ニューモフィズムの少し後に登場した、透け感のあるグラスのようなデザイン表現グラスモーフィズムを作れるプラグインです。簡単なプロパティ調整で、効果レイヤーを操作するより直感的に表現を微調整できるのが便利です。

ニューモフィズムの少し後に登場した、透け感のあるグラスのようなデザイン表現グラスモーフィズムを作れるプラグインです。簡単なプロパティ調整で、効果レイヤーを操作するより直感的に表現を微調整できるのが便利です。

こちらは有料のプラグインですが、イラストの質感やキャラクターシステムが可愛すぎたのでご紹介。統一感がありシンプルすぎないちょうどいいラインのイラストを、ノイズ効果なども調整しながら作成できるのはめちゃくちゃすごいです。スライド資料などにも活躍しそうですね。

がっつりしたイラストではなく、装飾表現に手書きのラフなイラストを使いたい時におすすめのプラグイン。カフェのボードにもありそうな矢印や強調線などが詰め込まれていて、コピー&ペーストで手軽に利用できるのも嬉しいポイントです。

デザインを作った時に目立たせたい、見せたいという意図が実際に反映されているかどうか、簡単にヒートマップでセルフレビューができるプラグイン。無料で使えるので、クライアントワークやLPの自己レビューに活用することで説得力のあるデザインへブラッシュアップする糸口に使えそうです。

Webサイトを誰でも直感的に作成できる国産のノーコードツール「Studio」の公式プラグイン。挙動が不安定な場面もあるが随時改善も進んでいるよう。AutoLayoutでしっかりデザインを組み上げれば、クリック操作だけでStudioのデザインエディタへFigmaで作成したデザインをインポートすることが可能に。デザインから実装までを大幅にショートカットできるので、仕組みをうまく理解して活用できると非常に有用です。
Figmaには今回紹介した以外にもたくさんのプラグインが公開されています。デザイン表現を加速させるものから、時短できるもの、ビジネスツールとして幅広く使えるものなど多種多様なので、気に入ったプラグインがあればどんどん使ってFigmaを使いこなしてみてはいかがでしょうか。
別の記事では、「レトロなフォント紹介」などもしているので、ぜひ楽しいデザインライフをお送りください。

Desigral | デザイラル 編集長
樹神 大輝(コタマ ヒロキ)
Desiral:デザイラル メディア編集部として不定期で更新します。デザイン界隈の最新ニュースからすぐ使えるノウハウまで、わかりやすく紹介。現役デザイナーがトレンドをキャッチアップしながらマイペースにお届けしています。