Figmaのデザイン制作が楽になる時短プラグイン30選

ブラウザ上で簡単にデザインができるFigmaですが、人気の理由のひとつがプラグインを活用すれば自分好みにカスタマイズできる点でしょう。

たとえば、「できるだけ効率よく作業時間を短縮したい」というクリエイターの願いを叶えるAI機能を生かしたプラグインや、統一感のあるWebサイトに欠かせないデザインシステム作成プラグインなど用途によってさまざまです。

しかし、いざ探してみると、どこから見つけていいのか迷ってしまうほど膨大な数が公開されています。

そこでこの記事では、デザインをつくるときに役立つFigmaプラグインに絞り、リスト形式でご紹介します。

しかも、どれも無料。気になるアイテムはどんどん試してみましょう。きっとこれまで以上楽にデザインを作成できますよ。

このリストはこんな人におすすめ

  • デザインのアクセントになる「あしらい」をさくっと作りたい
  • どのプラグインを使えばよいか迷っている
  • まわりをアッと言わせるデザインをしたい
  • デザインの面倒な作業を自動化して、効率アップしたい

Figmaのデザインづくりを爆速にする便利プラグイン

「Figmaプラグインを今まで使ったことがない」というひとも、以下の記事を見ればその手軽さが分かってもらえると思います。

Beautiful Shadows

太陽のマークの「光源」アイコンをマウスで自由にドラッグするだけで、選択した要素にリアルで美しい影を表現できるプラグイン。

Perspective Grid Generator

水平と垂直それぞれの方向のライン数と角度、アングルを設定すれば、立体的で奥行きのあるグリッドラインを作成できるプラグイン。

3D Wave: Soften everything like fabric

あらゆる要素をまるでファブリック生地のようにソフトな3Dウェーブ上に仕上がるプラグイン。

Ruri Splines

描いた曲線パスに沿ってグラデーションを追加して、立体感のあるスプラインや図形、スポットを作成できます。250以上の編集可能なカーブ曲線と色のコレクションを使用可能。

Mesh Gradient

一般的な線形・放射状グラデーション以外に、メッシュグラデーションを手軽に作成できるプラグイン。メッシュポイントの数を調整したり、配色の組み合わせなども自由に選択、書き出すことができます。代替プラグイン「MeshFlow Gradients」もおすすめです。

Noisy Gradients

ザラザラとしたノイズ感を加えたレトロなグラデーションをクリックひとつで、SVGとPNGファイル形式の画像を作成できるプラグイン。

Non Boring Gradients

にごりのない美しいグラデーションを自動で生成できるプラグイン。HSLやZYX、LCHといった、これまで主流だったsRGBではできないより鮮やかな色の表現が可能に。

Wave & Сurve

ふにゃふにゃと曲がる波線ウェーブや曲線カーブを自在に描くプラグイン。プレビューを確認しながらカスタマイズでき、デザインがしやすいのも魅力。

波線やジグザグ線などを簡単に描ける「Sine Wave」や「Wavy Lines」など他のプラグインもあるので、自分にあったプラグインを利用すると良いでしょう。

ARC – Bend your type!

文字テキストを上向き、下向き、または円形にカーブさせることができるプラグインで、テキストで最も必要とされる機能のひとつ。

To Path

作成したいパスに沿って図形や文字テキストなどを配置できるプラグインで、追加する要素の数やオフセットも細かく調整できます。

Blobs

ボタンをクリックするだけで、ランダムなBlob(ブロブ)シェイプを作成できるプラグインで、ポイントの数と複雑さも一緒にコントロール可能です。

Glow

リアルでなめらかなグローエフェクトを追加できるプラグインで、複数のドロップシャドウエフェクトを自動でレイヤー化し、イージングすることで実現しています。

Noise & Texture

ざらりとしたノイズ系テクスチャを瞬時に作成できるプラグイン。そのままテクスチャとして使ってもいいし、レイヤーの「塗り」としてテクスチャーを追加することも可能。

Noise

こちらもノイズテクスチャをカスタマイズ、生成できるプラグインで、作品に質感を加えたいときに役立ちます。

Fast Isometric

デザインを立体的なアイソメトリックな3D図形に変換できるプラグイン。作成後に図形のサイズを変更もでき、プリセットから図形に配色カラーパレットを適用することも可能です。

oblique

図形シェイプや文字に影をつけたり、遠近感を演出できるプラグイン。角度や奥行き感も自由にカスタマイズできます。

3D Transformer

どんなフレームも瞬時に魅力的な3Dモックアップに変換できるプラグイン。使い方はとてもシンプルで、お好きなフレームを選択し、プラグインを実行するだけ。デザインにあった3Dアングルを決め、そのまま画像として作品に配置できます。

Shapes 3D

制作に時間のかかりそうな3Dモックアップのアニメーションを手軽に作成できるプラグインで、モックアップの作成はもちろん、要素間に隙間をもたせ立体感を出すLayer Explosionや、くるりと回転するエフェクトなども自由自在。

Fig3D

