【Figma】Better Font Pickerプラグインの使い方

Figmaはデザイン業界で非常に人気のあるツールで、その拡張性の高いプラグインエコシステムが多くのデザイナーに愛用されています。その中でも「Better Font Picker」プラグインは、フォント選びをより効率的にするための優れたツールです。Figmaの標準的なフォント選択機能では物足りなさを感じることもありますが、「Better Font Picker」を使うことで、作業をスピーディーに進め、理想的なフォントを見つける手助けをしてくれます。本記事では、このプラグインの「利用シーン」と「操作方法」について詳しく解説します。

利用シーン

「Better Font Picker」は、フォント選びをスムーズにし、デザイン作業の効率を大幅に向上させるプラグインです。以下に、具体的な利用シーンをいくつか紹介します。

複数のフォントを比較したい場合

デザインプロジェクトでは、さまざまなフォントスタイルを試して比較することが求められることがあります。特に、ブランドガイドラインに合ったフォントを選ぶ際や、UIデザインでの読みやすさや視覚的な一貫性を確認する場合、「Better Font Picker」を使えば、フォントのプレビューを素早く切り替えて比較することができます。

実例

ヘッダーやボディテキストのフォントをデザイン全体に合うよう調整する。

新しいブランドロゴをデザインする際に、適したフォントを複数試してみる。

Figma標準のフォントリストが扱いにくい場合

Figmaの標準フォント選択メニューは、使用可能なフォントが増えるにつれて複雑になります。スクロールしながらフォントを探すのは効率が悪く、「選びたいフォントがすぐに見つからない」といった問題に直面しがちです。「Better Font Picker」は、このプロセスを視覚的に簡略化し、フォントプレビュー付きのリストを提供するため、視覚的な比較が容易になります。

実例

デザイン案を複数クライアントに提出するため、異なるフォントスタイルを簡単に試したい場合。

プロジェクトで使用可能なフォントが多すぎて選択に時間がかかる場合。

カスタムフォントやウェブフォントの管理

FigmaではローカルフォントやGoogle Fontsを利用できますが、標準のフォントメニューではフォントの詳細なプレビューができません。「Better Font Picker」を使えば、ローカルフォントやGoogle Fontsを含むすべてのフォントを視覚的にプレビューしながら選ぶことができます。

実例

クライアントのブランドフォント（ローカルフォント）を素早くプレビューして選びたい場合。

Google Fontsからプロジェクトに最適なフォントを迅速に見つけたい場合。

デザイン効率を上げたい場合

デザイン作業を効率化したいデザイナーにとって、「Better Font Picker」は非常に役立ちます。時間を短縮しながらも、適切なフォントを選ぶことができるため、作業効率が向上します。

操作方法

プラグインのインストール

1.Figmaの画面下部にあるプラグインをクリックします。

2.「Plugins」タブを選択し、検索バーに「Better Font Picker」と入力します。

3.プラグインが表示されたら、「実行」をクリックしてインストールを完了させます。

フォント選択画面の使い方

フォントリストの表示

「Better Font Picker」を起動すると、フォントリストがプレビュー付きで表示されます。各フォントがサンプルテキストでプレビューされるため、どのフォントがどのように表示されるのかを事前に確認できます。

検索バーを活用

画面上部の検索バーを使って、名前でフォントをフィルタリングできます。特定のフォントをすぐに見つけたい場合に便利です。

プレビューの拡大縮小

フォントリストのプレビューサイズを調整することで、小さなプレビューを一覧で確認したり、大きなプレビューで細部を確認したりすることが可能です。

フォントの適用

1. プレビューリストの中から使用したいフォントを選択します。
2. 選択したフォントが即座にFigmaのキャンバス上のテキストに適用されます。

カスタムテキストのプレビュー

「Better Font Picker」では、プレビュー用のサンプルテキストをカスタマイズできます。デザインで実際に使う文言を入力することで、選んだフォントがどのように見えるかをよりリアルに確認できます。

高度な設定

フォントのフィルタリング

フォントリストをローカルフォントやGoogle Fontsなどの特定のカテゴリーで絞り込むことができます。これにより、必要な選択肢だけに絞り込み、効率的に選ぶことが可能です。

最近使用したフォント

よく使うフォントは「Recently Used Fonts」のセクションに自動的に保存され、すぐにアクセスできるため、頻繁に使用するフォントの選択がより簡単になります。

適用後の調整

フォントを適用した後でも、Figmaの標準ツールでさらに細かい調整が可能です。

• フォントサイズ
• 行間（Line Height）
• 字間（Letter Spacing） これらを調整して、デザイン全体の一貫性を保つようにしましょう。

まとめ

「Better Font Picker」は、Figmaでのフォント選択を大幅に効率化するプラグインです。視覚的なプレビューを通じてフォントを選べるため、デザイナーが直感的に選択でき、時間を節約しながら最適なフォントを簡単に見つけることができます。

主なメリット

視覚的なフォントプレビューによる迅速な比較が可能。 検索やフィルタリング機能で、必要なフォントにすぐにアクセスできる。 カスタムテキストのプレビュー機能で、デザインのイメージをリアルに確認できる。

おすすめの活用シーン

ブランドロゴやアイコンのデザインに最適。 複数案をクライアントに提案する際のフォント比較に便利。 大量のフォントが必要なプロジェクトでの効率化を図れる。 「Better Font Picker」を使って、Figmaでのデザイン作業をよりスムーズかつ効率的に進めましょう。このプラグインは、時間短縮と品質向上の両方を実現できる頼もしいツールです。