figma mac app｜デスクトップ版を入れるべき人の条件

Figmaはブラウザのタブで動くソフトです。それが広まった理由でもあり、同時に「figma mac app」と調べた人が引っかかる点でもあります。タブで足りているのに、わざわざアプリを入れて何が変わるのか。多くのWebサービスでは答えは「ほとんど変わらない」ですが、Figmaは数少ない例外で、変わる箇所をはっきり名指しできます。この記事では、公式アプリだけにある機能、日本語フォントの扱い、動作環境の下限、そしてブラウザ版で行く場合の窓の作り方を順に見ていきます。

Macで使うFigmaは2通り

Macで使えるFigmaは、ブラウザで figma.com を開く方法と、公式のデスクトップアプリを入れる方法の2つです。どちらも同じファイルを同じように編集できます。

デスクトップアプリは figma.com のダウンロードページから入手できます。macOS版とWindows版があり、ヘルプには「すべてのプランで利用できます」と書かれているので、無料プランのままでも導入できます。dmgを開いてアイコンを「アプリケーション」フォルダに移せば導入は終わりです。

ブラウザ版はログインするだけで使えます。インストール作業も更新作業も要らず、管理された業務用Macのようにインストーラを実行できない環境でも動きます。

判断の分かれ目になるのは、キャンバスの描画性能ではありません。キャンバスはどちらもWebGLで描かれる同じものです。差が出るのは、キャンバスの周りにある要素、つまりフォントの読み込み、ウィンドウの並べ方、通知、そして拡張機能の開発環境です。

デスクトップ版だけにある機能

Figmaのヘルプは、この差をかなり率直に書いています。

Figmaデスクトップアプリを使用すると、ブラウザでFigmaを使用する場合と同じ機能にアクセスできます。さらに、以下のことを行うことができます。組織またはFigmaコミュニティのためにプラグインとウィジェットを開発する。フォントインストーラーを必要とせずに、デバイスにインストールされているフォントにアクセスして使用する 出典: help.figma.com

見出しになっているのはこの2つですが、実際に毎日効いてくるのはウィンドウまわりの機能です。

• 分割タブ表示。1つのウィンドウの中に2つのファイルを左右に並べられます。同じファイルを2枚開くこともでき、その場合は片方の編集がもう片方に即座に反映されます。
• タブグループ。開いているタブに名前と色を付けてまとめられます。案件ごとに束ねておくと、20枚開いていても目的のファイルに一発で戻れます。
• 複数ウィンドウ。タブをウィンドウの外へドラッグすると新しいウィンドウになり、ウィンドウ間でタブを移動できます。
• デスクトップ通知。メニューバーからFigmaの通知を受け取れます。ヘルプにはデスクトップアプリでのみ利用可能と明記されています。
• プロトタイプの音声。音が鳴っているタブにはアイコンが出て、そのタブに切り替えなくてもミュートできます。

デザインの現場で「アプリ版のほうが作業しやすい」と言われる理由は、レンダリングの速さではなく、ここに挙げた窓の操作性にあります。

ローカルの日本語フォントをどう通すか

日本語の制作では、ここが最大の論点になります。游ゴシック、ヒラギノ、モリサワ、フォントワークスといった、Macの中にインストールしてあるフォントをFigmaで使いたい場面です。

ブラウザは、そのパソコンに入っているフォントの一覧を勝手に読み取れません。そこでFigmaは「FigmaAgent」というフォントインストーラーを別に配布しています。ヘルプによれば、これは開くための画面を持たず、バックグラウンドで静かに動いて、すでにインストールされているフォントを検出してFigmaから使えるようにする仕組みです。

技術的な中身も公開されています。FigmaAgentはローカルホスト上でHTTPとHTTPSのサーバーを動かし、接続を許可するのは figma.com からのみで、インターネットには公開されません。使うアドレスは127.0.0.1に解決されます。セキュリティ担当者が活動ログを見て驚くことがある正体はこれです。

ここから2つの結論が出ます。1つは、ローカルフォントを多く使う環境ではデスクトップアプリのほうが単純だということです。フォントインストーラーが本体に含まれているので、別のものを常駐させて管理する必要がありません。もう1つは、ブラウザ版でもローカルフォントは使えるということです。FigmaAgentだけを入れれば、タブのままでも同じフォントに届きます。アプリ本体は入れられないがヘルパーなら入れられる、という管理環境では現実的な逃げ道になります。

Google Fontsと共有ライブラリだけで完結しているなら、この節は読み飛ばして構いません。ライセンス購入した和文書体をローカルに入れて使っているなら、ここが判断の中心になります。

導入と更新でつまずきやすい場所

デスクトップアプリの導入手順そのものは短いのですが、後で困る箇所が2つあります。

手順は、公式のダウンロードページからmacOS版を選び、ダウンロードされたファイルを開き、Figmaのアイコンを「アプリケーション」フォルダへ移し、インストーラを削除する、という流れです。ヘルプでもこの順で案内されています。ダウンロードフォルダにアイコンを置いたまま使うと、後でフォルダを整理したときにアプリを消してしまうので、移動までを1回で終わらせるのが安全です。

もう1つは更新です。最新でない場合はアプリ内に更新を促す表示が出ますが、会社が管理しているMacでは、その表示が出ても本人には更新できず、管理者に依頼する必要があると書かれています。表示を無視したまま数か月経つと、先ほどの6か月の期限に触れる可能性があります。ログイン方法は、メールアドレスとパスワード、Googleでのシングルサインオン、SAML SSOによる外部の認証基盤の3通りが用意されています。

