Figmaからフォントが消えたとき。日本語、英語フォントの追加方法。 / いがわ

.

Memo

Figmaからフォントが消えたときの対応方法。

ヒラギノや游明朝がFigmaから消えた。

Figmaに日本語フォントが反映されない。

日本語フォントが消えている!?

なにかの拍子にFigmaからヒラギノが消えていた。フォントのパネルから検索しても出てこない。

ヒラギノだけでなく、游書体など、他の日本語フォントも消えていた。

英語フォントも消えている!?

一部の英語フォントも消えていた。

おそらく自分で追加したフォントが反映されていなかったと思われる。

もともとMacに入っているヒラギノが無くなっていたことの原因はわからない。

フォントが反映されない想定要因。

フォントが消えたタイミングで行っていたこと。
  • パソコンの買い替え。(MacからMacへ。)
  • OSのアップデート。(買い替えによるアップデート。)
  • Figmaのデスクトップアプリを長期間使用してない。(ブラウザ版を使用。)
  • FigmaのUIが新しくなった。(2024年のUI3時ではなく、それ以降。)

Figmaからフォントが消えたときの対応。


Figmaのフォントインストーラーから追加する。

Figmaの公式サイトから、インストーラーをダウンロード。

Figmaのフォントインストーラー。

フォントインストーラーはFigma公式サイトに用意されているので、ここからダウンロードが可能。

ローカルにあるフォントを、インストーラーから追加。

MacでもWindowsでも、フォントを追加できる。

Mac用、Windows用と、それぞれのインストーラーが用意されている。

FigmaのフォントインストーラーのURL。

Figmaへ日本語フォントをインストールする方法。(スクショ)

参照元:Figmaダウンロード | デスクトップ & モバイル向けWebデザインアプリ

Figmaのフォントインストーラーから追加する手順。

フォントインストーラーから、macOS用もしくはWindows用を選択。

デスクトップアプリとモバイルアプリもあるが、今回の用途はフォントインストーラーから。

Figmaへ日本語フォントをインストールする手順の画像。

アップデートなどで画面のデザインが変わっていることがあります。)

今回はMac用のインストーラーをダウンロード。

ダウンロードフォルダや、指定したフォルダに、InstallFigmaAgent.dmgがダウンロードされる。(容量は約5MB。)

Figmaへ日本語フォントをインストールする手順の画像。

Install Figma Agent.appをダブルクリック。

dmgファイルを開くと、下記のインストール用アプリが表示がされるので、ダブルクリックでアプリを起動する。

Figmaへ日本語フォントをインストールする手順の画像。

App Storeからダウンロードしたものではないというメッセージが表示された場合は、OKをクリック。Figmaの公式サイトは信頼度が高いので、問題があるとは考えにくい。)

FigmaエージェントのOKをクリック。

説明がされているように、Figmaを使用しているブラウザを読み込みし直す。

Figmaへ日本語フォントをインストールする手順の画像。

Figma Agent.appがログイン項目へ追加される。

ログイン項目の良し悪し。

Macのログイン項目は便利な反面、トラブル時の確認箇所が増えるため面倒になる。ユーザー側の使い勝手で決めれば良い。

自動的にログイン項目へ追加される場合、それを削除しても、ブラウザ版Figmaへ追加したフォントはそのまま残る。

ログイン項目から削除する方法。

「システム設定」>「一般」>「ログイン項目と機能拡張」>「ログイン時に開く」から削除が可能。

Figmaへ日本語フォントをインストールする手順の画像。

インストーラーを削除する。

Figma Agent Installerはゴミ箱へドラッグすると、アンインストールされる。

Figmaへ日本語フォントをインストールする手順の画像。

Figmaへ日本語フォントが復活。

ヒラギノやその他日本語フォントの例。

ヒラギノが追加され、復活。

MacやiPhone、iPadなどでお馴染みのヒラギノ。

フォント名としては、San Franciscoよりも知名度がある。

Figmaへ日本語フォントをインストールする手順の画像。

アップデートなどで画面のデザインが変わっていることがあります。)

Osakaも復活。

むかしむかしのMacの日本語デフォルトフォント。

Figmaへ日本語フォントをインストールする手順の画像。

游書体も問題なし。

MacでもWindowsでも、ネットでも印刷でも使用できる、便利な游書体。

Figmaへ日本語フォントをインストールする手順の画像。

メイリオや、その他自分でインストールした日本語フォント、英語フォントも元通りとなった。

Figmaから日本語フォントが消えたときのワンちゃん。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。(元々はメモ書きでした。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。

井川 宜久 / Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

Figma 関連メモ。

デザインツールFigmaのロゴ。

使い方 & プラグインなど。


免責事項について

  • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
  • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
  • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。