Figma の日本語フォント完全ガイド — 追加・反映されない問題・XD 移行時の注意点

「Figma で日本語フォントを使いたいけれど、追加方法が分からない」「フォントをインストールしたのに Figma に反映されない」「XD で使っていたフォントが、Figma では見当たらない」— Figma で日本語のデザインを作成する際によく耳にする話です。

ネット上の解説記事には、実は古い情報や不正確な表記が混じっています。たとえば「Figma Font Helper」という名称や「Custom Fonts プラン（Organization 限定）」といった記述は、現在の公式情報とは食い違います。

本記事では、Figma 公式ヘルプセンターの一次情報に即して、日本語フォントの追加方法・反映されない問題のトラブルシューティング・XD から移行する際の注意点までを整理します（※2026 年 5 月 11 日執筆時点の情報に基づきます）。Pixel Fine Converter の開発で日本語テキスト変換の精度検証を続けてきた立場から、移行時に役立つ実用的な観点も合わせてまとめました。

この記事で得られること

• Figma で日本語フォントを使うための 3 つの経路（ローカル / Google Fonts / Adobe Fonts）の正確な手順
• 反映されないときの公式トラブルシューティング手順（ブラウザ版 / デスクトップ版 / OS 別）
• XD から Figma へ移行する際の日本語フォント特有の注意点
• 日本語フォント運用を効率化するプラグイン（Pixel Fine Converter のフォント補正機能を含む）
• モダン日本語フォント（Noto Sans JP / ヒラギノ / 游ゴシック）の選び方

🗾 Figma で日本語フォントを使うときの全体像

具体的な手順に入る前に、Figma の日本語フォント環境の前提を整理します。これを押さえておくと、後のトラブルシューティングで「どの段階の問題か」が切り分けやすくなります。

Figma の標準フォント環境

Figma にデフォルトで搭載されているフォントは、大きく分けて 2 系統です。

• Google Fonts: ウェブで配信されている Google Fonts のライブラリが、Figma 内で直接利用可能（Noto Sans JP も含まれます）
• Apple Fonts: macOS / iOS 標準のシステムフォント（Hiragino 等）が利用可能

これらは追加作業なしですぐに使えます。一方、ヒラギノ角ゴ ProN（macOS 版）、游ゴシック、MS ゴシック、Adobe Fonts などを使うには、別途経路を用意する必要があります。

ブラウザ版とデスクトップ版の違い

Figma には ブラウザ版 と デスクトップ版 があり、ローカルフォント（PC にインストールされているフォント）の扱いが異なります。

日本語フォントを使う 3 つの経路

Figma で日本語フォントを使う方法は、大きく 3 つに分類できます。それぞれ用途と前提が異なります。

次のセクションから、それぞれの経路の具体的な手順を見ていきます。

📥 日本語フォントを追加する 3 つの方法

ここからは、3 つの経路ごとの具体的な手順をまとめます。最も実務で使う頻度が高いのは、ローカルフォントと Google Fonts の 2 つです。Adobe Fonts は Creative Cloud を契約している場合に検討してください。

方法 1: ローカルフォントを使う

PC にインストールしたフォントを Figma で使う方法です。市販フォント、フリーフォント、OS 標準フォント（ヒラギノ・游ゴシック・MS ゴシック等）はすべてこの方法でカバーできます。

手順（共通）

1. フォントファイル（.ttf または .otf）を入手
2. OS の標準フォントマネージャーにインストール
   • Mac: Font Book アプリでフォントファイルを開く → 「インストール」
   • Windows: フォントファイルを右クリック → 「インストール」
3. Figma を再読み込み（ブラウザ版）または再起動（デスクトップ版）
4. テキストツールでフォント一覧を開き、「Installed by you」（あなたがインストール）でフィルタ → 対象フォントを選択

対応フォーマットの注意

Figma が読み込めるフォントファイル形式は TrueType（.ttf） と OpenType（.otf） のみです。WOFF / WOFF2（ウェブフォント形式）や、古いビットマップ形式は対応していません。市販フォントを購入する際は、ライセンス条件で TTF / OTF が含まれているかを確認してください。

方法 2: Google Fonts から選ぶ（追加作業なし）