シェイプやアイコン、ロゴ、UIデザインなどを瞬時に3Dモデルに変換できるプラグイン。出力レンダリングの方向を自由に決めることが可能で、立体感のあるベベルとエンボスを再現できます。代替アプリVector to 3Dもおすすめです。

Shapes 3D

選択した要素を立体的な3Dシェイプに変換し、七色に輝くホログラフィックなど美しいエフェクトプリセットを適用できるプラグイン。印象に残るグラフィック素材づくりにいかがでしょう。

Wannathis — 3D Illustrations, Mockups

1000以上の3Dイラストやモックアップで構成されたプラグインで、Figmaのなかでデザイン素材探しまで完結でき便利。

Drawkit 3D Builder

3Dイラストやアイコンを簡単に組み合わせ、Figmaファイルにそのままドロップできるプラグイン。6つのカテゴリに分けられており、ライブラリより400以上のアイテムを選択できます。カラーバリエーションあり。

Mockup Plugin – Devices Mockups, Print Mockups, AI Mockups

デバイスを選び、フレームを選ぶだけで、デザインをスクリーンに反映させることができるモックアップ用プラグイン。Figmaから離れることなくデザインを完成でき便利。「Vectary」と併用したいバラエティー豊富なアイテム数。

Remove BG

写真の背景を切り抜きたいときも、Figmaから離れることなくボタンひとつで対応できる定番プラグイン。

Figmoji

Figmaで絵文字を利用できるようにするプラグインで、SVGファイルとして簡単に追加できます。

Icons8 — icons, illustrations, photos

数千を超えるアイコンやイラスト、フリーストック画像などの無料グラフィック素材にいつでもアクセスできる便利プラグイン。

LottieFiles – Create animations & export from Figma to Lottie

作成したデザインをつかってLottieアニメーションに簡単に変換できるプラグイン。コンポーネントやグラデーション、カスタムシェイプなど、Figmaすべての機能を活用できます。

Jitter · Animation for Figma

すべてのインターフェースやコンテンツにアニメーションを追加、作成できるプラグイン。作成したファイルはビデオやGIF、Lottieファイルとしてエクスポート可能です。

Figmap – Map maker

世界中の地図をカスタムして画像ファイルとして作成・取得できるプラグイン。緯度や経度、ズームや方位などマップ上のあらゆる要素をコントロールでき、取得する画像サイズや4K Retina対応など至れり尽くせり。

Autoflow

プロジェクトを文書化し、より分かりやすく他の人に伝えたいときに役立つユーザーフロー設計プラグイン。要素を選択するだけの直感的な操作が魅力で、1ファイルにつき50フローまで無料利用できます。

Doodle Arrows

手書きの矢印イラストを集めたコレクションで、遊び心のある曲線からダイナミックな渦巻きまで、多様な矢印スタイルを提供しているプラグイン。デザインに合わせて色やストロークの幅をカスタマイズできます。

html.to.design – Convert websites to Figma designs

あらゆるWebサイトをFigmaで編集可能なデザインファイルに変換でき、各要素をゼロから構築することなく、独自のデザインとして取り込むことが可能。

WebサイトURLを入力するだけでインポートでき、デスクトップやノートパソコン、タブレット、スマホと複数のビューポート用レイアウトを同時に生成できます。

まず生成したいサイトのURLを入力しよう
各要素を自動で判別し、独立したレイヤーとして編集できる
各デバイスサイズに合わせてインポートすることも可能。ダークモードも選択できます 

Automatic Style Guides – Figma

ファイルで利用している書式や配色などをまとめたスタイルガイドを、ボタンをクリックするだけで作成でき、ドキュメント作成の二度手間を省いてくれます。

Redlines – Figma

詳細なサイズや寸法、仕様などデザインに注釈を手軽に入れることができるプラグインで、エンジニアなどチームで作品を共有、引き継ぐときに便利。

Color Shades – Figma

同じベースカラーから複数の色合い、シェードを生成できるプラグイン。カラーピッカーよりベースカラーを入力するだけなので、統一感のあるモノクロ配色をカスタマイズ可能。

「デザインにこだわりたいが、あまり時間がなくて…」

そんな人は高品質なグラフィック素材や画像、テンプレートなどが揃うアドビストックから見つけた素材をインポートするのもおすすめ。

アップデートもほぼ毎日行われており、日本向けイラスト素材や写真などが特に充実しています。さらに仕事でも利用できる商用ライセンス付きなので安心です。

Adobe Stock

アドビだからストック素材サービスも ここまでクリエイティブ。

Adobe Stockは、アドビがクリエイターのためにつくったストックサービスです。写真やイラストなど高品質な素材が約3億点。無料素材も100万点。
検索、プレビュー、ライセンスの取得をPhotoshopから直接できるので効率の良さが抜群。
たくさんのAdobe Creative Cloudユーザーに選ばれているのには理由があります。

最初のひと月は素材が10点まで無料なので、気軽に始めてみませんか。

Adobe Stockをもっと詳しく

Adobe Stockを無料で始める