Figmaのファイルを開くときフォントがないと言われたら

最近急速に勢力を伸ばしつつあるデザインツールがFigma。元々ブラウザ上で扱うWebアプリだったが、今はWindowsでもMacでもデスクトップアプリを使える。ライセンスはユーザー単位なので一つ購入すれば、そのユーザーはどのプラットフォームでも使える。

ファイルをローカルにExportできる。拡張子がfigのファイルである。それが日本語や中国、韓国語の文字が含んでいると「フォントがない」と言われる。Androidの場合はGoogleのNoto CJKが要求される。一方、iOS, iPadなどApple系のものの場合、日本語ではなくてもSF(San Francisco)フォントが要求されることがある。

これらのフォントを追加する方法を以下に記す。

Windows 10に追加する方法

• Google Fonts
  1. Googleのサイトで要求されたotfフォントをダウンロードする。
  2. zipファイルなのでそれを適切な場所で展開する。
  3. [コントロール パネル]-[デスクトップのカスタマイズ]-[フォント]と開いてフォントの一覧を表示させる。
  4. そこへ2で展開したotfフォントファイルのうち、必要なものをDrag＆Dropする。
• SF Fonts
  1. Appleの開発者サイトのフォントページへ行きSF Proをクリック、ダウンロードする。Apple独自のdmgファイルだが構わない。
  2. 7-Zipで開く。もし7-Zipを持っていなければhttps://www.7-zip.orgで入手する。
  3. 開いていくとPayload~という拡張子のないファイルがでてくるので、右クリックして展開する。すると同じ名前のフォルダ内に、階層としてはSF-Pro\SanFranciscoPro\San Francisco Pro\Payload\Library\Fontsのようなフォルダが生成される。
  4. この中にあるotfフォントファイルをGoogle Fontsと同様にDrag＆Dropする。

macOSに追加する方法

• Google Fonts
  1. Googleのサイトで要求されたotfフォントをダウンロードする。
  2. zipファイルなのでそれを適切な場所で展開する。
  3. アプリケーションのFont Bookを起動
  4. ファイルメニューからフォントを追加を選び、先ほど展開したフォルダの中から必要なotfフォントを追加。
• SF Fonts
  1. Appleの開発者サイトのフォントページへ行きSF Proをクリック、dmgファイルをダウンロードする。
  2. macOSではこのdmgファイルはインストーラなので起動して必要なフォントをインストールする。

まとめ

Windows 10にAppleのフォントを追加するとき、7-Zipという圧縮、解凍ソフトを使う必要がある事に気付かないといけない。

これから国際化対応をする場合、中国語の簡体、繁体文字、ハングルが必要になる事もあるだろう。そういったときにも対応できるのがGoogleのNoto CJKだ。憶えておいて損はない。