更新日: 2022 / 09 / 24

Figmaのプラグイン 45選

カテゴリー: design

ただでさえ使いやすいFigmaをさらに便利にするプラグインを目的別に集めてみました。

作業効率を上げるもの、デザインシステムの作成や管理ができるものから画像やアイコンなどのリソースをFigmaのエディター内で取得できるものまでとにかく便利なものが揃ってます。

全部入れるのは大変なので目的に合わせて気になるものがあれば使ってみてください。

  1. 作業効率化

    1. Remove BG
    2. Font Preview
    3. Batch Styler
    4. Chart
    5. Figma to HTML
    6. Icon Resizer
    7. Breakpoints
    8. Mapsicle
    9. uiGradients
    10. Image Palette
    11. Automator
    12. Measure
  2. 画像圧縮

    1. TinyImage Compressor
  3. プロトタイピング

    1. Wireframe
    2. Autoflow
    3. Zeplin
    4. Wire Box
    5. Content Reel
    6. Lorem ipsum
  4. リソース

    1. Unsplash
    2. Blush
    3. Feather Icons
    4. Figmoji
    5. Iconify
    6. Storyset
    7. Humaaans for Figma
  5. アニメーション作成

    1. LottieFiles
    2. Figmotion
  6. モックアップ作成

    1. SkewDat
    2. Mockup
    3. Mockuuups Studio
  7. デザインチェック

    1. A11y - Color Contrast Checker
    2. Contrast
    3. Roller · Design Linter
    4. Design Lint
    5. Stark
  8. デザインシステム

    1. Typescales
    2. Styler
    3. Similayer
    4. Instance Finder
    5. Master
    6. Style Organizer
    7. Clean Document
    8. Design System Organizer
    9. Rename It
  9. まとめ

作業効率化

Remove BG

Figmaの作業効率化プラグイン Remove BG

remove.bgのAPIを使って1クリックで背景画像を取り除くことができるプラグイン。

本来FigmaではPhotoshopのような画像の切り抜きができないのですがこのプラグインを使うことでFigmaでも画像切り抜きができます。

APIを使うためにアカウント登録が必要で、無料プランでは低解像度(625×400)のプレビュー画像を50枚までダウンロードできます。

-> Remove BGのダウンロードはこちら

Font Preview

Figmaの作業効率化プラグイン Font Preview

ポップアップウィンドウで入力したテキストの表示をフォント別に一覧表示してくれるプラグイン。

通常なら右側のパネルでフォントを選んで1つずつチェックする必要があったのですが、このプラグインなら素早くいい感じのフォントを探せます。

お気に入りフォントを保存できたり、フォントを探すときにフィルターで素早く検索することもできます。

-> Font Previewのダウンロードはこちら

Batch Styler

Figmaの作業効率化プラグイン Batch Styler

Figmaで作成した複数のスタイル(テキストとカラー)を同時に編集できるプラグイン。

-> Batch Stylerのダウンロードはこちら

Chart

Figmaの作業効率化プラグイン Chart

エクセルやCSVデータからグラフを作成できるプラグイン。

データを渡せば円グラフや棒グラフ、折れ線グラフなど16タイプのグラフを自動的に作成してくれます。グラフは後から編集することもできます。

無料版では2種類のグラフのみ対応で、$20/年で全てのグラフが使用可能になります。

-> Chartのダウンロードはこちら

Figma to HTML

Figmaの作業効率化プラグイン Figma to HTML

Figmaで作ったデザインからHTMLを生成してくれるプラグイン。

結構長めのページでも数秒でコードに変換してくれるのですが、ちょっと不具合が多いかなという印象。今後のアップデートに期待したいです。

-> Figma to HTMLのダウンロードはこちら

Icon Resizer

Figmaの作業効率化プラグイン Icon Resizer

アイコンのサイズを指定したサイズで揃えてくれる便利なプラグイン。

リソースのところで紹介するIconifyなどで入れたアイコンはサイズがバラバラになってることが多いのですが、このプラグインを使えば選択したアイコンをまとめてリサイズしてくれます。

-> Icon Resizerのダウンロードはこちら

Breakpoints

Figmaの作業効率化プラグイン Breakpoints

デバイスサイズごとに作成したデザインを、実際にブラウザを動かすようにブレークポイントを作って画面を切り替えてくれるプラグイン。

