tmkdesign

BLOG POST

Figmaにフォントを追加する【Chrome 拡張機能】

Figmaでローカルにインストールしてるフォントが使いたいんだけど。。。

とっても簡単な設定をすれば使えるようになるよ!

Figmaとは?

FigmaとはDylan FieldとEvan Wallaceが共同開発した初の(design tool with real-time collaboration)リアルタイムコラボレーションができるデザインツールです。

機能はAdobeXDやsketchと似ていて、WEBサイトのワイヤーフレーム・デザインカンプなどを作成するのにとても使いやすい機能が備わっています。

さまざまな便利機能の中がありますが、今回はブラウザ版Figma上で、ローカル環境内にダウンロードしているフォントやアクティブにしているフォントを使える設定を紹介します。

ローカル環境のフォントを使うには

①アカウントの設定画面を開く

Figmaのダッシュボードの右上の人のアイコンをクリックして、「設定(settings)」をクリック。

②「Fonts」の「Download Installer」をクリックする

項目の中の「Fonts」に注目すると、最初は「Download Installer」が表示されているので、クリックすると画面左のようなインストーラーがダウンロードされる。

ちなみに・・・・

公式ページのFont installerからも同じことが行えます(例はMacの場合です)↓

③ダウンロード画面が表示されたら、「開く」をクリック。

④Figmaを再起動する

ダウンロードしたら、Figmaを再起動し、先ほどの設定画面を見て、下記のようになればOK。

文字入力時に、ローカルで使えていたフォントがフォントのリストの中に入っているので使えるようになります!

これでローカル環境で使っていたフォントがリストの中に表示されるので、今まで通りのフォントが使えるようになったよ!

思ってたより簡単!

ちなみに、インストール版のFigmaなら、何もしなくてもローカルのフォントが使えますよ。

まとめ

ブラウザ版のFigmaでは、フォントをインストールすることによって、ローカル環境でアクティブにしているAdobe fontsや、インストール済みのGoogle fontsなどを使えるようになります。さまざまなフォントを使うことで、イメージ通りにデザインが作れます。とっても簡単にインストールできるのでやってみてくださいね。