Advertisement

ベスト・オブ・Figmaプラグインのトップ画像

 

Figmaは、ブラウザ上から利用できるデザインアプリですが、特にチームでの共同デザインプロジェクトに最適なツールと言えます。

 

さらに、「こんな機能があればいいのに」というときも、プラグインを利用することで、自分好みにアプリの使いやすさをカスタマイズできる点も人気の理由のひとつです。

 

今回は、何千とあるプラグインの中から、実際にインストールしてみたWeb制作の作業効率がアップする便利なFigmaプラグインやツールをまとめてご紹介します。

 

自分だけの「最強」Figma、はじめませんか。

 

 

 

Figmaって何?

Figmaの公式ページ画像

 

Figmaには、本格的なイラストも描くことができるベクターツールをはじめ、ウェブサイトのプロトタイプ作成機能、完成したデザインをWeb用HTMLに変換など、デザインプロジェクト全体を通して必要なツールが揃います。

 

Figmaはブラウザ上でデザインを行うため、共同作業によるリアルタイムのコラボレーションが可能です。チームメンバーが同時にデザインを閲覧しながら、同時に変更を加えることもできます。また、クライアントと同時にデザインを確認する打ち合わせもじっくり行うことができ、手直しももちろんその場で完了、便利です。

 

またチーム内でデザインに「ずれ」が生じないよう、Webコンポーネント用ライブラリを作成しておけば、コピペで各コンポーネントの再利用も可能。ライブラリを変更すれば、すべてのデザインに瞬時に反映されます。

 

プロトタイプ作成にも適しており、デザイン上にページ遷移の接続アニメーションやホットスポットの作成など、まるで完成したアプリのような見た目と使い心地を体験できます。SVGコード、CSSおよびiOSとAndroid用コードの生成も可能。

 

標準ではない機能もプラグインを利用することで、自分用の最強Figmaにカスタマイズできます。

 

 

Figmaプラグインのインストール方法

 

まずはプラグインのインストール手順をおさらい。ブラウザでFigmaを開き、左サイドバーの「Community」という項目をクリック。

 

FilesとPluginsと書かれているので、Pluginsをクリック。すると、人気プラグイン順にリスト形式で表示されます。

 

リスト右側にあるInstallボタンをクリックで、すぐにインストールは完了です。

人気Figmaプラグインから選択、インスールするまでの図

 

 

プラグインをつかいたいときは、Figmaファイルを開いた状態で「右クリック」>「Plugins」よりお好みのプラグインを表示して使用しましょう。

Figmaプラグインを使用する方法

 

ショートカットキーを覚えることで、より素早くデザイン作業をこなすことができます。

 

 

Figmaを最強デザインツールにする便利なプラグイン、ツールまとめ

 

では、Web制作が捗る便利なFigmaプラグインをみていきましょう。後半では、デザイン制作が捗るテンプレートやコンポーネント集、配色コレクションなどの便利ファイルも一緒にまとめています。

 

 

Geenes

配色カラーパレットの作成やメンテナンス、同期、検証テストなどをまとめて行うプラグインで、アクセシビリティを考慮した色を直感的に選ぶことができます。

geenesの画像

 

 

Text Resizer

フォントサイズが縮小、拡大したときに、どのようにレイアウトが変化するか確認できるレスポンシブデザイン向けプラグイン。

text-resizer

 

 

Stark

アクセシビリティに関する機能を揃えたプラグインで、コントラスト比チェックや作成した色を実際のウェブデザインに適用できる、ビジョンシュミレーターを搭載。

starkの画像

 

 

Annotation Kit 2.0

作業中にチームで共有するためにメモや注釈などを簡単に追加でき、要素間の幅スペースも表示してくれ、デザイン上のコミュニケーションをスムーズにし、誤解が生じにくいように。

annotation-kits2の画像

 

 

Redlines

デザインの詳細なサイズや寸法、仕様などを素早く測定、赤ラインで表示してくれるプラグイン。もちろん色の変更も可能です。

redlines プラグインの画像

 

 

UI Faces

Webサイト制作におけるダミーテキストならぬダミーアバター1000種類を用意したプラグイン。クリックひとつで架空の顔写真をデザインに追加できます。

ui-faces プラグインの画像

 

 

Brandfetch

チーム間でロゴや配色などブランディング要素がずれないよう、まとめて管理、更新できます。ファイルを変更すると瞬時に更新されるので、共同作業にも便利。

brandfetch プラグインの画像

 

 

Chart

手元にあるデータやサンプルをつかって、さまざまなチャート図、グラフを手軽に作成できます。ExcelやGoogleシート、Numbersで作成したデータのコピペに対応で、さらにFigmaで編集したGoogleシートとの同期、CSVやJSONファイルも読み込み可能。

