フィグマブラウザ版でパソコンのフォントをインストールする方法

Posted on by

Figmaは、デザイナーやクリエイターの間で広く使われているデザインツールです。
その最大の魅力は、ブラウザ上で動作するため、どこからでもアクセスでき、
共同作業がしやすい点です。
ブラウザ版Figmaは便利ですが、初期設定のフォントに限られるのではなく、
自分のパソコンにインストールしたフォントを使うことができるという特徴があります。
しかし、ブラウザ版でパソコンのフォントを使うには、特定の手順を踏む必要があります。
このガイドでは、その手順を詳細に説明し、ブラウザ版Figmaで自分のフォントを活用できるようにします。

フィグマブラウザ版とデスクトップ版の違い

まず、Figmaには「ブラウザ版」と「デスクトップ版」が存在します。
デスクトップ版はFigmaアプリケーションをパソコンにインストールして使用するものですが、
ブラウザ版はChromeやSafariなどのインターネットブラウザを通して利用するものです。

Figmaデスクトップ版の特徴

  • オフラインでも利用可能。
  • パソコンにインストールされたローカルフォントは自動的に使用可能。

Figmaブラウザ版の特徴

  • ブラウザを通じてアクセスできるため、どのパソコンからでも作業可能。
  • オフラインでは使用不可。
  • パソコンのローカルフォントを使うために、Figma Font Helperというツールを別途インストールする必要がある。

つまり、ブラウザ版Figmaでパソコンのフォントを使うためには、追加のセットアップが必要になります。
次のセクションでは、具体的なインストール手順を解説します。

フォントのインストール手順

Figmaでローカルフォントを使用するためには、
まずそのフォントをパソコンにインストールしておく必要があります。
ここでは、その手順を解説します。

ステップ1: フォントをダウンロード

インターネット上には、多くの無料フォントや商用利用可能なフォントがあります。
以下のようなサイトからフォントをダウンロードできます。

Google Fonts

無料で高品質なフォントを提供しているサイトです。
幅広いスタイルのフォントが揃っています。

Adobe Fonts

Adobe Creative Cloudを利用している場合、Adobe Fontsからもフォントをダウンロードできます。

ダウンロードしたいフォントを選び、
通常はフォントファイル（.ttfや.otfなどの形式）としてダウンロードします。

ステップ2: パソコンへのインストール

ダウンロードしたフォントをインストールするには、以下の手順に従います。

Windowsでのインストール方法

ダウンロードしたフォントファイルを右クリックします。
「インストール」を選択するだけで、フォントがシステムに追加されます。

Macでのインストール方法

ダウンロードしたフォントファイルをダブルクリックします。
フォントブックアプリが開き、そこで「フォントをインストール」ボタンをクリックします。

この手順でフォントがパソコンにインストールされると、
他のソフトウェア（WordやPhotoshopなど）でもそのフォントが使用可能になります。

Figmaブラウザ版でフォントを使う準備

Figmaブラウザ版で自分のパソコンにインストールされたフォントを利用するためには、
Figma Font Helperというツールをインストールする必要があります。
このツールは、Figmaがローカルフォントにアクセスできるようにするものです。
以下では、Figma Font Helperのインストール手順と、
Figmaでローカルフォントを使用するための準備について説明します。

ステップ1: Figma Font Helperのダウンロード

まず、Figma Font Helperをダウンロードする必要があります。以下の手順で進めていきます。

Figmaの公式サイトにアクセスします。

公式サイト：https://www.figma.com
自分のFigmaアカウントでログインする必要があります。

設定メニューからFigma Font Helperをダウンロードします。

  • Figmaにログインしたら、画面右上のプロフィールアイコンをクリックします。
  • 「ファイル」または「設定」を選択し、Figmaの設定画面に移動します。
  • 設定画面内に「フォント」のオプションがあり、そこで「Figma Font Helper」をダウンロードできるリンクがあります。

ステップ2: Figma Font Helperのインストール

ダウンロードが完了したら、次にFigma Font Helperをインストールします。

Windowsでのインストール方法

  • ダウンロードしたファイル（通常はFigmaFontHelperInstaller.exe）をダブルクリックして開きます。
  • インストールウィザードに従ってインストールを完了します。

Macでのインストール方法

  • ダウンロードしたファイル（通常はFigmaFontHelperInstaller.dmg）をダブルクリックして開きます。
  • 指示に従ってインストールを進めます。

ステップ3: インストールの確認

Figma Font Helperのインストールが完了すると、
Figmaが自動的にパソコンにインストールされているフォントを認識するようになります。
ブラウザ版Figmaを再起動し、以下の手順でフォントが正しく使用できるかを確認しましょう。

  • Figmaで新しいファイルを作成し、テキストツールを使用してテキストボックスを追加します。
  • フォントメニューから「ローカルフォント」セクションにアクセスします。
    ここに、先ほどインストールしたフォントが表示されているはずです。

これで、Figmaブラウザ版でパソコンにインストールしたフォントが使用できるようになりました。
次のセクションでは、具体的な使い方について説明します。

Figmaでフォントを使用する

Figmaブラウザ版でパソコンにインストールしたフォントを使えるように設定が完了したら、実際にデザイン内でどのようにフォントを使用できるのかを見ていきましょう。以下の手順で進めていきます。

ステップ1: 新しいデザインファイルを作成

まずは、Figmaで新しいデザインファイルを作成します。
以下の手順で始めましょう。

  • Figmaのダッシュボードにログインします。
  • 「+」アイコンをクリックし、新しいデザインファイルを作成します。
  • 新しいプロジェクトの名前を入力し、作業を開始します。

ステップ2: テキストツールを使ってテキストを追加

