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

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

日本語フォントが消えている！？

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

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

英語フォントも消えている！？

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

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

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

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

フォントが消えたタイミングで行っていたこと。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Osakaも復活。

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

游書体も問題なし。

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

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

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

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

Figma 関連メモ。

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

• Figmaからフォントが消えたとき。日本語、英語フォントの追加方法。
• Figmaへガラスエフェクトが追加。Liquid Glassへの対応と見つからないとき。
• Figmaで文字や図形を斜めに。Skewプラグインとベクター編集モード。

• FigmaでLiquid Glassデザイン。プラグインとエフェクト機能について。
• FigmaのWebサイトデザイン画面の表示方法。画面が見つからないとき。
• Figmaの画像書き出し方法。PNGとJPG、WebPの違いと、画質やサイズの目安。
• Figmaでマスク作成。マスクができないときや解除の仕方。
• UI3 Figma Slidesの使い方やテンプレートの基本。シンプル版。
• UI3。Figmaの新しいUIで、Webやスライド、UI/UXをデザイン。
• Figmaで使える日本語フリーフォント一覧。商用利用も無料。
• Figmaでぼかしをかける方法。写真にぼかしを入れたいとき。
• Figmaのカラーパレットプラグインの使い方と、70:25:5の配色法則。
• Figmaの使い方が変わる？RGB入稿で印刷可能な時代に。

• Figmaでアウトライン化、フラット化をする方法と注意点。
• Figmaのツールバーやサイドバーが消えてしまったときの対応。
• Figmaのカーニング、文字詰めのショートカットの使い方。
• FigmaからCMYKでエクスポート。画像軽量化プラグイン「TinyImage Compressor」の使い方。
• FigmaとAI Genius。レイアウト作成、UI/UXデザインを一緒に。
• FigmaからWebPで書き出しす方法。Olive Pressの使い方
• Figma プラグインを削除する方法。追加も削除もシンプルに。
• Figmaがもし有料化されたら。Next Figmaのデザインツール。Pixso。
• Figma 削除したファイルを復元したいとき。復元の方法。
• Material SymbolsをFigmaへ。インストールしてすぐに使える。

• Figmaのルーラー（定規）の出し方。表示方法がイラレとちょっと違う！
• Figmaの背景切り抜き方法。ペンツールの使い方とプラグイン。
• Figmaで名刺を作ってみた結果。作成・入稿・仕上がりまで。
• Figmaを日本語化。言語切り替えの使い方。再起動も不要。
• Figmaで検索・置換する方法。ショートカットからでOK。
• Figmaでモザイクをかける方法。Pixelsでさらっと簡単に。
• Figmaの印刷データ用プラグイン「Print for Figma」の使い方。
• Figmaで名刺印刷。グラフィックで実際に発注、PDF入稿してみた手順。
• Figmaで名刺を作る方法。印刷用設定からCMYK化、入稿前の仕上げまで。
• Figmaがダークモードに対応。背景色設定も簡単、目に優しい！