charts プラグインの画像

 

 

Lil Grid

大量でごちゃごちゃのフレームを、ボタンひとつで整理してくれるお助けプラグイン。整列させたいフレームを選択して、Organize to Gridボタンを押したら終了。

lil-grid プラグインの画像

 

 

Clean Document

非表示レイヤーやグループ化されていないレイヤー、配置揃えなど完成したデザインファイルを手渡す前に自動でスッキリ整理してくれます。

clean-document プラグインの画像

 

 

Palette

写真画像からカラーパレットを生成できるプラグインで、AIテクノロジーによって最適なカラーパレットを自動で生成、提案してくれます。

palette プラグインの画像

 

 

Image Palette Plugin

画像をメインに利用するデザインにおいて、適切な色を素早く選ぶことができるプラグイン。画像から抽出した色によるカラーパレットも作成できます。

iamge-palette プラグインの画像

 

 

uiGradient

Webデザイン向けの美しいグラデーションを選ぶだけで利用でき、グループやテキスト、フレームなどに複数のグラデーションを追加することも。

ui-gradients プラグインの画像

 

 

Wave & Curve

波ウェーブや曲線カーブをデザインに合わせてカスタマイズできるプラグインで、波の方向も選択できます。

wave-and-curve プラグインの画像

 

 

Mockuuups Studio

完成したデザインのプレゼンテーションの質を高める、700以上のスマホなどのデバイス向けモックアップシーンをFigmaで利用可能に。フォトショップなどを使わない、お手軽な時短テク。

mockuuups-studio プラグインの画像

 

 

All Hands Mockup Generator

まるで実際に完成したデザインがアプリになった様子を表現できる、スマホを握った手も加えたモックアップを作成できるプラグイン。

all-hands-mockup-generator プラグインの画像

 

 

Emailify

異なる画面サイズに応じたレスポンシブ対応のHTMLファイルデザインを、モジュール型のデザインをドラッグ&ドロップで選ぶだけで作成できます。レイアウトの自動切り替え機能もオススメ。

emailify-html-email-builder プラグインの画像

 

 

A selection of Google Fonts

Figmaから直接Googleフォントを選択できるようにするプラグイン。それぞれの書体スタイルを小さなプレビューで確認できるので便利。

goolg-font-selection プラグインの画像

 

 

Iconscout

何百万を超える高品質なイラストやアイコン、3Dデザインコレクションから検索、そのままFigmaに挿入できるプラグイン。お気に入り登録もでき、目的に合ったファイル形式や解像度を選択できます。

iconscout プラグインの画像

 

 

Storyset by Freepik

デザインに応じてスタイルや配色、背景なども編集できるイラストライブラリ。100種類以上のイラストコンセプトが揃い、イラストにアニメーションを追加することも可能です。

storyset-by-freepik プラグインの画像

 

 

Guide Mate

複雑でより柔軟なグリッドベースのガイドラインを追加できるプラグイン。グリッド作成にはGrid Generatorがオススメです。

guide-mate プラグインの画像

 

 

Snap to Grid

グリッドに合わせて、デザインコンポーネントを整列、スナップできるプラグイン。テキストなどのレイヤーを移動すると、グリッドに沿って自動で配置してくれます。

snap-to-grid プラグインの画像

 

 

Table Geneartor

時間のかかる表テーブル作成作業を自動化できるプラグインで、CSVファイルからコピー&ペーストするだけで、あとは自動で表テーブルを作成してくれます。

table-generator プラグインの画像

 

 

Image Tracer

白黒画像をFigma上でベクターファイルに変換できるプラグイン、実行すると選択されているすべてのレイヤーをひとつに結合し、白黒に変換、ベクターレイヤーにトレースの流れ。

image-tracer プラグインの画像

 

 

Mobile Upload

手描きスケッチしたUIデザインや走り書きしたアイデアを、スマホで写真を撮影するだけで直接Figmaにアップロード。これで、「写真をメールに貼り付けて自分宛てに送信」といった面倒な作業も必要ありません。

figma-mobile-upload プラグインの画像

 

 

Anima for Figma

アニメーションなどの動きも加えたインタラクティブなプロトタイプを作成し、ボタンひとつでHTMLに変換できるツールがFigmaについに対応。Lottieアニメーションなども利用でき、より魅力的なプロトタイプ作成を手軽に行うことができます。

anima-for-figma-1 プラグインの画像

最近のウェブサイト制作では、アニメーションがますます重要になってきています。 この記事は、Lottieの使い方をまとめた基本ガイドです。Lottieの

 

 

Gifmock for Figma

Figmaファイルのレイヤーを使って、高品質なGIFアニメーションを作成できる拡張プラグイン。Figma関連、ぞくぞくと増えてます。

