この記事ではサイトデザインを行う上で便利なFigmaのプラグインをgifつきで紹介します!
私が今日までよく使用した、または印象に残っていて便利だと思ったもの5選です。
ちなみにプラグインをサッと出す方法は
⌘+K
でアクションを出し「プラグインとウェジット」の欄をクリック
すると最近使用したプラグインの一覧や登録済みのプラグイン、プラグインの検索を行うことができます。
📹【⌘＋Kでサッとプラグインを選択できる】
プラグイン紹介
Design Lint
一言でこのプラグインを言い表すと
デザインの一貫性をチェックし、改善点を見つけるツールです。
このプラグインはスタイルが適用されていない要素を見つけ出し、既存のスタイルを適用することや、新規でスタイルを作成することができます。
私は、このプラグインの基本的な使い方に加えて、特定のスタイルの内容（例えばフォントサイズなど）を変更する際に、そのスタイルが他にどこで適用されているかを確認するためにも使用しています。
ある程度、デザインが仕上がっている段階でスタイルを変更する際には、慎重な操作が求められます。
あまり考えずにスタイルの変更を行うと予期せぬ箇所にそのスタイルが適用されている場合があり、この変更によってデザイン全体のレイアウト崩れに影響を与えることがあります。
この予期せぬデザイン崩れを防ぐためにDesign Lintを使用してスタイルの中身を確認していきます。
📹【Design Lintを使用して登録しているフォントスタイルの確認と調整】
Contrast
一言でこのプラグインを言い表すと
色のコントラストにおけるアクセシビリティチェックツールです。
「Contrast」はデザインのアクセシビリティを向上させるためのプラグインで、特に色のコントラスト比をチェックするのに便利です。Webアクセシビリティ基準（WCAG）に基づき、視覚障害や色覚異常を持つユーザーでも読みやすいデザインを作るために役立ちます。
個人的にこのプラグインはよく使用します。
アクセシビリティ対応したサイト制作のために今後も使用していきたいです。
📹【Contrastを使用して背景とフォントカラーの相性を確認】
Skew
一言でこのプラグインを言い表すと
なんでも斜めに傾けさせることができるツールです。
「Skew」について説明すると、オブジェクトやテキストを斜めに傾けるためのプラグインです。
Figmaの標準機能ではオブジェクトを斜め方向に変形させるのが難しいため、このプラグインを使うと簡単に斜めにデザインでき、立体感や動きのある見た目を作るのに便利です。
例えば、テキストを斜体にしたいけれどフォントの設定でイタリックにできないときに使用します。
加えて、水平方向と並行方向どちらにも傾けることができるので何かデザインにインパクトを与えたい時に使用しています。
📹【Skewを使用してテキストを斜めに傾ける】
Icons8 Background Remover
一言でこのプラグインを言い表すと
画像の背景透過を行うツールです。
「Icons8 Background Remover」は画像の背景を簡単に消去できるプラグインです。
画像編集ソフトを使わなくても、プラグインを使ってFigma内で手軽に背景を消せるので、人物やオブジェクトを透明な背景としたい場合に便利です。
📹【Icons8 Background Removerを使用して画像の背景を削除する】
html.to.design
一言でこのプラグインを言い表すと
WebサイトのデザインをそのままFigmaに持って来ることができるツールです。
「html.to.design」について説明するとwebページのリンクをFigmaで編集可能なデザインに変換するプラグインです。
このプラグインを使用すると、ウェブサイトのレイアウトやスタイルをそのままFigma上で再現できるため、デザインを参照しながらの修正や改善がしやすくなります。
既存のWebサイトをほぼそのままFigma上に再現できるので、現状のサイトを改良する際に非常に便利です。
改良が必要な部分だけ取り出して編集し、また現状のデザインをそのまま流用できる部分はそのまま使用することができます。
またサイトをFimgaに取り込む際、オートレイアウト機能を自動的に追加させることもできるので、ある程度レイヤーの編集が楽になります。
ただし気をつけておくポイントとして、このプラグインの無料版は1ヶ月で取り込むことができるサイト数は10枚まで、と限られています。（本記事公開時点での枚数）
また、画面幅を任意のサイズに設定してFigmaに取り込むことが可能ですが、取り込み元のサイトがレスポンシブ対応されていないと指定した画面幅によってはデザインがうまく整った状態で取り込めない、ということもあるようです。
ですが、これらの留意点があったとしても、「html.to.design」は非常に便利なプラグインです。
📹【html.to.designを使用してQiitaのサイトをFigmaに落とし込む】
まとめ
以上Figmaのプラグイン5選でした。
今回紹介したプラグインは本当によく使用していますが、マストで使用するのはDesign Lintです。
テキスト内容の修正に伴ってフォントスタイルを変更することは本当によくあることなのでいつもこのプラグインに助けられています。
テキスト修正繋がりで言うと
テキストスタイルの中身が全く同じの内容を炙り出すプラグインが欲しいな、と何度か思ったことがあります。
デザインの修正をしていると最初に作成していなかったスタイルを作成する、という場面が大いにあるのですが、これを繰り返しているとスタイルがいくつも作成され、たまに中身が全く同じスタイルを作成しているという時があります…
自力だと中身が同じスタイルを探し出すのが非常に大変なため、それを見つけ出すプラグインがあったらいいなぁ、と思っています。
最後までお読みいただきありがとうございました！
この記事で少しでも皆さんのFigmaデザインが効率化されますように！🌠