文章で読むと意味不明ですがこちらの動画を見るとだいたいわかると思います。

-> Breakpointsのダウンロードはこちら

Mapsicle

Figmaの作業効率化プラグイン Mapsicle

Figmaに地図を埋め込めるプラグイン。

地図の表示はGoogleマップで検索してスクリーンショットを入れる場合が多いですが、こちらのプラグインを使えば地図を検索して埋め込めます。

Googleマップの埋め込みみたいにFigma上でぐりぐり動かせるわけではなく、画像として埋め込まれます。

-> Mapsicleのダウンロードはこちら

uiGradients

Figmaの作業効率化プラグイン uiGradients

Figmaに配置したフレームやテキストに指先1つで綺麗なグラデーションを追加してくれるプラグイン。

多数のパターンの中から選ぶだけでグラデーションを適用できます。適用したグラデーションは後から編集できるので効率よく作業ができます。

-> uiGradientsのダウンロードはこちら

Image Palette

Figmaの作業効率化プラグイン Image Palette

選択した画像から目立つ色を5つ抽出してくれるプラグイン。

プラグインを使用すると一瞬で色を抽出して画像の下にカラーパレットを作成してくれます。

今まではスポイトツールを使って色を1つずつ取ってましたがこれなら楽ちんですね。

-> Image Paletteのダウンロードはこちら

Automator

Figmaの作業効率化プラグイン Automator

フレームの作成や画像の設置などアクションを組み合わせてタスクを自動化できるプラグイン。

自分で作るのは結構大変ですが、こちらのコミュニティに公開されているものをダウンロードして使うこともできます。

適当に配置されたコンポーネントを綺麗に整列してくれたり、カラースウォッチを作成してくれたりとにかくなんでもできてしまいます。

-> Automatorのダウンロードはこちら

Measure

Figmaの作業効率化プラグイン Measure

Figmaに設置した要素間のサイズを測定して表示してくれるプラグイン。

測定した値は非表示することもできます。コーディングの際にスペースがどれくらいか分かりやすいので便利。

ただ、一部のフォントでは正しく測定できないものもあるので注意が必要です。

-> Measureのダウンロードはこちら

画像圧縮

TinyImage Compressor

Figmaの作業効率化プラグイン TinyImage Compressor

Figmaに設置した画像を圧縮してエクスポートできるプラグイン。

JPGやPNGの他、SVGやWebP、Gif形式にも対応しています。圧縮した状態でエクスポートできるので手間が省けます。

-> TinyImage Compressorのダウンロードはこちら

プロトタイピング

Wireframe

Figmaの作業効率化プラグイン Wireframe

複数のワイヤーフレームライブラリを使えるプラグイン。

ワイヤーフレーム一覧から使いたいものを選んでドラッグ&ドロップで設置していくことができます。

Web制作やUIデザインの画面遷移の確認などにも便利です。

-> Wireframeのダウンロードはこちら

Autoflow

Figmaの作業効率化プラグイン Autoflow

こちらは選択した2つのオブジェクト間を矢印で結んでくれるプラグイン。

フレーム同士だけでなく、ボタンとフレームを結びつけることもできます。先ほどのワイヤーフレームプラグインと一緒に使うと画面遷移図を簡単に作成できます。

-> Autoflowのダウンロードはこちら

Zeplin

Figmaの作業効率化プラグイン Zeplin

Jiraのようなタスク管理ツールやStorybookとの連携でデザイナーとデベロッパーがより作業しやすくなるZeplinのプラグインです。

この他にもコラボレーションやデザインシステムの管理などチームで使いたい機能が詰まっているツール。

1プロジェクトなら無料で使えるので気になる人は要チェック。

-> Zeplinのダウンロードはこちら

Wire Box

Figmaの作業効率化プラグイン Wire Box

作ったデザインをワイヤーフレームに変換できるプラグイン。

ワイヤーとしても保存しておきたい場合に使えるかも。文字のずれが気になりますが、一瞬で変換してくれます。

-> Wire Boxのダウンロードはこちら

Content Reel

Figmaの作業効率化プラグイン Content Reel

アバターや人の名前などダミーコンテンツを適当なものに差し替えてくれるプラグイン。

