ただでさえ使いやすいFigmaをさらに便利にするプラグインを目的別に集めてみました。
作業効率を上げるもの、デザインシステムの作成や管理ができるものから画像やアイコンなどのリソースをFigmaのエディター内で取得できるものまでとにかく便利なものが揃ってます。
全部入れるのは大変なので目的に合わせて気になるものがあれば使ってみてください。
作業効率化
Remove BG
remove.bgのAPIを使って1クリックで背景画像を取り除くことができるプラグイン。
本来FigmaではPhotoshopのような画像の切り抜きができないのですがこのプラグインを使うことでFigmaでも画像切り抜きができます。
APIを使うためにアカウント登録が必要で、無料プランでは低解像度(625×400)のプレビュー画像を50枚までダウンロードできます。
Font Preview
ポップアップウィンドウで入力したテキストの表示をフォント別に一覧表示してくれるプラグイン。
通常なら右側のパネルでフォントを選んで1つずつチェックする必要があったのですが、このプラグインなら素早くいい感じのフォントを探せます。
お気に入りフォントを保存できたり、フォントを探すときにフィルターで素早く検索することもできます。
Batch Styler
Figmaで作成した複数のスタイル(テキストとカラー)を同時に編集できるプラグイン。
Chart
エクセルやCSVデータからグラフを作成できるプラグイン。
データを渡せば円グラフや棒グラフ、折れ線グラフなど16タイプのグラフを自動的に作成してくれます。グラフは後から編集することもできます。
無料版では2種類のグラフのみ対応で、$20/年で全てのグラフが使用可能になります。
Figma to HTML
Figmaで作ったデザインからHTMLを生成してくれるプラグイン。
結構長めのページでも数秒でコードに変換してくれるのですが、ちょっと不具合が多いかなという印象。今後のアップデートに期待したいです。
Icon Resizer
アイコンのサイズを指定したサイズで揃えてくれる便利なプラグイン。
リソースのところで紹介するIconifyなどで入れたアイコンはサイズがバラバラになってることが多いのですが、このプラグインを使えば選択したアイコンをまとめてリサイズしてくれます。
Breakpoints
デバイスサイズごとに作成したデザインを、実際にブラウザを動かすようにブレークポイントを作って画面を切り替えてくれるプラグイン。
文章で読むと意味不明ですがこちらの動画を見るとだいたいわかると思います。
Mapsicle
Figmaに地図を埋め込めるプラグイン。
地図の表示はGoogleマップで検索してスクリーンショットを入れる場合が多いですが、こちらのプラグインを使えば地図を検索して埋め込めます。
Googleマップの埋め込みみたいにFigma上でぐりぐり動かせるわけではなく、画像として埋め込まれます。
uiGradients
Figmaに配置したフレームやテキストに指先1つで綺麗なグラデーションを追加してくれるプラグイン。
多数のパターンの中から選ぶだけでグラデーションを適用できます。適用したグラデーションは後から編集できるので効率よく作業ができます。
Image Palette
選択した画像から目立つ色を5つ抽出してくれるプラグイン。
プラグインを使用すると一瞬で色を抽出して画像の下にカラーパレットを作成してくれます。
今まではスポイトツールを使って色を1つずつ取ってましたがこれなら楽ちんですね。
Automator
フレームの作成や画像の設置などアクションを組み合わせてタスクを自動化できるプラグイン。
自分で作るのは結構大変ですが、こちらのコミュニティに公開されているものをダウンロードして使うこともできます。
適当に配置されたコンポーネントを綺麗に整列してくれたり、カラースウォッチを作成してくれたりとにかくなんでもできてしまいます。
Measure
Figmaに設置した要素間のサイズを測定して表示してくれるプラグイン。
測定した値は非表示することもできます。コーディングの際にスペースがどれくらいか分かりやすいので便利。
ただ、一部のフォントでは正しく測定できないものもあるので注意が必要です。
画像圧縮
TinyImage Compressor
Figmaに設置した画像を圧縮してエクスポートできるプラグイン。
JPGやPNGの他、SVGやWebP、Gif形式にも対応しています。圧縮した状態でエクスポートできるので手間が省けます。
-> TinyImage Compressorのダウンロードはこちら
プロトタイピング
Wireframe
複数のワイヤーフレームライブラリを使えるプラグイン。
ワイヤーフレーム一覧から使いたいものを選んでドラッグ＆ドロップで設置していくことができます。
Web制作やUIデザインの画面遷移の確認などにも便利です。
Autoflow
こちらは選択した2つのオブジェクト間を矢印で結んでくれるプラグイン。
フレーム同士だけでなく、ボタンとフレームを結びつけることもできます。先ほどのワイヤーフレームプラグインと一緒に使うと画面遷移図を簡単に作成できます。
Zeplin
Jiraのようなタスク管理ツールやStorybookとの連携でデザイナーとデベロッパーがより作業しやすくなるZeplinのプラグインです。
この他にもコラボレーションやデザインシステムの管理などチームで使いたい機能が詰まっているツール。
1プロジェクトなら無料で使えるので気になる人は要チェック。
Wire Box
作ったデザインをワイヤーフレームに変換できるプラグイン。
ワイヤーとしても保存しておきたい場合に使えるかも。文字のずれが気になりますが、一瞬で変換してくれます。
Content Reel
アバターや人の名前などダミーコンテンツを適当なものに差し替えてくれるプラグイン。
検索すると日本人の顔や名前なども登録されているのでプロトタイプでダミーコンテンツ作る場合は便利です。
Lorem ipsum
とりあえずテキスト適当に入れたいときのためのプラグイン。
テキストを選択してGenerateボタンを押すとLoremipsumを入れてくれます。
リソース
Unsplash
超ハイクオリティで商用利用も可能な画像を挿入することができるプラグイン。
四角レイヤーを選んで画像をクリックすると自動的にはめ込んでくれます。
最近クオリティが上がったというか使える場面がかなり増えてるのでフリー画像はこれだけでいいレベル。
Blush
こちらは無料でイラストを使うことができるプラグインです。
一部有料のものもありますが、さまざまなタイプのイラストが登録されています。カラーのカスタマイズは有料みたいです。
Feather Icons
シンプルで使いやすいアイコンを挿入できるプラグイン。
アイコンフォントとしても使えるのでコーディングするときに便利です。こちらのページからも取得できます。
Figmoji
Figmaに絵文字を追加できるプラグインです。
挿入される絵文字は画像ではなくベクターなので拡大縮小や色の変更などカスタマイズが可能です。
Iconify
FontAwesomeやMaterialDesignなど10万以上のアイコンから必要なものを選べるプラグイン。
アイコンは画像ではなくベクターなので色やサイズを自由に編集することができます。無料で使えるのも嬉しいところ。
Storyset
クールなイラスト素材を無料で使えるプラグイン。
海外のサイトでよくみるイラストを無料で使えるようになります。こちらもベクターなので細かいカスタマイズが可能。
Humaaans for Figma
シンプルな人のイラスト素材を使用できるプラグイン。
こちらもベクター素材となっています。
-> Humaaans for Figmaのダウンロードはこちら
アニメーション作成
LottieFiles
LottieFileというアニメーションファイルをFigmaに埋め込めるプラグイン。
自分で作ったものや公開されているものの中からアニメーションファイルを選択して画面に配置することができます。
配置した素材はプレビューで実際に動いてるところを確認できます。
Figmotion
Figmaでアニメーションを作成できるプラグイン。まだベータ版なのでできることは少なめですがLottieファイルの編集できるようになると便利かも。
作成したアニメーションはmp4やgifとして書き出すことができます。
モックアップ作成
SkewDat
斜めに傾いたモックアップを簡単に作成できるプラグイン。
Figmaの傾きは思った通りにならないことが多いですがこのプラグインを使うことでいい感じのモックアップを素早く作成できます。
Mockup
こちらはデザインを表示するフレームを選べるプラグイン。
作成したデザインをPCの画面やスマホなどにはめ込んでリアルな感じで見せることができます。
クオリティの高いものは月額$15の有料版にアップデートする必要があります。
Mockuuups Studio
作成したデザインをはめ込んだ状態でモックアップを作成してくれるプラグイン。
デバイスは実際に使われているものから選べるのでリアルな感じで表示できます。
-> Mockuuups Studioのダウンロードはこちら
デザインチェック
A11y - Color Contrast Checker
WCAG(Webコンテンツアクセシビリティガイドライン)規格に準拠したテキストのコントラストをチェックできるプラグイン。
-> A11y - Color Contrast Checkerのダウンロードはこちら
Contrast
こちらもWCAG規格に基づいたコントラストチェックができるプラグイン。
結構微妙なコントラスト比も問題ないかどうかを明確に判断することができます。
Roller · Design Linter
設定したスタイル以外のスタイルがあった場合にエラーを表示してくれるプラグイン。
デザインを自動的にテストでき、エラー箇所があればすぐに修正できます。
Design Lint
スタイルに登録されていないものを見つけてエラー表示してくれるプラグイン。
Figmaでスタイルとして登録されていないものが見つかればエラー表示してくれます。
Stark
アクセシビリティテストをFigma上で実行してくれるプラグイン。
月額$10の有料版を使うと制限なしで使用できるようになります。
デザインシステム
Typescales
タイポグラフィのスケールを自動的に作成してくれるプラグイン。
作成されたタイポはテキストスタイルに登録すればすぐに使用できるようになります。
Styler
複数のスタイルを簡単に管理できるようになるプラグイン。
選択したレイヤーからワンクリックでスタイルを作成したり、登録したスタイルからスタイル一覧を確認できるレイヤーを作成してくれます。
以前は手作業でやっていたところを自動化できるのでかなり重宝してるプラグインです。
Similayer
指定した特定のプロパティが一致するレイヤーを選択してくれるプラグイン。
色やフォント、レイヤー名などから絞り込むことができます。
Instance Finder
コンポーネントのインスタンスを検索できるプラグイン。
ページ内やフレーム内で使われているインスタンスを簡単に見つけることができます。
Master
Figmaのコンポーネント管理ができるプラグイン。
コンポーネントの作成や複製、ファイル間の移動などコンポーネントをよく使う人なら便利な機能がたくさんあります。
Style Organizer
デザインで使用されているスタイルを管理できるプラグイン。
登録したスタイルとリンクされてなかったり、スタイルを作ってないものを自動的にリストアップしてくれます。
後からまとめてスタイル作りたい場合には便利ですね。
Clean Document
ページ内のレイヤーを整列したり、不要なレイヤーを削除してくれるプラグイン。
他にもレイヤーのリネームやレイヤーが1つしかないグループをグループ解除してくれたりします。
Design System Organizer
コンポーネントやスタイルをフォルダで管理できるようになるプラグイン。
ファイル間でコンポーネントやスタイルの管理もできるので複数のプロジェクトを扱っている場合に便利です。
-> Design System Organizerのダウンロードはこちら
Rename It
レイヤー名の変更を効率よくできるようになるプラグイン。
まとめ
Figmaにはここで紹介したものの他にもまだまだたくさんプラグインが登録されています。
Figma自体もバージョンアップごとに新しい機能が追加されているのでますます便利になってます。
あと最近Adobeに買収されたことでPhotoshopやIllustratorとの連携なども期待できますね。