SALUDOBlog

Figmaフォント利用まとめ!フォントを見ながら選択できるプラグインとローカル、Adobeフォントの追加方法

Figmaフォント利用まとめ!フォントを見ながら選択できるプラグイン

Figmaとは?

Figmaは、主にウェブベースで利用されるインターフェースデザインツールです。このツールは、ユーザーインターフェース(UI)デザインとユーザーエクスペリエンス(UX)デザインを行うために広く使用されています。

Figmaの特徴は、リアルタイムでのコラボレーション機能、プロトタイピング機能、ベクターネットワーク機能などがあります。

これにより、デザイナーはチームメンバーやクライアントと直接共同作業を行い、デザインのフィードバックを素早く受け取ることができます。

また、Figmaはクロスプラットフォーム対応で、ウェブブラウザだけでなく、デスクトップアプリケーションとしても利用可能です。

Figmaで日本語フォントを確認しながら使用できるプラグイン

「Japanese Font Picker」はFigmaのプラグインで、38種類の日本語フォントを試しながら選択できる便利なツールです。使い方は以下の通りです:

  • Figmaコミュニティページで「Japanese Font Picker」と検索するか、プラグイン詳細ページにアクセスします。
  • プラグイン詳細ページの「試す / Try it out」をクリックします。
  • デザインファイルが開いたら、Japanese Font Pickerの「実行 / Run」をクリックします。
  • プラグインが表示されると、テキストを選択した状態で様々なフォントを試すことができます。

ただし、PCにインストールされていない日本語フォントは試すことができないため、使用したいフォントは事前にインストールする必要があります。

Figmaで英語フォントをプレビューできるプラグイン

Figmaで英語フォントをプレビューしながら選択できるプラグインにはいくつかのオプションがあります。

  • Font Viewer: このプラグインは、Figmaでテキスト入力する際に、フォントのプレビューを表示しながら選択できます。プラグインを起動すると、ポップアップウインドウが表示され、そこでプレビューしたいテキストを入力すると、利用できるフォントに適用されて一覧表示されます。フォントを変更したいテキストを選択した状態で、適用したいフォントを一覧からクリックすると即座に適応されます。
  • Better Font Picker: このプラグインは、Figma上で英語フォントをプレビューしながら選択できる機能を提供します。プラグインを実行した後、テキストを選択し、フォントをクリックすることで、フォントをプレビューしながら確認できます。
  • Font Preview: このプラグインは、フォントのプレビューを見ながら選択することができます。よく使うフォントをお気に入りとして登録することも可能です。

これらのプラグインを利用することで、Figma上で英語フォントを効率的に選択し、プレビューすることが可能になります。プラグインのインストール方法や詳細な使い方については、各プラグインのページを参照してください。

Figmaでローカルフォントを使用する方法

使用方法を理解することで、Figmaでローカルフォントを効率的に使用できます。以下に、Windows、Mac、ブラウザでのローカルフォントの使用方法を説明します。

Windowsでのローカルフォントの使用方法:

  • フォントのダウンロードとインストール
    • フォントをダウンロードして、ダウンロードフォルダから解凍します。
    • Windowsフォルダに移動し、フォントファイルをダブルクリックして開きます。
    • ポップアップウィンドウで「インストール」をクリックしてフォントをインストールします。
  • フォントの確認
    • インストール後、Windowsのコントロールパネルから「外観と個人設定」に移動し、「フォント」をダブルクリックしてフォントライブラリを確認します。
  • Figmaアプリケーションの再起動
    • Figmaアプリケーションを再起動して、インストールしたフォントが表示されることを確認します。

Macでのローカルフォントの使用方法:

  • フォントのダウンロードとインストール
    • フォントをダウンロードし、Finderでダウンロードされたファイルを探します。
    • フォントファイルをダブルクリックし、「フォントをインストール」をクリックします。
  • Font Bookの使用
    • Font Bookアプリケーションを使用してインストールされたフォントを管理できます。
  • Figmaアプリケーションの再起動
    • フォントのインストール後、Figmaアプリケーションを再起動します。