検索すると日本人の顔や名前なども登録されているのでプロトタイプでダミーコンテンツ作る場合は便利です。

-> Content Reelのダウンロードはこちら

Lorem ipsum

Figmaの作業効率化プラグイン Lorem ipsum

とりあえずテキスト適当に入れたいときのためのプラグイン。

テキストを選択してGenerateボタンを押すとLoremipsumを入れてくれます。

-> Lorem ipsumのダウンロードはこちら

リソース

Unsplash

Figmaの作業効率化プラグイン Unsplash

超ハイクオリティで商用利用も可能な画像を挿入することができるプラグイン。

四角レイヤーを選んで画像をクリックすると自動的にはめ込んでくれます。

最近クオリティが上がったというか使える場面がかなり増えてるのでフリー画像はこれだけでいいレベル。

-> Unsplashのダウンロードはこちら

Blush

Figmaの作業効率化プラグイン Blush

こちらは無料でイラストを使うことができるプラグインです。

一部有料のものもありますが、さまざまなタイプのイラストが登録されています。カラーのカスタマイズは有料みたいです。

-> Blushのダウンロードはこちら

Feather Icons

Figmaの作業効率化プラグイン Feather Icons

シンプルで使いやすいアイコンを挿入できるプラグイン。

アイコンフォントとしても使えるのでコーディングするときに便利です。こちらのページからも取得できます。

-> Feather Iconsのダウンロードはこちら

Figmoji

Figmaの作業効率化プラグイン Figmoji

Figmaに絵文字を追加できるプラグインです。

挿入される絵文字は画像ではなくベクターなので拡大縮小や色の変更などカスタマイズが可能です。

-> Figmojiのダウンロードはこちら

Iconify

Figmaの作業効率化プラグイン Iconify

FontAwesomeやMaterialDesignなど10万以上のアイコンから必要なものを選べるプラグイン。

アイコンは画像ではなくベクターなので色やサイズを自由に編集することができます。無料で使えるのも嬉しいところ。

-> Iconifyのダウンロードはこちら

Storyset

Figmaの作業効率化プラグイン Storyset

クールなイラスト素材を無料で使えるプラグイン。

海外のサイトでよくみるイラストを無料で使えるようになります。こちらもベクターなので細かいカスタマイズが可能。

-> Storysetのダウンロードはこちら

Humaaans for Figma

Figmaの作業効率化プラグイン Humaaans for Figma

シンプルな人のイラスト素材を使用できるプラグイン。

こちらもベクター素材となっています。

-> Humaaans for Figmaのダウンロードはこちら

アニメーション作成

LottieFiles

Figmaの作業効率化プラグイン LottieFiles

LottieFileというアニメーションファイルをFigmaに埋め込めるプラグイン。

自分で作ったものや公開されているものの中からアニメーションファイルを選択して画面に配置することができます。

配置した素材はプレビューで実際に動いてるところを確認できます。

-> LottieFilesのダウンロードはこちら

Figmotion

Figmaの作業効率化プラグイン Figmotion

Figmaでアニメーションを作成できるプラグイン。まだベータ版なのでできることは少なめですがLottieファイルの編集できるようになると便利かも。

作成したアニメーションはmp4やgifとして書き出すことができます。

-> Figmotionのダウンロードはこちら

モックアップ作成

SkewDat

Figmaの作業効率化プラグイン SkewDat

斜めに傾いたモックアップを簡単に作成できるプラグイン。

Figmaの傾きは思った通りにならないことが多いですがこのプラグインを使うことでいい感じのモックアップを素早く作成できます。

-> SkewDatのダウンロードはこちら

Mockup

Figmaの作業効率化プラグイン Mockup

こちらはデザインを表示するフレームを選べるプラグイン。

作成したデザインをPCの画面やスマホなどにはめ込んでリアルな感じで見せることができます。

クオリティの高いものは月額$15の有料版にアップデートする必要があります。

-> Mockupのダウンロードはこちら

Mockuuups Studio

Figmaの作業効率化プラグイン Mockuuups Studio

作成したデザインをはめ込んだ状態でモックアップを作成してくれるプラグイン。

デバイスは実際に使われているものから選べるのでリアルな感じで表示できます。

-> Mockuuups Studioのダウンロードはこちら

デザインチェック

A11y - Color Contrast Checker

