Advertisement

 

この記事では、デザインツールFigmaに追加しておく便利な、2020年のベストプラグイン42個をまとめてご紹介しています。

 

実際にインストールしてみた、利用頻度の高いお気に入りのプラグインが中心となっており、年末ということでツールの整理を兼ねています。

 

プラグインをインストールすることで、自分だけのオリジナルの、使いやすいカスタマイズが可能で、作業効率をグッとアップさせることができます。

 

 

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

 

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

 

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

 

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

 

 

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

 

 

 

【2020年版】デザインツールFigmaの年間ベスト・プラグインまとめ

 

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

 

Anima for Figma

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

anima-for-figma-1

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

 

 

Gifmock for Figma

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

gifmock-for-figma

 

 

 

Shadow Picker

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

 

 

 

Smooth Shadow

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

 

 

 

Storyset by Freepik

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

 

 

 

Font Preview

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

 

 

 

Spelll – Spell Checking for Figma

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

 

 

 

Tracking for Figma

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

tracking-for-figma

 

 

 

Noted for Figma

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

figma-noted

 

 

 

Speedboat for Figma

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

 

 

 

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

 

 

 

Pexels for Figma

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

pexel-for-figma

 

 

 

Handz 3D Illustration

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

 

 

 

Blush

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

 

 

 

Confetti

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

 

 

 

Avatars

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

 

 

 

Roto

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

 

 

 

Looper

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

 

 

 

Hidden Kittens

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

hidden-kittens-example

 

 

 

Custom Graph for Figma

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

 

 

 

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用コンポーネントに変換してくれるプラグイン。

 

 

 

Iconify

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

 

 

 

Visual Eyes

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

 

 

 

Figma Bubble

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

figmabubble

 

 

 

watchOS Colors

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

 

 

 

All buttons variants for FIgma

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

 

 

 

Figma Auto Layout playground

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

 

 

 

Figma Animation Template

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

 

 

 

Mobile Design System Starter

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

 

 

 

Uxerkit

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

 

 

 

Tetrisly

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

tetrisly

 

 

 

Templatery

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

templatery___figma_presentation_templates___templatery___figma_presentation_templates

 

 

 

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ショートカットを厳選しています。

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