動作環境の下限が1つずれている

2つの道の必要条件は同じではありません。ずれているのはmacOSのバージョン1つ分です。

項目	デスクトップアプリ	ブラウザ
macOSの最低要件	macOS 12以降（Monterey）	macOS 11以降
プロセッサ	IntelとApple Siliconの両方に最適化	ブラウザが対応していれば可
ブラウザの最低要件	該当なし	Chrome 99以降、Firefox 101以降、Safari 16以降、Microsoft Edge 121以降
バージョンの寿命	リリースから6か月でサポート終了	ブラウザ自身の更新に従う

表の中で見落とされやすいのが最後の行です。Figmaは、旧バージョンのデスクトップアプリのサポートをリリースから6か月で終了すると書いています。会社の管理下にあるMacでは更新が管理者の作業になることもあるため、チームで使うなら6か月という数字は予定表に入れておく項目になります。

Microsoft Edgeを使う場合には条件がもう1つあります。Figma.comに対して厳格モードのプライバシー設定を無効にしておく必要がある、とヘルプに書かれています。

AppleがmacOS 11で止めたIntel Macは、デスクトップアプリの線の下、ブラウザの線の上に位置します。そのMacは戦力外ではなく、ブラウザで使うMacです。

描画が重いときに疑う場所

「アプリ版に替えれば軽くなるはず」という期待は、たいてい外れます。Figmaが公開している要件は、アプリの要件ではなくグラフィックスの要件だからです。

Figmaの描画はWebGLで行われます。WindowsとLinuxでは、性能を保つためにOSとドライバーの更新が頻繁に必要になる一方、macOSではOSの更新にSafariの更新とWebGL関連の修正が含まれる、と説明されています。専用グラフィックカードについてはFigmaはサポートや調査を提供しないと明記していて、MacBook Proでどちらのグラフィックスプロセッサを使うかはApple側の資料を参照するよう案内しています。

具体的な注意も2つ挙がっています。Intel HD Graphics 3000は既知の不具合があり表示の乱れが起きうるGPUとして名指しされていること、そしてCitrixやVMwareのような仮想デスクトップ環境ではグラフィックカードが割り当てられていないことが多く性能が落ちやすいことです。後者はWeb版でもデスクトップアプリでも同じだと書かれています。

つまり、キャンバスがカクつく原因の多くはGPU、ドライバー、仮想環境の側にあります。同じファイルをタブからアプリに移しても解決しません。まず使用中のグラフィックスプロセッサを確認するほうが早い診断になります。

ブラウザ版を独立した窓に置く

ブラウザ版で行くと決めたとき、残る問題はFigmaの機能ではなく窓のほうです。タブのままではCmd+Tabで呼び出せず、ブラウザを終了すれば消え、40個のファビコンの列の中から毎回探すことになります。

この置き場所の問題を埋めるのが、サイトをアプリにする道具です。Chromiumを同梱するのではなく、すでにMacに入っているブラウザを土台にして、1つのURLだけを開くアプリの実体を作ります。窓はDockに位置を持ち、Cmd+Tabに並び、Mission Controlでも独立した窓として扱われ、ブラウザを終了しても閉じません。

Figmaで効いてくるのは、その窓に付いてくる性質です。作ったアプリは1つずつ専用のブラウザプロファイルを持つため、個人用のFigmaと取引先の組織のFigmaを、2つのアイコンとして同時にログインしたまま並べられます。拡張機能もアプリ単位で有効にするので、色を拾う拡張やアクセシビリティ検査の拡張を、デザイン用のアプリにだけ入れておけます。300以上のプリセットが用意されていて、URLもアイコンもアプリ名も組になっているため、設定に時間を取られません。どのサービスが最初から入っているかは対応サービス一覧で確認できます。実際の作り方の手順は使い方ガイドにまとまっています。

一方で、この方法がデスクトップアプリの機能を生み出すわけではありません。プラグインとウィジェットの開発はデスクトップ版が必要なままですし、分割タブ表示もタブグループもデスクトップ版の機能です。ローカルフォントもブラウザ版と同じくFigmaAgent経由になります。変えられるのは入れ物であって、中身のクライアントではありません。

状況別に、どれを選ぶか

ここまでの材料を、判断できる形に並べ直します。

• macOS 12以降で、ローカルの和文書体を使う … 公式のデスクトップアプリを入れるのが素直です。フォントもプラグイン開発もそこで完結します。
• macOS 11のIntel Mac … ブラウザ版が正規の道です。独立した窓に入れておくと日々の開き方が変わります。
• インストーラを実行できない管理下のMac … ブラウザ版一択になるので、窓の作り方とFigmaAgentの可否だけが検討事項になります。
• 個人用と取引先用のアカウントを行き来する … プロファイルを分けた窓を2つ用意するのが、いちばん取り違えが起きにくい形です。
• 閲覧とコメントだけで開く … アプリを増やす理由が薄いので、タブか軽い窓で十分です。

両方を併用する形も現実的です。公式アプリにはメインのアカウントと作り込む作業を任せ、別の窓には2つ目の組織や、メールで届く確認用のリンクを任せる分け方です。セッションが分かれているので、届いたリンクを開いたときに意図しないアカウントで開いてしまう事故が起きません。無料で作れる本数と有料版との差は料金に整理されており、拡張機能やプロファイルの扱いはできることで確認できます。判断に迷いやすい点はよくある質問にまとめられています。