Figmaの作業効率化プラグイン A11y - Color Contrast Checker

WCAG(Webコンテンツアクセシビリティガイドライン)規格に準拠したテキストのコントラストをチェックできるプラグイン。

-> A11y - Color Contrast Checkerのダウンロードはこちら

Contrast

Figmaの作業効率化プラグイン Contrast

こちらもWCAG規格に基づいたコントラストチェックができるプラグイン。

結構微妙なコントラスト比も問題ないかどうかを明確に判断することができます。

-> Contrastのダウンロードはこちら

Roller · Design Linter

Figmaの作業効率化プラグイン Roller

設定したスタイル以外のスタイルがあった場合にエラーを表示してくれるプラグイン。

デザインを自動的にテストでき、エラー箇所があればすぐに修正できます。

-> Rollerのダウンロードはこちら

Design Lint

Figmaの作業効率化プラグイン Design Lint

スタイルに登録されていないものを見つけてエラー表示してくれるプラグイン。

Figmaでスタイルとして登録されていないものが見つかればエラー表示してくれます。

-> Design Lintのダウンロードはこちら

Stark

Figmaの作業効率化プラグイン Stark

アクセシビリティテストをFigma上で実行してくれるプラグイン。

月額$10の有料版を使うと制限なしで使用できるようになります。

-> Starkのダウンロードはこちら

デザインシステム

Typescales

Figmaの作業効率化プラグイン Typescales

タイポグラフィのスケールを自動的に作成してくれるプラグイン。

作成されたタイポはテキストスタイルに登録すればすぐに使用できるようになります。

-> Typescalesのダウンロードはこちら

Styler

Figmaの作業効率化プラグイン Styler

複数のスタイルを簡単に管理できるようになるプラグイン。

選択したレイヤーからワンクリックでスタイルを作成したり、登録したスタイルからスタイル一覧を確認できるレイヤーを作成してくれます。

以前は手作業でやっていたところを自動化できるのでかなり重宝してるプラグインです。

-> Stylerのダウンロードはこちら

Similayer

Figmaの作業効率化プラグイン Similayer

指定した特定のプロパティが一致するレイヤーを選択してくれるプラグイン。

色やフォント、レイヤー名などから絞り込むことができます。

-> Similayerのダウンロードはこちら

Instance Finder

Figmaの作業効率化プラグイン Instance Finder

コンポーネントのインスタンスを検索できるプラグイン。

ページ内やフレーム内で使われているインスタンスを簡単に見つけることができます。

-> Instance Finderのダウンロードはこちら

Master

Figmaの作業効率化プラグイン Master

Figmaのコンポーネント管理ができるプラグイン。

コンポーネントの作成や複製、ファイル間の移動などコンポーネントをよく使う人なら便利な機能がたくさんあります。

-> Masterのダウンロードはこちら

Style Organizer

Figmaの作業効率化プラグイン Style Organizer

デザインで使用されているスタイルを管理できるプラグイン。

登録したスタイルとリンクされてなかったり、スタイルを作ってないものを自動的にリストアップしてくれます。

後からまとめてスタイル作りたい場合には便利ですね。

-> Style Organizerのダウンロードはこちら

Clean Document

Figmaの作業効率化プラグイン Clean Document

ページ内のレイヤーを整列したり、不要なレイヤーを削除してくれるプラグイン。

他にもレイヤーのリネームやレイヤーが1つしかないグループをグループ解除してくれたりします。

-> Clean Documentのダウンロードはこちら

Design System Organizer

Figmaの作業効率化プラグイン Design System Organizer

コンポーネントやスタイルをフォルダで管理できるようになるプラグイン。

ファイル間でコンポーネントやスタイルの管理もできるので複数のプロジェクトを扱っている場合に便利です。

-> Design System Organizerのダウンロードはこちら

Rename It

Figmaの作業効率化プラグイン Rename It

レイヤー名の変更を効率よくできるようになるプラグイン。

-> Rename Itのダウンロードはこちら

まとめ

Figmaにはここで紹介したものの他にもまだまだたくさんプラグインが登録されています。

Figma自体もバージョンアップごとに新しい機能が追加されているのでますます便利になってます。

あと最近Adobeに買収されたことでPhotoshopやIllustratorとの連携なども期待できますね。