【Figma】デザイン効率アップ！おすすめ神プラグイン20選
Figmaでデザインカンプを作っていると、本筋ではない作業に時間を取られませんか。
ダミーの文章を流し込む、アイコンを探す、非表示のレイヤーを片づける……。
弊社でもWebサイトのデザインにFigmaを使っています。こうした作業はプラグインに任せられます。プラグインは、Figmaに機能を足す小さな追加プログラムです。
ただ、似た名前のものも多く、選ぶのに迷いやすいところです。
そこで、Web制作の実務で出番のあるものを20個に絞り、作業の場面ごとに5つに分けました。選ぶ基準にしたのは、デザインをコーディングに渡すところまで役に立つかどうかです。料金に触れていない項目は、Communityのページで表示を確かめてから使ってください。
仮置きの素材をすぐ入れるプラグイン
ワイヤーフレームからデザインに進む段階では、写真もアイコンも原稿もまだ揃っていないことが多いですよね。仮の素材をFigmaの中だけで用意できると、ブラウザとの行き来が減って手が止まりません。
1. Unsplash
写真素材サイトUnsplashの写真を使えるプラグインです。Figmaから出ずに写真を探して、そのまま挿入できます。図形を選んでから実行すると、その図形の中に写真が入ります。
写真の入れ方は3通りあります。
- ランダムに1枚入れる
- トピック別に選ぶ
- キーワードで探す
写真はUnsplash Licenseのもとで、商用・非商用を問わず許可なしで使えます。ただし、大きな加工をせずに写真そのものを販売することは禁止されています。
有料プランのUnsplash+に入っている方は、アカウントを連携すると、Unsplash+の写真を透かしなしのフル解像度で使えます。Unsplash+の写真には、通常の写真とは別のライセンスが適用されます。
名前にUnsplashを含む別作者のプラグインが複数あるので、上のリンクから開くのが確実です。
2. Iconify
オープンソースのアイコンセットを1つにまとめたプラグインです。250以上のアイコンセット、40万点以上のアイコンを横断して検索できます。無料で使えます。
取り込みは常にSVG（ベクター）なので、拡大や縮小をしても輪郭がぼやけません。プラグインの画面からキャンバスへドラッグするだけでも配置できます。
検索結果のアイコンをクリックすると、作者とライセンスを確認できます。案件で使う前に、ここだけは見ておいてください。
3. Lorem ipsum
テキストレイヤーを欧文のダミー文で埋めるプラグインです。長さを指定する方法と、レイヤーの枠いっぱいまで自動で埋める方法があります。無料で使えます。
ダミー文は定番のもの以外に、Pirate IpsumやPizza Ipsumといった遊びのあるものも選べます。現在は‹div›RIOTSが保守しています。
テキストのほかに、Unsplashの写真や架空のプロフィールなどのデータも入れられます。Figmaのクイックアクションにも対応していて、プラグインの画面を開かずにテキストを生成できます。
Lorem ipsum系のプラグインはとても数が多いです。探すときは名前だけで決めず、URLまで見てください。日本語のダミーは次の4番で補います。
4. Japanese Dummy Text
選択したテキストレイヤーを、日本語のダミー文で埋めるプラグインです。複数のレイヤーを選んで「生成」を押すと、レイヤーごとに別々の文が入ります。
量は、文字数か文の数で決めます。MinとMaxに違う数値を入れるとその範囲内の量に、片方だけ入れるとちょうどその数になります。「自動生成」を選べば、テキストボックスの大きさに合う量を入れてくれます。
日本語サイトのカンプは、日本語のダミーで組むのがおすすめです。行の折り返しや文字の詰まり具合を、実物に近い状態で確かめられます。欧文のダミーのまま確認に出すと、原稿が入ったあとで印象が変わるかもしれません。
フォームや会社概要のように項目が決まっている箇所なら、Japanese Dummy Dataも候補になります。氏名、ふりがな、住所、電話番号などの仮データを入れられるプラグインです。
影やグラデーションはどう作り込む？
影を1枚置いただけだと、カードがどこか浮いて見える。仕上げの段階で時間を使うのは、こういう細部ではないでしょうか。
手で数値を探るより、生成してから選ぶほうが早い作業です。
5. Beautiful Shadows
光源の位置を動かして、自然なドロップシャドウを作るプラグインです。複数の影を重ねて1つの影に見せる作りなので、1枚だけの影よりなじみます。
作られるのは、Figmaのドロップシャドウを何枚か重ねたエフェクトです。値はレイヤーのエフェクトとして残るので、コーディング担当も数値を確認できます。掲載ページによると、影はCSSのbox-shadowとしてそのまま使える値になっていて、Figmaのインスペクト表示から取り出せます。実装したあとは、ブラウザでの見え方も確かめてください。
ソースコードはMITライセンスで、GitHubに公開されています。
同じ名前のCommunityファイルが別にあります。プラグインのURLは /community/plugin/ で始まるほうです。
6. Noise & Texture
ノイズやテクスチャ、パターンを生成するプラグインです。作者はFigmaのプロダクトデザイナー、rogie氏です。
生成されるのは継ぎ目のないタイル状の素材で、背景に敷き詰めて使えます。レイヤーを選んでから適用し、設定を変えるとレイヤーの見た目もその場で変わります。
- ハーフトーンやディザの加工
- 木目・大理石・グリッチの柄
- ぼかしやピクセレート、色調整
ざらっとした粒状感を足すだけなら、今はFigma本体のNoiseエフェクトで足ります。輪郭を荒らすTextureエフェクトも標準にあります。プラグインを使うのは、ハーフトーンや柄まで作りたいときです。
7. uiGradients
Web上のグラデーション集uiGradients（uigradients.com）を、Figmaの中から使うプラグインです。350以上のグラデーションから選んで、1クリックで適用できます。
適用先はフレーム、グループ、テキストです。
先に要素を選んでからプラグインを実行します。
色の組み合わせを一から考えるより、候補を当てながら絞るほうが早く決まります。ブランドカラーが決まっている案件では、当てたあとに色を調整する前提で使ってください。
8. Mesh Gradient
メッシュ状に色がにじむグラデーションを作るプラグインです。2Dのメッシュ上で頂点と辺を動かして、色の広がり方を調整します。
- 編集中のライブプレビュー
- 作ったグラデーションの保存と再読み込み
- 高解像度での画像書き出し
出力は画像です。私は、ファーストビューの背景のように画像として書き出す箇所で使うのがよいと考えています。名前のよく似た別作者のプラグインがいくつかあるので、URLで見分けてください。
9. Blobs
有機的な不定形のシェイプ、いわゆるブロブを生成するプラグインです。実行するたびに違う形が出ます。形のばらつきと点の数は調整できます。
生成されるシェイプはベジェ曲線を持つSVGです。写真のマスクや背景のあしらいが欲しいとき、ペンツールで描くよりずっと早いですよ！
納品前のチェックを任せるプラグイン
薄いグレーの文字が白い背景に乗っていて、読みにくい。こういう箇所は、公開後に見つかると直すのに手間がかかります。
目で追うと見落とす作業こそ、機械に任せたいところです。
10. Contrast
文字と背景のコントラスト比を調べるプラグインです。選択したレイヤーの背後の色を調べて、比率とWCAGの各レベルの合否を出します。背景色を拾えないときは、レイヤーをもう1つ選択に足して2つを比べます。テキスト以外の要素にも使え、色や不透明度を変えると結果もその場で変わります。
背景が写真やグラデーションでも調べられます。要素の背後から色をいくつか拾い、そのすべてが基準を満たしたときだけ合格とする仕組みです。写真の上に文字を載せるメインビジュアルで役に立ちます。なお、線（ストローク）の色にはまだ対応していません。
1か所ずつの確認は、今はFigma本体のカラーピッカーでもできます。色のパネルにコントラスト比が表示され、AAとAAAの判定も出ます。AAの基準は通常のテキストで4.5:1、大きい文字とグラフィックで3:1です。
では、プラグインの出番はどこでしょうか。答えはページ全体のスキャンです。テキストのコントラストの問題をまとめて洗い出し、レポートにできます。見つかった問題を1つずつたどりながら直せます。同じ名前のプラグインが複数あるので、上のリンクから開いてください。開発元はWillowTreeです。
11. Stark
アクセシビリティの確認に使うツールをまとめたプラグインです。コントラストの確認だけでなく、色覚特性による見え方のシミュレーションまで扱えます。
- Contrast Checker（AA・AAAを満たす色の提案つき）
- Vision Simulator（4種類の色覚特性のほか、ぼやけた見え方やコントラストの低下なども再現）
- Focus OrderやAlt-Textの注釈
- Typography Analysis（文字の読みやすさの確認）
- Touch Targets（タップする領域の大きさの確認）
ファイルを自動でスキャンして、直し方を提案するSidekickという機能もあります。
無料で始められ、有料のプランもあります。
赤と緑で状態を区別しているUIは、Vision Simulatorで一度見ておくと安心かと思います。
12. Design Lint
スタイルが当たっていないレイヤーを洗い出すプラグインです。無料のオープンソースで、アカウントの登録も要りません。
エラーは種類ごとの一覧で表示され、種類で絞り込めます。一覧のエラーをクリックすると、そのレイヤーが選択されます。直すと一覧もその場で更新されます。同じ値のエラーはSelect Allでまとめて選べるので、一括で直せます。
イラストのように、スタイルを当てないレイヤーもあります。そうしたレイヤーは、Figma側でロックしておけばチェックの対象から外れます。プラグインの中でIgnoreやIgnore Allを押して、エラーから外すこともできます。角丸として認める値は、設定パネルで変えられます。
コーディングに渡す直前の点検に向いています。スタイルに登録していない色や文字が残っていると、実装側は「この色は新しい色なのか、単なる指定漏れなのか」で迷います。同名の別プラグインがあるので、上のリンクから開いてください。
ファイルを整理して意図を伝える
Xが120.47、幅が319.98。
コーディング担当は、こういう数値を見ると手が止まります。
意図した値なのか、ずれただけなのか、ファイルからは読み取れないんですよね。
13. Clean Document
ファイルの掃除をまとめて実行するプラグインです。対象は選択範囲か現在のページです。
- 非表示レイヤーの削除
- レイヤー1つだけのグループの解除
- 位置とサイズの整数への丸め
冒頭の小数点の問題は、3つ目の機能で片づきます。レイヤー名を整えるリネームの機能もあります。
注意したいのは、非表示レイヤーが本当に削除されることです。ボツ案を非表示で残しているファイルは、実行前にページを複製しておいてください。
14. Batch Styler
複数のテキストスタイルやカラースタイルを、まとめて変更するプラグインです。色は、色相・彩度・明度・アルファ・HEXを一括で変えられます。タイポグラフィは、フォントファミリー・ウェイト・行間・字間が対象です。たとえばフォントをInterからRobotoに替えても、ウェイトなどほかの設定は残ります。スタイルの名前の変更や削除、説明文の書き換えもまとめてできます。
デザインの後半で「全体のフォントを変えたい」「青をもう少し落ち着かせたい」という修正が入ることがあります。スタイルを1つずつ開いて直すと、漏れが出るかもしれません。まとめて変えれば、その心配が減ります。
15. Instance Finder
あるコンポーネントがファイルのどこで使われているかを探すプラグインです。インスタンスかコンポーネントを1つ選ぶと、すべてのページとフレームから同じコンポーネントのインスタンスを探して、一覧にします。
一覧は、件数が多いと何ページかに分かれます。項目をクリックすると、そのインスタンスまでズームします。左右の矢印キーで、前後のインスタンスへ順に移動することもできます。
ボタンやカードのコンポーネントに手を入れる前に、影響する範囲を確かめる使い方が合っています。
16. Autoflow
オブジェクト同士を矢印でつなぐプラグインです。画面と画面をつないでいくと、遷移図や導線の図になります。つないだオブジェクトを動かすと矢印も追従し、線の上に注記の文字も置けます。
カンプを並べただけでは、どのボタンからどの画面に進むのかが伝わりません。矢印が1本あるだけで、確認する側も実装する側も読み違えにくくなります。
料金には条件があります。無料で使えるのは1ファイル50フローまでで、ファイルの数に制限はありません。数えられるのはキャンバスに残っている矢印だけで、消した分は含まれません。
無制限に使うには買い切りのライセンスが必要です。金額は掲載ページの購入欄で確かめてください。ページ数の多いサイトでは、先に本数の見当をつけておくと安心です。
画像とWebページを取り込むとき
既存サイトのスクリーンショットをFigmaに貼ったら、文字がぼやけて読めない……。リニューアルの案件で起きがちな場面です。
原因はFigmaの仕様にあります。
17. Insert Big Image
大きな画像を、元の解像度のまま挿入するプラグインです。
Figmaは、幅か高さが4096pxを超える画像を自動で縮小します。縦に長いページ全体のスクリーンショットは、この制限に引っかかります。Insert Big Imageは、画像を小さい画像の集まりに分割して配置することで、縮小を避けます。画像は複数まとめて選べ、ドラッグ＆ドロップでも入れられます。「Insert as a @2x image」にチェックを入れると、2倍の解像度の画像として挿入できます。
ページ全体のスクリーンショットを撮る方法は、Chrome拡張機能の記事でGoFullPageを紹介しています。
18. Downsize
FigmaやFigJamの中にある画像を、圧縮・リサイズするプラグインです。選択範囲かページ全体から画像を探して処理します。アルファチャンネルのないPNGは、JPEGに変換して容量を減らせます。
誤解しやすい点が1つあります。これはファイル内の画像を軽くするプラグインで、書き出す画像を最適化するものとは別物です。狙いは、ファイルの読み込みを速くし、メモリの使用を抑えることにあります。
使うときのコツは、作者が掲載ページに書いています。圧縮レベルは30より大きい値にしておくこと。それ以下だと画質が大きく落ちることがあります。大きなファイルでは処理に時間がかかるので、先にフレームや画像を選んでから実行すると速く済みます。結果が気に入らなければ、Command + Zで元に戻せます。
写真を多く貼ったファイルが重くなってきた、ということはないでしょうか。そういうときに使います。Webに載せる画像を軽くしたいときは、次のTinyImage Compressorの出番です。
19. TinyImage Compressor
Figmaから書き出す画像を、書き出しと同時に圧縮するプラグインです。18番のDownsizeがファイルの中の画像を軽くするのに対して、こちらは納品する画像のほうを軽くします。
JPGやPNGのほか、WebP、AVIF、SVG、GIF、PDFでも書き出せます。圧縮の強さは、割合で決めるほかに、ファイルサイズの上限をKBで指定することもできます。書き出したあとに別のツールで圧縮や変換をしている方は、その手間を減らせます。
料金は次のとおりです。
- Proの機能を10回まで無料で試せる
- 試用のあとも、機能を絞った無料版として使える
- すべての機能を使い続けるには有料のProが必要
画像の処理はFigmaのファイルの中で完結し、外部にアップロードされません。クライアントから預かった写真を扱う案件でも使いやすいところです。
20. Web to Layers
最後は、弊社で公開しているプラグインです。HTMLを、編集できるFigmaのレイヤーに変換します。無料で、アカウントの登録も要りません。
取り込み方は2つあります。静的なHTMLなら、貼り付けるだけのPaste modeです。JavaScriptやログインが必要なページは、Capture modeを使います。ブックマークレットでページの状態を書き出し、それをプラグインに読み込ませます。テキストのフォントや行間、塗り、ボーダー、角丸、ボックスシャドウ、画像、インラインSVGなどを取り込みます。
制限も書いておきます。今のところAuto Layoutの推定には対応しておらず、レイヤーは絶対配置で並びます。radialやconicのグラデーションは近似での再現になり、iframeは空のフレームになります。
変換の処理はローカルで完結します。Communityのページではネットワークアクセスが制限なしと表示されますが、通信は取り込むHTMLが参照する画像・CSS・フォントの取得にだけ使います。
まだ足りない部分も多いので、これからも改良を続けていきます。Auto Layoutの推定にも対応する予定です。
プラグインなしで済むようになった作業
以前はプラグインが定番だった作業のいくつかは、Figma本体の機能でできるようになりました。
入れる前に、標準でできないかを一度確かめてみてください。
6番と10番で触れたとおり、粒状感を足すNoiseと輪郭を荒らすTextureのエフェクト、カラーピッカーでのコントラスト確認は標準機能です。
文字をカーブに沿わせる表現も同じです。ツールバーにText on a pathのツールがあり、ベクターのパスに沿って文字を打てます。文字を曲げるためだけにプラグインを探す必要は、もうないかもしれません。
レイヤーの一括リネームも標準でできます。レイヤーを複数選んで右クリックからRenameを選ぶか、Cmd/Ctrl + Rを押します。連番の挿入や現在の名前の差し込み、正規表現での置換まで対応しています。
画像の背景を消す作業には、Figma AIのRemove backgroundがあります。使えるかどうかはプランや設定によるので、手元の環境で確かめてください。
プラグインはどこから入れるのか
「インストール」のボタンを探したくなりますが、Figmaのプラグインにインストールという手順はありません。
あるのは「実行（Run）」と「保存（Save）」の2つだけです。
- デザインファイルを開く
- 左端のバーでToolsタブを開く
- 絞り込みでPluginを選ぶ
- 検索して使いたいものを選ぶ
- Runを押して実行する
左端のバーにToolsタブが見当たらない場合は、Actionsから探せます。ショートカットはCtrl/Cmd + Kです。古い解説記事と手元の画面が違って見えるのは、プラグインを開く場所の違いが原因かもしれません。Communityのページから使うなら、Open inを押してファイルを選びます。
よく使うものはSaveしておきます。保存したプラグインはFigmaのアカウントに紐づくので、別のファイルでもすぐ呼び出せます。直前に使ったプラグインをもう一度実行するショートカットも便利です。MacはCommand + Option + P、WindowsはAlt + Control + Pです。
プラグインは無料のStarterプランでも使えます。ただし、そのファイルの編集権限が必要で、閲覧だけの人は実行できません。プラグイン自体が有料の場合は、Figmaのプランとは別に費用がかかります。
業務ファイルで使う前に
プラグインは第三者が書いたコードです。Figmaの公式ヘルプによると、プラグインはファイル内の全レイヤーを参照できます。通信先も、既定ではどのドメインにも接続できる設定です。
公開前のデザインが入ったファイルで実行するなら、次の3点を先に見てください。
- 作者名は紹介元と同じか
- URLは紹介元と同じか
- ネットワークアクセスの表示内容
UnsplashやIconify、Contrastのように、同じ名前やよく似た名前のプラグインは珍しくありません。名前で検索して最初に出たものを使う、というやり方がいちばん危ないですよね。
不具合が出たときの窓口は、Figmaではなく各プラグインの開発者です。不審なものは、CommunityのページにあるReport resourceから報告できます。
プラグインとウィジェットは何が違う？
似たものにウィジェットがあります。
プラグインの画面は実行した本人にしか見えません。ウィジェットはキャンバス上に置かれ、ファイルにいる全員に見えます。操作できるのは編集権限のある人です。たとえば、キャンバス上にコメントを残せるComment Noteはウィジェットです。
まずは1つ、手元のファイルで
20個を一度に入れる必要はありません。
私なら、いま開いているファイルでClean DocumentかDesign Lintを1回走らせるところから始めます。小数点の座標やスタイルの当て漏れが、思ったより見つかるかもしれません。
プラグインは実行して合わなければ、使うのをやめるだけです。
気になったものから、1つ試してみてください！
