Figmaでおすすめのプラグイン5選

Figmaは最近トレンドになっているデザインツールですが、まだ使いこなせていない方も多いのではないでしょうか？
特にプラグインは、数も多くどれを使ったらいいかわからない方も多いのかと思います…!
デザイナー向けには多くのプラグインが紹介されていますが、Webディレクター向けの情報は少ないように感じます、、
そこで今回は特にWebディレクターにおすすめのFigmaプラグインを5つ紹介いたします！

①Webサイトをデザインに変換できる「html.to.design」

URLを入力して1クリックするだけで、Figmaファイルに変換できるプラグインです。
画像としてインポートされるのではなく、テキストはテキスト、ボタンやBOXなどはシェイプとしてインポートされるため、既存サイトの一部デザインを変更する、参考サイトをもとにワイヤーフレームを作成する際におすすめです。
※無料での使用は月に20回までとなります。

▼プラグインの使い方

上部にあるメニューの右から3番目をクリックし、プラグインを選択。html.to.designと検索しクリック
変換したいURLを入力し、importをクリックすると編集可能な状態で書き出されます

※viewpotrsより書き出すデスクトップサイズ、スマホサイズ等、書き出すサイズを選べます

②コンポーネント（インスタンス）使用箇所を確認できる「instance finder」

Figma内で使用しているコンポーネント（インスタンス）を検索・確認できるプラグインです。
ワイヤーフレーム作成時に各ページで共通しているパーツはコンポーネント化して管理することがあるかと思いますが
複雑なデータになるとどの画面で使用したかを把握しづらくなりますが、そんな時に便利なプラグインです！
コンポーネント（インスタンス）の整理の際に役立つこと間違いなしです！

▼プラグインの使い方

上部にあるメニューの右から3番目をクリックし、プラグインを選択。instance finderと検索しクリック。検索したい親コンポーネントを選択し、findを押す

ページごとに該当する子コンポーネントが表示されるので、該当のものをクリックすると使用された箇所にカーソルが当たります。

③一括置換ができる「Find and Replace」

特定のテキストの削除や、別のワードへの置換等ができるプラグインです。
テキスト修正が入った際によく起きる「表記ゆれ」ですが、このプラグインを使えば防ぐことができます。
一括置換はもちろん、特定の箇所のみ変更したいといったことも対応です。

▼プラグインの使い方

上部にあるメニューの右から3番目をクリックし、プラグインを選択。Find and Replaceと検索しクリック。

検索したい文言/レイヤーをfindに入力し、置換したい文言/レイヤー名をRepalce withに入力。
すべて一括置換する場合は「ReplaceAll」をクリック。1件ずつ確認しながら置換する場合は「Replace All」をクリックすると置換されます

④コントラスト比がわかる「Contrast」

文字と背景のコントラスト比を簡単に調べられるプラグインです。
プラグインから「Contrast」を選択し、調べたいフレームをクリックするとスコアが表示されます。
文字サイズごとに評価が確認できるうえ、WCAG 2.0で指定された評価軸（AA、AAA）の両方を一括で確認できます。

▼プラグインの使い方

上部にあるメニューの右から3番目をクリックし、プラグインを選択。Contrastと検索しクリック。

調べたいオブジェクトをクリックするとアクセシビリティの評価が確認できます。

⑤仕様書の自動生成ができる「EightShapes Specs」

コンポーネントで使用しているカラー、フォントサイズ、余白等を自動でリスト化するプラグインです。
エンジニアがスムーズに開発を着手できるよう、ディレクターやデザイナーのほうで、仕様書やガイドラインを作成しますが、意外と時間がかかりますが
自動でコンポーネントの仕様を書き出してくれるので、作業の効率化はもちろん、資料の統一化もできるので一石二鳥なプラグインです。

▼プラグインの使い方

上部にあるメニューの右から3番目をクリックし、プラグインを選択。EightShapes Specsと検索しクリック。
仕様書を作成したいフレームを選択し、「Create Spaces」をクリックすると、仕様書が表示されます。

※おまけ：プラグインのインストール方法

Figmaのプラグインをインストールする場合、Figma Communityページにアクセスし、インストールしたいプラグインを検索します。
該当のプラグインをクリックすると、詳細ページに移動するので右上にある「install」をクリック（使ってみる）を押すとインストールできます。
プラグインを使用する際は、ファイル上部にあるメニューの右から3番目のアイコンをクリックします。