Figma には Google Fonts のライブラリがプリセットで搭載されており、追加作業なしですぐに使えます。日本語フォントとしては、以下が代表的です。

Figma のフォント選択メニューで名前を入力するだけで利用できます。ウェブ配信フォントなので、デザインを共有した相手の環境でも同じフォントが表示される のが大きなメリットです。

方法 3: Adobe Fonts と連携する

Adobe Creative Cloud を契約している場合、Adobe Fonts のフォントを Figma で利用できます。日本語フォントとしては、小塚ゴシック / 貂明朝 / 源ノ角ゴシック / TA-方眼 などが利用可能です。

手順

1. Adobe Creative Cloud デスクトップアプリをインストール
2. Adobe Fonts で使いたい日本語フォントを「アクティブ化」
3. Figma を再起動（デスクトップ版）または FigmaAgent を再起動（ブラウザ版）
4. Figma のフォントメニューで該当フォントが利用可能になる

🛠️ 日本語フォントが反映されないときの対処法

「フォントを追加したのに、Figma に表示されない / 適用できない」— よくあるトラブルの原因と対処法を、症状別に整理します。

症状 1: 「フォントが見つからない」というアラートが出る

ファイルを開いた瞬間に「Missing fonts」（フォントが見つからない）の警告が表示される場合、そのファイルで使われているフォントが、現在の環境にインストールされていない ことが原因です。

対処法

• Figma 公式の 利用できないフォントの管理 ページに従って、利用できないフォントを確認
• 該当フォントをインストール（方法 1 / 3 のいずれか）
• 代替フォントで一括置換する場合は、警告ダイアログ内の「Replace fonts」（フォントを置き換え）機能を利用

症状 2: ブラウザ版でローカルフォントが表示されない

ブラウザ版を使っているのにローカルフォントが認識されない場合、Figma font installer（FigmaAgent）が未インストール または 起動していない のが主原因です。

対処法

1. Figma 公式サイトの Downloads ページ から FigmaAgent をインストール
2. インストール後、PC を再起動（または FigmaAgent を手動で起動）
3. Figma のページを再読み込み

症状 3: デスクトップ版でフォントが反映されない

デスクトップ版で OS にインストールしたフォントが Figma に表示されない場合、いくつかの確認ポイントがあります。

対処法（順番に試す）

1. Figma を再起動 — フォント情報のキャッシュが古い可能性
2. OS のフォント情報を再構築 — Windows の場合は「Windows Fonts Cache Service」が無効になっていないか確認、有効化して再起動
3. フォントファイル自体の確認 — 破損しているフォントファイルは認識されないため、Font Book / Windows Fonts Folder で正常表示されるか確認
4. 対応フォーマットか確認 — .ttf / .otf 以外（.woff / .woff2 等）は Figma が読み込めません

症状 4: サブスクリプション型フォント（Adobe Fonts / その他のフォント）が反映されない

サブスクリプション型フォントサービスのフォントが Figma に表示されない場合、連携設定や認証状態 が原因のことが多いです。

対処法

• Adobe Fonts: Adobe Creative Cloud デスクトップアプリが起動しているか / 該当フォントが「アクティブ化」されているか
• その他のサブスクリプション型フォント: 各サービスのサポートに問い合わせ（Figma 連携機能の有無を確認）

症状 5: 日本語が文字化けする / 想定と違う字形で表示される

これは Figma の CJK フォントフォールバック の挙動が関係していることがあります。

Figma 公式ヘルプ「Add text in Chinese, Japanese, and Korean」によれば、未対応文字が含まれていた場合、Figma は Noto フォントで自動的にフォールバック描画 します。ただし、CJK 言語のユーザーについては「Figma が間違った字形バージョンを選ぶ可能性がある」と注記されており、手動で正しいフォントを指定することが推奨されています。

対処法

• テキストレイヤーを選択し、フォントを明示的に指定（自動フォールバックに頼らない）
• 中国語簡体字 / 繁体字 / 日本語 / 韓国語 が混在する場合は、それぞれの言語に対応したフォント（Noto Sans SC / TC / JP / KR）を使い分け

🌐 メニューや UI を日本語化したい場合

