はじめに
デザイン納品時にテキストスタイルやカラースタイルをしっかり設定しておくことはプロの基本
この記事でわかること
この記事では、**Figmaで使われているフォントを一括でチェック＆管理できる無料プラグイン「Design Lint」**についてご紹介します。
・Design Lintってどんなプラグイン？
・どうやって使うの？
・使うと何が便利になるの？
といったポイントを、初心者にもわかりやすく解説していきます！
📘 この記事を最後まで読めば…
デザインに使われているフォントの種類やスタイルを一瞬で確認する方法がわかります。
さらに、フォントの抜け漏れチェックやスタイルガイドの作成がぐっとラクになり、チーム内でのデザイン共有や管理もよりスムーズに行えるようになります。
Design Lintとは？
Design Lintは、Figma上のテキストレイヤーに使われているフォント情報を一括で抽出できる無料プラグインです。
デザイン内で使用されているフォントの種類やスタイルを手軽に確認・整理することができ、デザインの統一性チェックや仕様書の作成に役立ちます。
🔗URL:https://www.figma.com/community/plugin/801195587640428208/design-lint
実際のワークフロー
① プラグインを開く
② Design Lintを開きながら使うフォントスタイルを設定
「Design Lint」で未統一なテキストスタイルを一括検出
- ファイル全体にある「未設定のフォント」「直接指定されたスタイル」をリストアップ
- 対象をクリックすると該当レイヤーがハイライトされる
📍ポイント：手作業で探す必要なし！見逃しや抜け漏れをゼロにしつつスタイル設定が可能！
③ Fix Allを押すと、該当レイヤーに一括適用！
作成したスタイルと一致するものを自動的に変換してくれる
- Design Lintが「このレイヤーはこのスタイルに当てはまりそう」と判定して置き換え
- 手動適用せずに済むから時短に！
📍ポイント：「Fix All」ボタンをクリックし設定したスタイルを一括で紐づけることができる！
類似プラグインとの比較
Design Lintの他に、フォントの使用状況を把握できるプラグインとしてよく使われているのが「Font Scanner」です。
使用中のフォントを一覧で確認できる便利なツールですが、Design Lintはそれに加えて、未設定・未統一のスタイルを検出することで、より実務的なスタイル整理や納品チェックに役立ちます。
なぜDesign Lintが優れているのか？
- Font Scannerは”何が使われているか”を一覧化するには便利ですが、「スタイルが使われていない」「ルールから外れている」といった部分は検出できません。
- 一方、Design Lintは整っていない部分”を洗い出すことに特化しており、納品前の品質管理や、スタイル設計の補助ツールとして非常に有効です。
- 実際の整理作業においては、Design LintのFix機能でスタイル適用まで完結できるという点で、一歩進んだ活用が可能です。
まとめ
- Font Scannerは、フォントスタイル設計の“入口”として最強のプラグイン
- 納品前のスタイル整理にかかる時間が大幅に短縮できる
最後に…
スタイル整理は“やるべきだけど後回しになりがち”な作業。
Design Lintを取り入れるだけで、その負担をぐっと軽くしつつ、整ったデザインに仕上げられます。
コメント