次に、デザインにテキストを追加するためにテキストツールを使います。

  • 左側のツールバーから「テキストツール」を選択します。
  • キャンバス上の任意の場所をクリックし、テキストボックスを作成します。
  • テキストボックス内に任意のテキストを入力します（例: “Hello, Figma!”）。

ステップ3: フォントを選択

テキストが作成できたら、インストールしたフォントを適用してみましょう。

  • 右側のプロパティパネルにある「Text」セクションで、現在のフォントが表示されています。
  • フォント名が表示されている部分をクリックすると、フォントの選択メニューが表示されます。
  • フォントリストが表示されたら、**「ローカルフォント」**セクションに移動します。
    ここには、あなたのパソコンにインストールされているフォントが表示されます。
  • インストールしたフォントを選択し、テキストに適用します。

ステップ4: フォントスタイルやサイズを調整

Figmaではフォントを選ぶだけでなく、以下のようなスタイルや設定も調整することができます。

フォントサイズ

テキストサイズを変更するには、プロパティパネル内の「Size」フィールドで数値を入力するか、
スライダーを使用します。

フォントウェイト（太さ）

フォントによっては、通常の太さ以外に「Bold」や「Light」などのスタイルもあります。
プロパティパネルの「Weight」オプションから選択可能です。

文字間隔

「Letter spacing」フィールドで、文字間のスペースを調整できます。

ステップ5: 複数のフォントを使ったデザイン

一つのプロジェクト内で複数のフォントを使用することも簡単です。
たとえば、見出しには太めのフォント、本文には読みやすいスクリプトフォントを使うことで、
デザイン全体にバリエーションを持たせることができます。

同じテキストボックス内で異なる部分に異なるフォントを適用することも可能です。
テキストの一部を選択し、プロパティパネルからフォントを変更すれば、部分的なスタイリングが可能です。

ステップ6: フォントを試しながらデザインを作成

フォントを変更しながら、Figma上でリアルタイムにデザインがどのように見えるか確認できます。
フォントが多すぎる場合は、「検索」機能を使って特定のフォントを素早く見つけることも可能です。
たとえば、フォント名の一部を入力すれば、関連するフォントが絞り込まれて表示されます。

トラブルシューティング

Figmaブラウザ版でパソコンにインストールされたフォントを使用する際、
時々トラブルが発生することがあります。
ここでは、よくある問題とその解決策について説明します。

問題1: インストールしたフォントがFigmaで表示されない

インストールしたフォントがFigmaのフォントリストに表示されない場合、以下の点を確認しましょう。

Figma Font Helperが正しくインストールされているか確認

  • Figma Font Helperは、Figmaがローカルフォントにアクセスするために必要です。
    このツールが正しくインストールされていない場合、Figmaはパソコンのフォントを認識しません。
  • インストール済みか確認するには、パソコンのプログラム一覧を確認し、
    Figma Font Helperが存在するかをチェックします。
  • Figma Font Helperを再インストールしてみるのも効果的です。

Figmaを再起動

Figmaがフォントのリストを正しく読み込んでいない場合、
ブラウザを再起動することで問題が解決することがあります。
特に、フォントをインストールした後にFigmaを起動している場合は、
一度リフレッシュまたは再起動してみてください。

ブラウザのキャッシュをクリア

  • キャッシュが古くなっている場合、フォントが正しく表示されないことがあります。
    ブラウザのキャッシュをクリアしてから、Figmaに再度ログインしてみてください。
  • Chromeの場合: 「設定」→「プライバシーとセキュリティ」→「閲覧履歴データの削除」でキャッシュをクリアできます。

問題2: フォントが正しく表示されない、または崩れて見える

インストールしたフォントがFigma上で正しく表示されない場合、以下の手順を試してください。

フォントファイルの確認

  • ダウンロードしたフォントファイルが破損している場合、正常に表示されないことがあります。
    フォントを再度ダウンロードしてインストールしてみてください。
  • 特に、.ttf（TrueType Font）または.otf（OpenType Font）形式の
    ファイルが最も互換性が高いので、これらの形式で再ダウンロードすることをお勧めします。

ブラウザの拡張機能を無効化

一部のブラウザ拡張機能がFigmaの動作に影響を与えることがあります。
特に、広告ブロッカーやセキュリティ拡張機能がフォントの表示を妨げる場合があります。
問題が解決しない場合、拡張機能を一時的に無効にしてみてください。

異なるブラウザで試す

使用しているブラウザ自体に問題がある可能性もあります。
別のブラウザ（Chrome、Firefox、Safariなど）でFigmaを開いてみると、
フォントが正しく表示されることがあります。

問題3: 複数のフォントが重複して表示される

Figmaで同じフォントが複数表示される場合や、異なるバージョンがリストに表示される場合は、
フォントのインストール状況に問題があるかもしれません。

フォントをアンインストールして再インストール

パソコンに同じフォントが複数インストールされている場合、Figmaでの表示が混乱することがあります。
すべてのバージョンを一度アンインストールして、最新のものを再インストールしてみてください。

フォント管理ツールを使用

特に多くのフォントをインストールしている場合、フォント管理ツールを使用することで、
不要なフォントを整理し、Figmaでの重複表示を防ぐことができます。
Macでは「フォントブック」、Windowsでは「フォントマネージャー」などのツールが利用できます。

まとめ

これで、ブラウザ版Figmaでパソコンにインストールされたフォントを
使用するための手順がすべて完了しました。
フォントが正しくインストールされていない場合でも、
Figma Font Helperの再インストールやブラウザ設定の調整で多くの問題が解決します。
Figmaを使用して、自分だけのオリジナルなデザインを作成しましょう！