ここまでは「コンテンツ（デザインデータ内のテキスト）に日本語フォントを使う方法」を扱ってきました。一方で、Figma 自体のメニューやサイドバー UI を日本語表示にしたい という要望もあります。これは 2024 年から正式対応されています。

設定手順や注意点は別記事にまとめてあります。

→ 詳細: Figma の日本語化 — 言語設定・メニュー日本語化・UI ローカライズ完全ガイド

🔄 XD から Figma へ移行する際の日本語フォント注意点

Adobe XD で作ったデザインを Figma に移行する場合、日本語フォント周りでいくつか特有の注意点があります。Pixel Fine Converter の開発で実際に検証してきた観点から整理します。

注意点 1: XD で使っていたフォントが Figma で見つからない

XD 側ではフォントが正常に表示されていたのに、Figma で開くと「Missing fonts」になる — これにはよくある原因が 3 つあります。

注意点 2: 日本語テキストの見え方が微妙にズレる

XD と Figma は内部のテキスト描画エンジンが異なるため、同じフォント・同じ fontSize でも見え方がわずかに違います。特に日本語フォントでは、ベースライン位置やグリフの太さに差が出ることがあります。

これは技術的に深い話なので、別記事で詳しく解説しています。

→ 詳細: Adobe XD → Figma、日本語テキストはどこまで正確に変換できるか

要点だけ抜粋すると、

• ベースライン位置はツール側で補正可能（Pixel Fine Converter が 5 フォント × 42 セル実測ベースで補正係数を保持）
• グリフの見かけの大きさは補正不能（レンダリングエンジンの設計思想の違い）
• MS Gothic は特殊（Windows 95 世代のビットマップフォント、現代の高解像度ディスプレイには不向き）

注意点 3: MS Gothic 使用デザインの段階移行

既存資産で MS Gothic を多用している場合、一気に置き換えるとレイアウト崩れの原因になります。段階的な移行が現実的です。

• 新規案件では使わない（Yu Gothic / Noto Sans JP に置き換え）
• 既存案件は当面許容（差は出るが、データの正確性は保たれる）
• 大規模リニューアルのタイミングで一括置換（Find & Replace で効率化）

注意点 4: Pixel Fine Converter で移行を効率化する

XD ファイルを Figma に変換する際、フォント情報を含めた構造をそのまま再現するには、変換ツールの精度が重要です。Pixel Fine Converter は以下を提供します。

→ Pixel Fine Converter の日本語フォント対応の詳細: Features: 日本語フォント対応

🔌 プラグインで日本語フォント運用を効率化

Figma Community には、日本語フォント運用を効率化するプラグインがいくつか公開されています。それぞれ強みが違うので、用途に合わせて選んでください。

1. Japanese Font Picker — 日本語フォントの選択を視覚化

「Japanese Font Picker」は、インストール済みの日本語フォントを一覧プレビューしながら選べる プラグインです。フォント名のみのリストではなく、実際の文字表示でプレビューが見えるため、日本語フォントの選定に向きます。

利用前提として、プレビューに表示されるのはあくまで PC にインストール済みの日本語フォント です。未インストールのフォントは試せない点に注意してください。

2. JP Font Switcher — フォントの切り替えを高速化

「JP Font Switcher」は、デザイン内の日本語テキストをまとめて別フォントに切り替える プラグインです。日本語フォントの一覧表示・検索・スタイル選択を 1 つの UI に集約しており、リブランディングや一括変更で重宝します。

3. Pixel Fine Converter — XD 移行時の日本語精度を担保

XD から Figma へデザインを移行する場面では、Pixel Fine Converter が活躍します。フォント情報を含む構造全体を Figma に再現 し、Free プランでも主要 6 フォントの実測値に基づくベースライン補正が利用できます。

「日本語フォントを使ったデザインを XD から Figma に持ち込みたい」というユースケースでは、フォント追加プラグインとは別の役割を担います。

🎨 ヒラギノ・游ゴシック・Noto Sans JP の選び方

Figma で使える日本語フォントは多数ありますが、実務でよく選ばれるモダンなゴシック体は 3 つに集約されます。用途別の推奨を整理します。

用途別の推奨

