ガイドライン制作に有用なFigmaプラグイン3選！
ご無沙汰しております。shutoです。
前回は配色についてのnoteを書かせていただいたのですが、少し閲覧していてだいている人も増え、とても感謝しております。
今回はガイドライン制作でFigmaを使用してみて感じた、おすすめプラグインを3個ご紹介したいと思います。
何かのお役に立てれば幸いです。
①Prop Star
まず紹介するのが「Prop Star」というプラグインになります。
このプラグインを使用することで、制作したコンポーネントをヴァリアント、プロパティごとに綺麗に分類することができます。
もちろんこのまま整頓したものをガイドラインに載せていく、という使い方もできますし、制作したコンポーネントのヴァリアントの過不足が無いかの確認、という使い方もできます。
使用方法としてはコンポーネント（ヴァリアントを制作済みのもの）を選択して実行するのみです。
コンポーネントを配置しているフレームにオートレイアウトがかかっていると整頓がされないため、注意が必要です。（プラグインが効かない際はレイヤーで不要なオートレイアウトがかかっていないかチェックしてみてください）
②Instance Finder
次に紹介するのが「Instance Finder」というプラグインになります。
こちらは制作したコンポーネントのインスタンスをページのどこの部分に使用しているか、確認ができるというプラグインになります。
個人的に助かった場面がコンポーネントに変更を加えた後、インスタンス全てに反映できているかを確認する場面になります。
このプラグインがなければとてつもない時間がかかっていたと思うので、すごい助かったプラグインになります。
③Design Lint
最後に紹介するのが「Design Lint」というプラグインになります。
こちらは選択した中の、スタイル登録されていないカラー、フォント等をピックアップしてくれるプラグインになります。
ガイドラインを制作して、その中で制作したスタイル、コンポーネントを使用してページ等を制作していく際に、スタイル登録されていないカラーを使用しているところやスタイル登録されていないフォントを使用していないかのチェックに使用しました。
こちらも手作業で全て探すのは時間がかかり、このプラグインを使用することでチェック時間がかなり短縮できたので便利なプラグインだと思います。
また、スタイル登録されていない箇所を一括選択して、スタイルを当て直すこともできるので、便利だと思いました。
最後に
上記の3つのプラグイン、是非試してみてください！特にガイドライン制作、それを元にしたページ制作の際は力になってくれるはずです！