figma-font-viewer-plugin
公開日: 2022.01.07  | 更新日: 2022.01.07

Figmaでフォントのプレビューを表示する方法

今回はFigmaでテキスト入力するときに、フォントのプレビューを表示しながら選択できるプラグイン「Font Viewer」を紹介します。バナーやアイキャッチ用などのコピーを考えるときにどのフォントにするかをプレビューの一覧を見ながら確認できるのでおすすめです。

この記事のターゲット

  • Figmaの初心者

  • Figmaでフォントのプレビューを見て選択したい方

  • Figmaで大量のフォントの中から効率的に選びたい方


1. 「Font Viewer」のインストール

font-viewer-plugin

Figma Community の「Font Viewer」のページからインストールします。

プラグインに関する説明と詳しいインストール方法はこちらの記事を参考にしてください。

Figmaのプラグインのインストール方法と使い方

今回はFigmaでプラグインをインストールする方法と使い方を解説します。あわせて、当サイトで紹介している便利なプラグインと使い方を解説したプラグイン集もまとめていますので、参考にしてみてください。 ... 続きを読む

figma-how-to-use-plugins

2. プラグインを起動してプレビューの一覧からテキストに適用する

まずプラグインを起動します。

起動は、右クリックで「Plugin」から「Font Viewer」を選択するとポップアップウインドウが表示されます。

font-viewer1

ポップアップウインドウのテキスト入力エリアにプレビューしたいテキストを入力すると、利用できるフォントに適用されて一覧表示されます。

フォントを変更したいテキストを選択した状態で、適用したいフォントを一覧からクリックすると即座に適応されます。

font-viewer2

とても簡単ですね。

その他には、ローカルフォントの他に、中文フォントとWebフォントを選択できるようです。

font-viewer3

そもそもフォント名がわかっている場合は?

今回のプラグインはフォント名がわからない前提で、見た目の一覧から見つけ出す方法になっていますが、あらかじめフォント名がわかっている場合はオブジェクトを選択している状態で右プロパティのTextでフォント名を直接入力で指定することができます。

ただし、日本語フォントの場合でも英名で表示されるので、半角英数で検索するようにしましょう。

figma-font-change


いかがだったでしょうか。

アイキャッチやキャッチコピーなど、どのフォントを適用するか検討しているときには、Figmaの標準のフォント選択だとプレビューしてくれないので不便でしたが、このプラグインを使うと効率的に探すことができそうですね。

この記事を読んだ方におすすめの記事

Figmaでテキストを縦書きに対応する方法

今回はFigmaでテキストを縦書きに対応する方法を紹介します。和風のWebサイトや広告バナー・フライヤーなどをデザインする際に、縦書きのテキストを配置したりできるようになるので、制作の幅も広がると思います。 ... 続きを読む

figma-text-vertical-alternates

Figmaで曲線パスに沿って文字やシェイプをはわせる方法

今回はFigmaで曲線パスに沿って文字やシェイプ(パーティクル)を配置させる方法を紹介します。Figmaの標準の機能では手作業で一つずつ配置する必要があるので、「To Path」というプラグインを使用します。 ... 続きを読む

figma-to-path-plugin

Figmaで簡単にテキストや図形を斜めに変形する方法

今回は、Figmaで簡単にテキストや図形オブジェクトを斜め方向に変形させることができるプラグイン「SkewDat」を紹介します。オブジェクトを斜め方向に変形させることで、奥行きを出したり躍動感を表現できます。 ... 続きを読む

figma-skewdat-plugin

最新の記事はこちら
広告
この記事を書いた人
うえんつ

うえんつ

Twitter
SaaS・アプリ開発などWEB領域での課題解決が得意なデザイナーで、このブログのオーナーです。
今の関心事
Figma・UI/UX・空間設計・QOL・料理
広告