• macOS 案件のみ: ヒラギノ角ゴ ProN が定番、品質高
• Windows 案件のみ: Yu Gothic UI / Yu Gothic
• クロスプラットフォーム / クライアント共有が多い: Noto Sans JP（Figma プリセット利用、相手の環境に依存しない）
• ウェブ配信を前提とする: Noto Sans JP が最有力（Google Fonts 経由で即配信可能）

公式デフォルトフォントについて

Figma 公式ヘルプ「Add text in Chinese, Japanese, and Korean」では、CJK のデフォルトとして以下が言及されています。

• macOS 日本語: Osaka, Hiragino
• Windows 日本語: MS Gothic, MS Mincho

ただし、MS Gothic は Windows 95 世代のビットマップフォントで、現代の高解像度ディスプレイには適しません。新規デザインでは Yu Gothic UI / Noto Sans JP への置き換えを推奨します。

💬 よくある質問

Q: 「Figma Font Helper」って何ですか？インストールが必要？

A: ネット上の解説記事では「Figma Font Helper」という名称で紹介されることがありますが、Figma 公式の正式名称は「Figma font installer」（別称 FigmaAgent）です。ブラウザ版でローカルフォントを使うために必要なツールで、デスクトップ版には内蔵されています。Figma 公式 Downloads ページ からダウンロードできます。

Q: カスタムフォント機能は Organization プラン限定ですか？

A: 「どの カスタムフォント を指すか」で答えが分かれます。OS にフォントをインストールして Figma で使う一般的な方法 は全プランで利用可能で、Figma 公式ヘルプ「Add a font to Figma」に「Available on any plan」と明記されています。一方、組織全体でカスタムフォントを共有する機能（公式名「Upload custom fonts to an organization」）は別機能で、Organization / Enterprise プラン限定 です。古い解説記事ではこの 2 つが混同されがちなので注意してください。

Q: 日本語が文字化けします。どうすれば？

A: Figma の CJK フォールバック挙動が関係している可能性があります。Figma は未対応文字を自動的に Noto フォントで描画しますが、公式ヘルプでも「CJK は誤判定の可能性あり」と認められています。テキストレイヤーを選択し、フォントを明示的に指定 してください。複数言語が混在する場合は、それぞれの言語に対応したフォント（Noto Sans SC / TC / JP / KR）を使い分けます。

Q: ブラウザ版でローカルフォントが使えません。

A: Figma font installer（FigmaAgent）が未インストール または 起動していないのが主原因です。Figma 公式 Downloads ページ からインストールし、PC を再起動してください。デスクトップ版を使っている場合は、この問題は発生しません。

Q: XD で使っていたフォントが Figma で見つかりません。

A: 主に 3 つの原因があります。(1) フォントファイルが Figma を開いている PC に未インストール → OS にインストール、(2) Adobe Fonts 経由のフォントで連携が未設定 → Creative Cloud でアクティブ化、(3) フォント名の表記揺れ（Hiragino Sans と ヒラギノ角ゴシック など）→ 類似フォントで代替指定。本記事の XD 移行時の注意点 セクションを参照してください。

🎯 まとめ

Figma で日本語フォントを使うための完全ガイドを、追加方法・トラブルシューティング・XD 移行時の注意点・プラグイン活用・選び方の 5 つの軸で整理しました。

記事の要点

日本語フォント運用は、「公式情報に即した正確な手順を押さえる」 × 「症状別のトラブルシューティングを身につける」 × 「用途に合わせたプラグイン活用」 の 3 点が揃うと、作業効率が大きく変わります。本記事を Figma での日本語デザインの基盤として、ぜひお手元で活用してみてください。

関連ページ

• Figma の日本語化 — UI ローカライズ完全ガイド — UI 言語の日本語化（メニュー / 表示）
• 日本語テキストはどこまで正確に変換できるか — XD → Figma の描画精度の深掘り
• XD→Figma 移行 実践ガイド — 移行を決めた後の具体的な手順・準備
• Adobe XD ファイルを Figma で開く 3 つの方法 — XD ファイルを Figma に持ち込む経路
• Features: 日本語フォント対応 — Pixel Fine Converter のフォント別補正の仕様