# Figmaのフォント選択時に分かりやすくプレビューしてくれるプラグイン

URL: https://webrandum.net/figma-plugin-font-preview/
公開日: 2022-03-01
更新日: 2022-03-01
カテゴリー: デザイン
タグ: Figma, Figmaプラグイン
出典: Webrandum（著者: サイトウ マサカズ）

Figmaはフォント選択時にフォント名しか出てきません。

しかしプラグインを使うと、フォントプレビューされた状態で一覧になるので、探すときに少し便利になります。

## フォントプレビュープラグイン

有名なのは「[Better Font Picker](https://www.figma.com/community/plugin/739922281164562258/Better-Font-Picker)」と「[Font Preview](https://www.figma.com/community/plugin/890494567122693015/Font-Preview)」です。

それぞれで見た目も機能もかなり違いがあって、Better Font Pickerは最低限の機能で高速、Font Previewは機能が多い代わりに起動までに少し待ちます。

人によりますが、自分の場合はプレビューさえできればOKなのでBetter Font Pickerを使っています。

![「Better Font Picker」と「Font Preview」の見た目比較](https://webrandum.net/mskz/wp-content/uploads/2022/03/image_1.png)

| 項目 | Better Font Picker | Font Preview |
| --- | --- | --- |

| フォントの検索 | ○ | ○ |
| --- | --- | --- |

| 起動時に検索ボックスに フォーカスされる | ○ | × |
| --- | --- | --- |

| プレビューテキストの変更 | × （フォント名） | ○ |
| --- | --- | --- |

| 起動時間 | 速い | 遅い |
| --- | --- | --- |

| お気に入りのフォント登録 | × | ○ |
| --- | --- | --- |

## Better Font Picker

![Better Font Picker](https://webrandum.net/mskz/wp-content/uploads/2022/03/image_2.png)

[Figma](https://www.figma.com/community/plugin/739922281164562258/Better-Font-Picker)

メニューの［Plugins］→［Better Font Picker］を選択するとパネルが開いて、自動で検索ボックスにフォーカスされます。

このまますぐに検索してフォントを探せるのが魅力です。

### Keyboard Maestroを使ってフォント変更をラクにする

Keyboard Maestroを使って、command + T（Text）でパネルが開くようにしています（Keyboard Maestroについて知らないかたは[こちらの記事](https://webrandum.net/keyboard-maestro/)をご覧ください）。

![Better Font PickerのKeyboard Maestroマクロ](https://webrandum.net/mskz/wp-content/uploads/2022/03/image_4.png)

メニューを選択するだけでもいいのですが、トグルでパネルを開いたり閉じたりしたかったので、条件分岐でBetter Font Pickerのパネルヘッダー画像が見つかるかどうかで条件分岐をしています。

パネルヘッダーが見つかったときはその右側にある「×」アイコンをクリックしてパネルを閉じて、見つからない場合はメニューを選択してパネルを開きます。

わざわざ画面右にマウスを持っていってフォント変更する必要もなくなるので、プレビュー関係なくフォント選択で使っています。

## Font Preview

![Font Preview](https://webrandum.net/mskz/wp-content/uploads/2022/03/image_3.png)

[Figma](https://www.figma.com/community/plugin/890494567122693015/Font-Preview)

メニューの［Plugins］→［Font Preview］を選択するとパネルが開きます。

このパネル初期表示時に少しロードが走って待ち時間が発生してしまいます（1度開いたら大丈夫ですが）。

![Font Previewのパネル](https://webrandum.net/mskz/wp-content/uploads/2022/03/image_6.png)

一番上に「Preview text」と書かれた入力項目があり、ここでプレビューテキストを変更できます。

ちなみにデフォルトは「Sphinx of black quartz, judge my vow.」です。

これは「パングラム（pangram）」という全てのアルファベットを使った文章になっています（日本語で言うところの「いろは歌」みたいな感覚ですね）。

タブは「ALL FONTS（全てのフォント一覧）」「FAVORITES（お気に入りに登録したフォント一覧）」「SEARCH（フォントの検索）」の3つがあります。

「ALL FONTS」でフォント名の横にある星アイコンをクリックでお気に入りに登録できます。