【Figma】現役UIデザイナーが選ぶベスト素材＆プラグイン

はじめに：Figmaを使いこなすカギは「素材」と「プラグイン」

Figmaは、UIデザイナーにとって欠かせないツールになりました。デザイン・プロトタイピング・チームとの共有まで、すべてブラウザ上で完結するその利便性は、まさに「現場向け」。

Figmaには膨大な公式／非公式リソースが揃っており、UIキットやアイコンセットなどの素材（components, assets）、そして作業を自動化・補助してくれるプラグインが特に強力です。

以下からは、それぞれおすすめを厳選して紹介していきます。

プチTip：Figma素材は「コミュニティ」から探すのが基本！

Figma上部メニューの「コミュニティ」 を開く
キーワード検索（例：「blog ui」「cta」「gutenberg」など）を使って素材を探す
気に入ったファイルは「Figmaで開く」ボタンで自分のワークスペースにコピー可能
プラグインの場合は「場所を指定して開く」で使用したいFigmaファイルの一覧が表示されるので、該当するファイルを選択

おすすめ素材（UIキット・コンポーネント）3選

Untitled UI – 無料＆有料どちらも使える万能UIキット

https://www.untitledui.com/

Webアプリ／SaaS UI／LPの初期設計に

ポイント：クリーンで使いやすく、Auto Layout対応。配色やタイポグラフィもバランス良好。無料版でも十分なパーツが揃っています。
活用例：SaaSの管理画面モックアップを30分で完成させたことも。配色・文字サイズのルールが明快なので、チーム作業でもズレが出にくいです。

Material Design 3 Design Kit

https://m3.material.io

Googleが提供する最新のMaterial Designガイドラインに準拠した公式UIキット

信頼性と汎用性: 世界中で広く使われているMaterial Designの原則に基づいているため、どんなプロダクトにも馴染みやすいです。
最新のUIトレンド: 定期的にアップデートされ、常に最新のデザインガイドラインに対応しています。

Iconoir（アイコンセット）

https://iconoir.com

アプリやサービスで使うアイコンパックとして

ポイント：線の太さが絶妙で、モダンな印象を保ちつつも親しみやすいデザイン。Figma用ライブラリが配布されており、検索しながらすぐに配置可能。
補足：ブランドトーンに合わないと感じたときも、線の太さや角丸を簡単に調整できて柔軟です。

ワイヤーフレーム作成におすすめのプラグイン

Wireframe

作成者：Hexorial Studio

無料のプラグインで、Web、モバイル、タブレット向けのテンプレートが豊富

特徴：アイデアのブレインストーミングや、プロジェクトの初期段階での計画に非常に役立ちます。基本的なワイヤーフレーム要素を簡単にデザインに挿入し、カスタマイズ可能
信頼性: 多くのFigmaユーザーに利用されており、非常に人気

Hand Wireframe

作成者：Sonny Lazuardi

手書き風のワイヤーフレームを作成できるユニークなプラグイン

特徴: 既存のデザインをワンクリックで手書き風のワイヤーフレームに変換することも可能。
ブレインストーミングの際に、よりラフな印象でアイデアを共有したい場合に適しています。ただし、Text、Rectangle、Circle、Linesのみをサポート

Wire Box

作成者: Seán Halpin

高度なデザインの画面をシンプルなワイヤーフレームに変換するプラグイン

特徴: 既存の製品に新しい機能を追加する際に、ワイヤーフレームをゼロから描く必要がない場合に便利です。
信頼性: 特定のニーズに特化したプラグインですが、評価は高いです。

Figma × WordPress連携に役立つプラグイン／素材

Anima

作成者／提供元：Anima App, Inc.

FigmaデザインをReact、HTML、Vue、Tailwind CSSなどのコードに変換できるAI搭載プラグイン

主な機能：

デザインからReact、HTML、Vue、Tailwind CSSへのコード変換
AIによるコードのパーソナライズ
WordPressブロック化しやすい構造を出力可能。

Builder.io

作成者／提供元：Builder.io

FigmaデザインをHTML、React、Vue、Angular、Tailwind CSSなどのコードに変換できるAI搭載プラグイン

主な機能：

Figmaデザインのコード変換（React、Vue、Angular、HTML、Tailwind CSSなど）
AIによるコードの最適化
Builder.ioのVisual CMSとの連携

サービスや機能に特化したプラグイン／素材

Figma to Studio

作成者／提供元：Studio

Figmaで作成したデザインを、ノーコードのWebサイト構築プラットフォーム「STUDIO」に簡単にインポートできるFigmaのプラグイン

効率化と時短: デザインと実装の連携がスムーズになり、Webサイト制作にかかる時間と労力を大幅に削減できます。

Material Symbols

作成者／提供元：Google Fonts

Googleが提供するアイコンセット「Material Symbols」をFigmaで利用できるプラグイン

豊富な種類: 3万5千以上のアイコンが含まれており、様々な用途に対応できます。
可変フォント: 従来のアイコンフォントとは異なり、「Weight（太さ）」「Fill（塗りつぶし）」「Grade（明暗）」「Optical size（視覚サイズ）」といったプロパティを調整できるため、より柔軟なカスタマイズが可能です。

Google Fonts: pairings