龍神 菜緒
龍神 菜緒

necco note

Figmaコンポーネント・スタイル整理におすすめのプラグイン6選

  • Web Design

ウェブサイトやUIデザインの際に便利なFigmaのコンポーネント、テキストやカラーのスタイル登録。

プロジェクトの途中でスタイルが変更になったり、コンポーネントがどんどん増えたり…

デザイナーやエンジニアなど、チームの誰にとっても分かりやすく整理するのって意外に大変なんです!

そこで今回は、Figmaでのコンポーネント・スタイル整理が楽になる便利なブラグインを6つご紹介します。

UIデザインを行うデザイナーが、実際に業務に使って便利だったものばかりですので、ぜひ一度試してみてください!

1.スタイル未登録のテキストやカラーをリスト化できる「Design Lint」

Design Lintのプラグインアイキャッチ画像

スタイルが適用されていないテキストやカラー要素をリスト化してくれるプラグイン。

その場で一括選択して、スタイルを充てることもできるので便利です! テキストやカラーの他にも、角丸やドロップシャドウなどもリスト化可能です。

未登録のテキストやカラーなどがリストで表示され、スタイルを当てはめるだけで一括反映

「Design Lint」のページはこちら

2.インスタンスの使用箇所を検索できる「Instance Finder」

Instance Finderのプラグインアイキャッチ画像

選択したインスタンスが使われている箇所を検索できるプラグイン。

デザインのページ数が多くなってくると、コンポーネント変更した際に思いもよらない箇所でデザイン崩れが発生してしまうことも…

事前にInstance Finderで使用箇所を確認しておくことで、安心してコンポーネントの変更が可能です。

また、何ヶ所に使用されているかも確認できるので、不要なインスタンスを削除する際の確認ツールとしても便利です。

「Instance Finder」のページはこちら

3.登録したスタイルを一括で変更できる「Batch Styler」

Batch Stylerのプラグインアイキャッチ画像

登録済みのスタイルを一括で変更できるプラグイン。

スタイル登録後にフォントサイズやカラーを変更したいときにも便利です。

こちらのプラグインについては過去Noteで詳しくご紹介しています。

Figmaでテキストスタイルを早く登録する方法「Register Text Styles Super Duper Fast !!!」をFigma Communityに公開しました。

「Batch Styles」のページはこちら

4.コンポーネントを整理するのに便利な「Propstar」

Propstarのプラグインアイキャッチ画像

コンポーネントを綺麗に整理するプラグイン。

コンポーネントを選択してプラグインを実行すると、自動でバリアントを読み取って綺麗に並べてくれます。

テキストでも仕様を記載してくれるので、とても分かりやすいです。

ボタンなどバリアントの種類の多いコンポーネントには、ぜひ使っていただきたい…!

登録済みのプロパティも自動で反映されるので、わざわざ記入する手間なし

「Propstar」のページはこちら

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

EightShapes Specsのプラグインアイキャッチ画像

コンポーネントの仕様書を自動で作成してくれるプラグイン。

コンポーネント内で使用しているカラー、フォントサイズ、余白、線の太さなどをリスト化して書きだしてくれます。

デザイナーからエンジニアに実装を依頼する際に意外と時間がかかる、仕様やガイドラインをまとめる作業を効率的に進めることができます。

かなり丁寧な仕様書が生成されます

「EightShapes Specs」のページはこちら

6.Figma上で翻訳ができる「Deepl translate」

Deepl translateのプラグインアイキャッチ画像

海外のチームメンバーと一緒にデザイン、実装する場合や、英語でコンポーネントやレイヤーの命名をする場合に使用していたプラグイン。

ある程度まとまった量のテキストを翻訳する際に便利です。

選択したテキストを別タブでDeepL翻訳にかけてくれます。また、翻訳したテキストをそのままFigmaのテキストレイヤーに貼り付けることもできます。

わざわざブラウザで翻訳をかけなくてもいいので、翻訳作業がかなり楽になります。

DeepLの会員登録が必要なので、事前に登録してから使用してください。

翻訳したい箇所を選択するだけ。一瞬で翻訳が完了

「Deepl translate」のページはこちら

まとめ

今回は、コンポーネントやスタイル整理の際に便利なFigmaのプラグインをご紹介しました。

デザイン段階でしっかりとコンポーネントやスタイルを整理しておくことで、実装や運用がよりスムーズになります。

ご紹介したプラグインは、シンプルな操作ですぐに使えるものばかりなので是非試してみてください。

龍神 菜緒

龍神 菜緒

Nao Ryujin

神奈川県生まれ。大学卒業後は損害保険会社に入社し、官公庁や企業の従業員向け商品をメインに担当。休職をきっかけにデザインと出会い、個人事業主としての活動を開始。デザインを始めた当初からneccoがつくるものに魅力を感じており、秋田への転居もあり思い切って応募。2022年12月より参画。好きなものはデザイン、犬猫、ジンベエザメ、コーヒー、ビール、辛いもの、旅行。蒙古タンメンの秋田出店を切望している。

SHARE

XFacebook

Other Note

necco note
デザイン雑誌WebDesigning表紙写真

雑誌掲載のおしらせ | GO GXのウェブサイトが「Web Designing」4月号に掲載されました