Figmaはブラウザで使い始められます。日本語表示には現在、Figma自体の言語設定を使えるため、以前必要とされていた日本語化のChrome拡張機能を最初に入れる必要はありません。日本語フォントも利用できますが、使いたいフォントがFigmaに最初からあるか、パソコンに追加して使うかで手順が異なります。
Figmaの始め方:ブラウザ版とデスクトップ版
ブラウザ版はFigma公式サイトからアカウントを作成・ログインして利用します。デザインファイルを開けることを確認したら、まずは新しいファイルを作り、文字を入力してみましょう。利用できる機能や共同編集の条件はプランによって変わるため、固定の人数や料金ではなく、申込時の公式案内を確認してください。
デスクトップで使う場合は公式ダウンロードページから対応するOSのアプリを入れ、同じアカウントでログインします。デスクトップ版はパソコンにインストール済みのフォントを扱うための仕組みを含んでいます。ブラウザ版でローカルフォントを使う場合との違いは後述します。
Figmaを日本語表示にする方法
Figmaはブラウザ版・デスクトップ版とも日本語表示に対応しています。ファイルまたはファイル一覧の画面右下から言語変更を選び、日本語を指定して保存します。アカウント設定から変更する場合は、左上のアバターから設定を開き、言語の項目で日本語を選びます。変更したタブは再読込されますが、ほかの開いているタブは自分で再読込してください。画面上の位置や表示名は更新で変わる可能性があります。
言語設定が見つからない場合は、Figma公式の言語設定手順を確認してください。Chromeの自動翻訳や第三者の拡張機能は、現在の日本語対応を利用したうえで必要性を判断するのがよいでしょう。
日本語フォントをFigmaで使う方法
まずFigma内のフォントを確認する
デザインファイルでテキストレイヤーを作成・選択し、右側のフォントメニューで使いたい日本語フォントを探します。Figmaには利用できるGoogle Fonts等があります。選べるフォントであれば、追加のインストールは不要です。フォント名が表示されない場合は、ローカルフォントの追加を検討します。
パソコンに入れたフォントを使う
利用許諾を確認して入手したTTFまたはOTFフォントを、まずパソコンにインストールします。Figmaのデスクトップ版なら、アプリにフォントを利用する仕組みが含まれています。ブラウザ版では別途Figma公式のフォントインストーラーが必要です。公式手順からOSに合うインストーラーを取得してください。
インストール後は開いているブラウザのデザインファイルを再読込するか、デスクトップアプリを再起動します。テキストレイヤーのフォントメニューで「自分がインストールしたフォント」の絞り込みやフォント名検索を試します。Figmaの言語設定と、フォントをパソコンへ追加する操作は別です。
フォントが表示されない・共有相手と見え方が違う場合
パソコンにフォントが正しくインストールされているか、ブラウザ版ではFigmaのフォントインストーラーが動作しているか、ファイルを再読込したかを確認します。共同編集者が同じローカルフォントを使えない場合、欠落フォントとして表示されることがあります。チームで利用する前に使用フォントとライセンス、各自の利用環境を揃えておくと安心です。解決しない場合は公式のフォントインストーラー確認手順を参照してください。
導入時に確認したいこと
- ブラウザとデスクトップのどちらで作業するか
- 日本語UIをFigmaの言語設定で選んだか
- 使いたい日本語フォントがFigma内にあるか、ローカル追加が必要か
- 共同編集者のフォント環境と利用許諾に問題がないか
まず日本語表示と短いテキスト入力を確認し、必要なフォントだけ追加すると、導入時の切り分けがしやすくなります。2021年当時の画面写真や拡張機能の手順は現在のUIと異なるため、操作に迷ったときは上記の公式ヘルプで最新表示を確認してください。