【2024年度版】Figma神プラグイン15選!配色、イラスト表現も自由自在に

【2024年度版】Figma神プラグイン15選!配色、イラスト表現も自由自在にのサムネイル
樹神 大輝(コタマ ヒロキ)のアイコン

執筆者プロフィール

Desigral | デザイラル 編集長

樹神 大輝(コタマ ヒロキ)

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

Webデザインをするデザイナーやクリエイターに、今やなくてはならない存在のデザインツール「Figma」ですが、プラグインを活用することで便利に優れた表現を自在に作れることも魅力の一つです。

今回は、「初めてFigmaにプラグインを入れる人」「配色・カラーパレットやアーチ文字など作業を効率化したい人」「実務で使えるおすすめプラグインを知りたい人」などに向けて現役デザイナーがFigmaのプラグインを厳選してご紹介します。

プラグインの入れ方も簡単にまとめていますので、ぜひ参考にしてみてください。

Figmaプラグインの入れ方と使い方

Figmaでは数多くのクリエイターが拡張機能としてプラグインを公開してくれています。Figmaのプラグインメニューから検索することもできますし、Figmaコミュニティから探して活用するのもおすすめです。

Figma Communityのキャプチャ

1.Figmaプラグインを検索する

Figmaのプラグインをインストールするには、Figmaのデザインエディタを開き、画面下部にあるメニューパレットから「リソース」アイコンを選択します。

検索ボックスの下にある「Plugins & widgets」を選択した状態で任意のプラグイン名を入力すると、プラグインを検索することができます。

Figmaプラグインの検索画面

2.Figmaプラグインを保存して起動

任意のプラグインをクリックすれば、即座に実行することが可能です。Figmaのプラグインには、無料で利用できるものも多いですが、ものによってはライセンスが必要だったり有料のものも多く存在するので、有料で使えないプラグインは無料の代替プラグインを探してみるものいいかもしれません。

プラグインの導入はこれだけで完了です。よく使うプラグインは上に表示されるようになるので、呼び出したい時に随時活用してみましょう。

Figmaプラグインの実行画面

柔軟なデザイン表現におすすめなFigmaプラグイン

1.パス上文字やアーチ状の文字を作れる「To Path」

Figmaプラグイン「To Path」のサムネイル

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

Figmaコミュニティでプラグインを見る

2.スタイリッシュなシアー表現ができる「Skew」

Figmaプラグイン「Skew」のサムネイル

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

文字だけではなく図形や写真にも適応でき、効果を付与した後からも斜めになったまま文章の編集も可能です。

Figmaコミュニティでプラグインを見る

3.波線や波形を作れる「Wave & Curve」

Figmaプラグイン「Wave & Curve」のサムネイル

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

Figmaコミュニティでプラグインを見る

4.多彩なノイズ表現を一瞬で「Noise」

Figmaプラグイン「Noise」のサムネイル

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

類似のプラグインで「Noise & Texture」もありますが、最近はユーザー登録が必要になったようなので面倒ごとを避けたい方には「Noise」がおすすめです。

Figmaコミュニティでプラグインを見る

5.歪んだ有機的シェイプを作れる「Blobs」

Figmaプラグイン「Blobs」のサムネイル

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

Figmaコミュニティでプラグインを見る

6.画像から配色パターンのカラーパレットを「Image Palette」

Figmaプラグイン「Image Palette」のサムネイル

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

Figmaコミュニティでプラグインを見る

7.いい感じのグラデーションを自動提案「uiGradients」

Figmaプラグイン「uiGradients」のサムネイル

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

Figmaコミュニティでプラグインを見る

8.ざっくり画像の背景削除して切り抜き「Magic Cut - remove background」

Figmaプラグイン「Magic Cut - remove background」のサムネイル

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

Figmaコミュニティでプラグインを見る

9.ニューモフィズム表現を簡単に作れる「Neumorphism」

Figmaプラグイン「Neumorphism」のサムネイル

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

Figmaコミュニティでプラグインを見る

10.グラスモーフィズム表現を簡単に作れる「Glassmorphism」

Figmaプラグイン「Glassmorphism」のサムネイル

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

Figmaコミュニティでプラグインを見る

イラスト表現で使えるおすすめなFigmaプラグイン

11.可愛いイラストをカスタマイズ「Humation / Human Illustration System」

Figmaプラグイン「Humation / Human Illustration System」のサムネイル

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

Figmaコミュニティでプラグインを見る

Humation公式サイトはこちら

12.イケてる質感イラストを作れる「SoMe Friends / Human Illustration System」

Figmaプラグイン「SoMe Friends」のサムネイル

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

Figmaコミュニティでプラグインを見る

SoMe Friends公式サイトはこちら

13.手書きの矢印や図形を手軽に「Sketch Elements Brushes Set – Visual assets」

Figmaプラグイン「Sketch Elements Brushes Set – Visual assets」のサムネイル

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

Figmaコミュニティでプラグインを見る

AIも自動化も。進化するFigmaプラグイン

14.セルフデザインレビューにAIヒートマップを「Clueify」

Figmaプラグイン「Clueify」のサムネイル

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

Figmaコミュニティでプラグインを見る

15.ノーコードツールStudioにFigmaからデザインをインポート「Figma to Studio」

Figmaプラグイン「Figma to Studio」のサムネイル

Webサイトを誰でも直感的に作成できる国産のノーコードツール「Studio」の公式プラグイン。挙動が不安定な場面もあるが随時改善も進んでいるよう。AutoLayoutでしっかりデザインを組み上げれば、クリック操作だけでStudioのデザインエディタへFigmaで作成したデザインをインポートすることが可能に。デザインから実装までを大幅にショートカットできるので、仕組みをうまく理解して活用できると非常に有用です。

Figmaコミュニティでプラグインを見る

プラグインを導入して表現の幅を広げよう

Figmaには今回紹介した以外にもたくさんのプラグインが公開されています。デザイン表現を加速させるものから、時短できるもの、ビジネスツールとして幅広く使えるものなど多種多様なので、気に入ったプラグインがあればどんどん使ってFigmaを使いこなしてみてはいかがでしょうか。

別の記事では、「レトロなフォント紹介」などもしているので、ぜひ楽しいデザインライフをお送りください。

記事をシェア

樹神 大輝(コタマ ヒロキ)のアイコン

執筆者プロフィール

Desigral | デザイラル 編集長

樹神 大輝(コタマ ヒロキ)

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