gifmock-for-figma プラグインの画像

 

 

 

Shadow Picker

手軽に異なるサイズのドロップシャドウを適用でき、親要素カラーを自動継承した影も簡単に作成できます。

Shadow Picker プラグインの画像

 

 

 

Smooth Shadow

もともとオンラインツールだったサービスをFigmaプラグインでも利用可能にしています。レイヤー状に重ねる自然な仕上がりのドロップシャドウをデザイン。

Smooth Shadow  プラグインの画像

 

 

 

Storyset by Freepik

大量のイラストをコレクションしたプラグインで、ベクター形式でファイルのインポートが可能。キーワードによるイラスト検索や人気のイラストランキングなども確認できます。

Storyset by Freepik プラグインの画像

 

 

 

Font Preview

手持ちのフォントをリアルタイムでプレビューできるプラグイン。フォント選びで困っているひとにオススメ。

Font Preview プラグインの画像

 

 

 

Spelll – Spell Checking for Figma

スペルミスを的確に指摘、修正してくれる便利系プラグイン。英語のみの対応となります。

Spelll プラグインの画像

 

 

 

Tracking for Figma

このプラグインを利用すれば、Figmaファイル上で注釈メモを直接作成、添付およびリアルタイムでの更新も可能です。修正箇所のやりとりがよりスムーズに。

tracking-for-figma プラグインの画像

 

 

 

Noted for Figma

作業しているFigmaファイルに、ぱっと思いついたメモを残すことができる、付箋のようなプラグイン。テンプレートも豊富に用意されており、カスタマイズも可能。

figma-noted プラグインの画像

 

 

 

Speedboat for Figma

人気フレームワークTailwind CSSをつかったコンポーネントを、Figma上で編集、カスタマイズできる有料プラグイン。

Speedboat プラグインの画像

 

 

 

Grids Generator for Figma

プロトタイプツールFigmaで、あらゆるフレームにグリッドスタイルを追加、作成できる拡張プラグイン。GoogleのElement Inspectorにインスパイアされた使用感。

figma-grids-generator プラグインの画像

 

 

 

Master

作成したプロトタイプからコンポーネントを作成したいときに便利なプラグイン。必要な数のオブジェクトを追加できます。1ファイルあたり5回まで、無料で利用できます。

 

 

 

Many Master for Figma

このFgimiaプラグインを使えば、複数行にまたがるデータを個別のテキストレイヤーとして、一括挿入できるようになります。

many-paster プラグインの画像

 

 

 

Style Organizer

配色や文字スタイルなどを一覧表示で整理できるFigma拡張プラグイン。

style-organizer プラグインの画像

 

 

 

Color Blind for Fimga

8つの異なる視覚障害のタイプに応じて、デザインを表示できるプラグイン。色盲の人がどのように見えるかに基づいて色を変更したバージョンを、自動作成してくれます。

Color Blind プラグインの画像

 

 

 

Pexels for Figma

プロトタイプツールFigmaアプリ上で、フリー写真の検索を行うことができるプラグイン。検索できる写真は、どれもクレジット表記で商用利用にも対応しており、編集も自由自在。

pexel-for-figma プラグインの画像

 

 

 

Handz 3D Illustration

あらゆる人種のハンドサインを、立体的なイラストレーションで描き、Figma上に自由に追加できるプラグイン。

Handz 3D Illustration プラグインの画像

 

 

 

Blush

デザインにイラストを手軽に追加できるプラグイン。お好みのイラストを選び、構図するだけの簡単操作で、イラストのバリエーションの変更、カスタマイズも可能。

Blush プラグインの画像

 

 

 

Confetti

誰でも簡単にひらひらと舞う紙吹雪デザインパターンを作成できるプラグイン。

Confetti プラグインの画像

 

 

 

Avatars

人工知能、AIが作りだした架空の人物写真を、アバターとして追加できるプラグイン。

Avatars プラグインの画像

 

 

 

Roto

Illustratorの3Dツールに相当するFigmaプラグインで、素晴らしい3Dグラフィックやロゴをほんの数クリックで完成させます。

Roto プラグインの画像

 

 

 

Looper

数クリックでカスタマイズ可能なループ機能を利用したデザインプラグイン。複雑なグラフィックやエフェクトを自動で作成できます。

Looper プラグインの画像

 

 

 

Hidden Kittens

Figmaでフレームを選択し、このプラグインを適用すれば、選択したフレームごとにランダムでネコが出現します。ネコ好きのひとへ。

hidden-kittens-example プラグインの画像

 

 

 

Custom Graph for Figma

自分のデザインをベースにしたチャート図を作成できるFigmaプラグイン。

Custom Graph プラグインの画像

 

 

 

Figma to Code

