【Figma】フォント検索機能の改善：プレビュー表示、フィルター機能の追加

「Figmaの2022年夏〜23年夏の新機能を扱うシリーズ」、今回はフォント編です。

この記事は、2022年に自費出版で発売した『ちょっとできる人向けFigma本』のための追加コンテンツです。
この記事単体で読んでもらえるようにもしています！

※2023年8月末時点の変更点や新機能を扱っていますが、間違い・アップデートなどありましたらお知らせください！

フォントまわりの改善

『ちょっとできる人向けFigma本』の該当箇所……p10

入力したテキストを選択している状態で、画面右のデザインタブ内の「テキスト」パネルでフォント名をクリックすると、「フォントを検索」のウィンドウが立ち上がります。
このウィンドウが追加・改善された機能です！

フォント一覧は実際のフォントと同じカタチなので、フォントを選ぶときの判断材料になる

ただ、日本語フォントであっても、フォント名のアルファベット表記でのプレビューなので、ひらがな・カタカナ・漢字などのプレビューはありません。
この点については「サンプル文字列を入れたらそれをプレビューしてくれる、とかにアップデートされたらいいなぁ」という要望をつぶやいておきます！

フォント名での検索

「🔍フォントを検索」のフィールドに文字列を入力すると、フォントを検索できます。

フォント名の途中や末尾のものでも検索できるので、たとえば「Noto Sans JP」をヒットさせたいとき、「jp」と入力してもオッケーです。
また、入力途中で結果が反映される仕組み（インクリメンタルサーチ）となっています。

注意点として、Figmaでは日本語でのフォント名では検索できません。
たとえば「筑紫A丸ゴシック」は「Tsukushi A Round Gothic」になるので、「tsuku」などで検索しましょう。

「自分がインストールしたフォント」を絞り込める

フォントは、種類ごとにフィルタリング（絞り込み）することができます。

フィルターには上記のような種類があるんですけど、特に使えるのが「自分でインストール」の絞り込みです。
「日本語フォントのみ」を表示させるのは今のところできないのですが、自分でインストールしたフォントなら日本語フォントも多いでしょうし、探しやすい結果になるかと。
Adobe Fonts経由でインストールしたものも反映されます。

また、新しくインストールしたものは[NEW]のラベルが付きます。

他のフィルターとして「このファイル内」のフィルターも、他の人からもらったFigmaファイルをさわるときや、しばらく前に編集したFigmaファイルを再びさわるときなどに使えそうですね。