ブラウザでのローカルフォントの使用方法:

  • Figmaフォントヘルパーのインストール
    • FigmaのウェブサイトからFigmaフォントヘルパーをダウンロードし、インストールします。
  • Figmaブラウザアプリの更新
    • インストール後、Figmaブラウザアプリを更新して、フォントサービスが統合されるようにします。
  • フォントピッカーでのローカルフォントの使用
    • フォントサービスがインストールされ、Figmaブラウザアプリが更新された後、ローカルフォントがフォントピッカーで使用可能になります。

フォントの管理とトラブルシューティング:

  • フォントの検索と並び替え
    • フォントのドロップダウンメニューで、検索バーを使用してフォントを素早く見つけたり、名前や最近使用された順、人気順に並べ替えたりできます。
  • フィルタリング
    • フィルターオプションを使用して、ローカルフォント、Googleフォント、特定のフォントファミリーからのフォントのみを表示することができます。

これらの手順に従って、Figmaでのデザイン作業にローカルフォントを効果的に組み込むことができます。

FigmaでAdobeフォントを使用する方法

FigmaでAdobeフォントを使用するには、以下の手順を実行します:

  • Adobe Fonts Desktop Appのインストール
    • Adobe Fontsのウェブサイトにアクセスし、Adobe IDでサインインします。
    • 「Activate fonts」ボタンをクリックして、使用したいフォントの重みとスタイルを選択します。
    • 「Activate fonts」をクリックし、画面の指示に従ってインストールを完了します。
  • FigmaでのAdobeフォントの使用
    • Figmaを開き、新規または既存のデザインを作成します。
    • テキストツールをクリックし、右サイドバーのフォントドロップダウンメニューを開きます。
    • 「More Fonts」をクリックし、「Adobe Fonts」を選択します。
    • 必要に応じてAdobe IDでサインインし、プロジェクトに追加したいフォントを選択します。

Adobe Fonts Desktop Appをインストールすると、Creative Cloudアカウントと同期され、Figmaで利用可能なフォントが全てアクティブになります。Linuxはサポートされていません。

Figmaでフォントを縦書きにする方法

Figmaでテキストを縦書きにする方法は以下の手順で行います:

  • テキスト入力:テキストツール(ショートカット:T)で、縦書きにしたい文章を入力します。日本語対応フォントに変更する必要があります(例:「Noto Sans JP」「ヒラギノ角ゴシック」「Yu Gothic」)。
  • テキストの幅調整:テキストの幅(Width)をフォントサイズと同じ値に設定します。
  • 「Vertical alternates」の有効化:テキストを選択し、右側プロパティの「…」をクリックして、フォントの詳細設定を開き、「Vertical alternates」を有効化します。
  • 行間の微調整:テキストの行間(Line Height)を調整します。

この方法は、複数行には対応していないため、完成した縦書きテキストをコピーして並べることで、縦書きの文章を作成することができます。

Figmaで日本語フォントを使用するときの注意点

Figmaで日本語フォントを使用する際の注意点は以下の通りです:

  • 互換性の確認:使用する日本語フォントがFigmaで完全にサポートされているかを確認することが重要です。
  • フォントのインストール:Figmaはブラウザベースのツールであるため、使用する日本語フォントは、デザインを行うデバイスに正しくインストールされている必要があります。
  • 表示の問題:日本語フォントによっては、特定の文字が正しく表示されない場合があるため、デザインの確認を慎重に行うことが必要です。
  • ライセンスと使用権限:商用利用を考慮している場合は、フォントのライセンス条項と使用権限を確認し、適切に管理することが大切です。

日本語フォントの使用には、これらの点を注意深く検討することが推奨されます。

今までの内容を要約すると、Figmaはウェブベースのインターフェースデザインツールであり、UI/UXデザインに広く利用されています。

特に、Figmaのプラグイン機能は多様で、例えば「Japanese Font Picker」は日本語フォントの選択を容易にします。一方で、Figmaで縦書きテキストを作成するには工夫が必要です。

また、日本語フォントを使用する際は互換性、インストール状況、表示問題、ライセンスなどに注意が必要です。