Figmaで作成したデザインをTailwindやFlutter,SwiftUIフレームワークを使って、レスポンシブレイアウトに自動変換してくれるツール。Bootstrapももちろん対応しています。

figma-to-code-tailwind プラグインの画像

 

 

 

SwiftUI Inspector

作成したデザインを瞬時にコードに変換してくれるFigma専用プラグイン。デザインスタイルをFigmaからXcodeプロジェクト用に簡単変換でき、開発ワークフローを改善します。

swiftui プラグインの画像

 

 

 

Figma Low Code

Figmaで作成したデザインをVue.jsアプリケーションように変換し、再度デザインを編集してもアップ自動アップデートしてくる機能に注目のプラグイン。

figma-low-code プラグインの画像

 

 

 

Overlay for Figma

Figmaでデザインしたコンポーネントを、ReactやVue、HTML用コンポーネントに変換してくれるプラグイン。

Overlay for Figma プラグインの画像

 

 

 

Iconify

マテリアルデザイン・アイコンやFontAwesome、Twitter絵文字など60を超えるアイコンセット、合計5万個以上の素材をベクターシェイプとして追加できるプラグイン。

Iconify プラグインの画像

 

 

 

Visual Eyes

ユーザーがどのように完成したプロトタイプを見ているのか把握し、どれだけスッキリとした美しいデザインか判断してくれる、次世代のデザインアシスタントツール。

Visual Eyes プラグインの画像

 

 

 

Figma Bubble

Figma上にてコード知識不要でWebアプリを手軽に作成できるツール、最近増えているサービスのひとつ。

figmabubble プラグインの画像

 

 

 

watchOS Colors

AppleWatchで使われている配色と名前をまとめたFigmaファイル。美しいカラーリング名にも注目。

watchOS Colors プラグインの画像

 

 

 

All buttons variants for FIgma

あらゆるスタイル、サイズのボタン960個を揃えたコンポーネント集。配色も自由に変更できます。

All Buttons variants for Figma プラグインの画像

 

 

 

Figma Auto Layout playground

コンテンツに反応するダイナミックなフレームを作成できる、FigmaのAuto Layout機能を詳しく解説した体験型チュートリアル。新しいアップデートで任意の方向にストレッチしたり、パディングを個別で調整できたように。

Figma Auto Layout プラグインの画像

 

 

 

Figma Animation Template

プロトタイプに素敵なアニメーションを追加できるFigmaテンプレート。デザインに合わせて自由にカスタマイズ可能です。

Figma ANimation Template プラグインの画像

 

 

 

Mobile Design System Starter

モバイルサイトやアプリ向けのプロジェクトを手掛けるときに使いたい、幅広いセレクションのコンポーネントを揃えたデザイン・スターターキット。

Mobile Design System Starter プラグインの画像

 

 

 

Uxerkit

ユーザーフローの作成に便利な、柔軟にカスタマイズできる矢印記号をコレクションした素材。SketchとFigmaで利用可能。

Uxerkit プラグインの画像

 

 

 

Tetrisly

プロトタイプツールFigmaで、デザインシステムとフレームワークを作成するスターターキット。2,500を超えるコンポーネントがオーガナイズされた巨大ライブラリ。

tetrisly プラグインの画像

 

 

 

Templatery

Figmaで作成できる、プレゼンテーション用の美しいスライド資料をまとめたライブラリで、今後も継続アップデート予定。

templateryの画像

 

 

 

Shape Illustration

28,000を超えるすべてカスタマイズ可能なアイコンやイラストをセットにした有料アイテムで、無料デモとしてFigma用イラスト、アイコンファイルをダウンロード可能。

shape-illustrationの画像

 

 

 

Humans

デザインに立体感を演出できる3Dキャラクターイラスト素材セット。FigmaとBlender用ファイルで収録されており、無料デモ版と有料版があります。

humans_3d_character_packの画像

 

 

 

Figurative

FigmaプロトタイプツールをiPad専用に最適化したアプリ。カスタムフォントやApple Pencil、タッチジェスチャーにも対応。まるでPhotoshop for iPadのよう。

figurativeの画像

 

 

これまでの人気プラグインは別途まとめています。以下の記事もチェックしてみると良いでしょう。

Figmaは、現在人気となっているプロトタイプツールのひとつです。 SketchやAdobe XDと比較すると、「リアルタイムで他の人とコラボレーショ

 

 

ショートカットキーをつかって、より快適な作業を

 

ショートカットを覚えることで、制作時間の短縮、効率化を図ることができます。以下の記事では、「もっと早く知っておけばよかった!」と思ってしまう便利なFigmaショートカットを厳選しています。

どんなツールもショートカットを覚えることで、制作時間の短縮、効率化を図ることができます。しかし、膨大にあるショートカットキーをすべて覚えるのはなかなか大変な作業です