FigmaのMacアプリとブラウザ版の違い｜切り替える前に見る点

figma mac アプリという言葉で検索する人の状況は、おおむね二通りに分かれる。ブラウザのタブでFigmaを開いていて動作が重く感じられ、専用のアプリなら変わるのかを知りたい場合と、フォントが反映されないなどブラウザ版では越えられない制限に当たった場合である。この記事では、Macのデスクトップアプリとブラウザ版で実際に何が変わるのか、動作環境とインストールの手順、うまく入らないときに見る順番、そしてFigmaだけを速くしても解決しない部分までを順に整理する。

Webアプリが増えたMacで、Figmaの置き場所が問題になる理由

デザインの作業がブラウザの中に移ってから、1台のMacで同時に開いているサービスの数は増え続けている。メールとカレンダー、チャット、タスク管理、ドキュメント、そしてデザイン。これらがすべて同じブラウザのタブとして並ぶと、Figmaのファイルは他の20枚ほどのタブに埋もれる。探す時間が積み上がり、開き直すたびに読み込みが走る。

この状態で「Figmaが重い」と感じたとき、原因はFigma側だけにあるとは言い切れない。同じブラウザのプロセスが、チャットの常時接続と動画の再生と表計算の再計算を同時に抱えているなら、キャンバスの描画に回る余力は削られている。デスクトップアプリを入れる判断は、Figmaの機能を増やすためだけでなく、重い作業を他のタブから切り離すための置き場所の見直しでもある。

この見方に立つと、判断の材料は三つになる。ブラウザ版では使えない機能が業務に必要かどうか、手元のMacが動作環境を満たしているかどうか、そしてFigma以外のサービスを含めた全体の並べ方をどうするか。順に見ていく。

FigmaのMacアプリとブラウザ版で変わる点

Figmaのヘルプセンターは、デスクトップアプリの位置づけを次のように説明している。

Figmaデスクトップアプリを使用すると、ブラウザでFigmaを使用する場合と同じ機能にアクセスできます。さらに、以下のことを行うことができます。 出典: help.figma.com

ここで挙げられている追加分は二つある。組織やコミュニティ向けにプラグインとウィジェットを開発できること、そしてフォントインストーラーを使わずに、そのMacにインストールされているフォントへ直接アクセスして使えることである。社内で使う指定書体がある制作会社や、受け取ったデータの書体を再現しながら進める仕事では、この二つ目が決定的な差になる。ブラウザ版のままでは書体が置き換わり、行送りや文字幅が崩れた状態で確認を続けることになる。

通知の扱いも異なる。Figmaからの通知をMacのメニューバーから受け取れるのはデスクトップアプリだけで、ファイルのコメントやコミュニティの動きをブラウザを開かずに把握できる。トラックパッドの触覚フィードバックもmacOS側の機能であり、こちらもアプリ限定である。設定でオンにするには、Macのシステム設定のトラックパッドで「強めのクリックと触覚フィードバック」が有効になっている必要がある。

一方で、制約も明記されている。デスクトップアプリはプロキシの後ろでは動作しないため、社内のネットワークがプロキシ経由の構成なら、ブラウザ版を使う前提で運用を組むことになる。

動作環境とインストールの手順

導入の前に、Macのバージョンを確かめる。画面左上のAppleメニューから「このMacについて」を開けば、バージョン番号が表示される。ヘルプセンターの記載は次の通りである。

macOS: macOS 12 (2021年10月にリリースされたmacOS Monterey)以降を実行している必要があります 出典: help.figma.com

プロセッサーについては、IntelとApple Siliconの両方に最適化されているため、どちらを搭載しているかを調べて選び分ける作業は不要である。

インストールの流れは次の四段階になる。

• Figmaのダウンロードページから、macOS向けのファイルを保存する
• 保存したファイルを開いてインストーラーを実行する
• Figmaのアイコンを「ダウンロード」フォルダから「アプリケーション」フォルダへ移動する
• デスクトップまたは「ダウンロード」フォルダに残ったインストーラーを削除する

インストール時には、Figma Agentという常駐のサービスも同時に入る。これはFigmaがMacのフォントへアクセスし、デスクトップアプリでFigmaのリンクを開けるようにするための仕組みで、localhostでHTTPおよびHTTPSのサーバーを動かす。接続を受け付けるのはfigma.comからのものだけで、インターネットに公開される構成ではない。ループバックアドレスは127.0.0.1に解決される。通信を監視しているMacでは、この名前がログに現れることがあるため、正体を知っておくと無用な調査を省ける。

ログインの方法は、メールアドレスとパスワード、Google SSO、そしてSAMLによるシングルサインオンの三通りが用意されている。会社のアカウントで統制している場合は、管理者が指定した経路に従う。

ダウンロードや起動でつまずいたときに見る順番

うまく入らない、起動しても白い画面のままという場合は、切り分けの順番を決めておくと早い。

最初に見るのはバージョンである。デスクトップアプリは新しい版が出るとアプリ内で更新を促す表示が出るが、会社が管理しているMacでは、更新に管理者の対応が必要なことがある。古い版を使い続けた場合の扱いは明確で、以前のバージョンのサポートはリリースから6か月で終了する。長く触っていなかった端末で不具合が出たときは、まず更新を疑う。

次にネットワークである。前述の通りプロキシの後ろでは動かないため、社内ネットワークで開けず自宅では開ける場合は、アプリ側の問題ではない。

三つめに、ベータ版との混同がある。Figmaはデスクトップアプリのベータ版も配布しており、通常版と同時にインストールして使える。アイコンの名前が「Figmaベータ版」になっているものはテスト用の環境であり、同じアカウントでログインする必要もない。不安定さを感じたら、通常版に切り替えて再現するかどうかを確かめる。

それでも解決しないときは、ブラウザで同じファイルを開いてみる。ブラウザでは正常に編集できるなら切り分けはアプリ側に寄り、どちらでも同じなら回線かファイルの側に寄る。この一手間で、調べる範囲が半分になる。

タブと窓の使い分けで、探す時間を短くする

デスクトップアプリを入れる実利のうち、見落とされやすいのがウィンドウの操作である。Figmaのデスクトップアプリは、ファイルやプロトタイプを開くとナビゲーションバーにタブとして並ぶ。ここで使える操作を知っているかどうかで、1日の探し物の時間が変わる。

• タブを右クリックして「タブを固定」を選ぶと、よく開くファイルが左端に固定される。固定したタブはファビコンだけの表示になり、カーソルを合わせると完全なファイル名が出る
• 右クリックのメニューには「その他のタブを閉じる」と「すべてのタブを閉じる」もある。前者は固定したタブも閉じるため、扱いを覚えておく
• タブをキャンバスの左右へドラッグすると、同じウィンドウで2つのファイルを並べて表示できる。同じファイルを2つ並べたい場合は、右クリックから「分割タブで開く」を選ぶ。片方の変更はもう片方へ自動で反映される
• タブをウィンドウの外へドラッグすれば、別のウィンドウとして切り出せる。開いているウィンドウ間でタブを移動させることもできる

ファイル名に絵文字を先頭へ入れておくと、その絵文字がタブに表示される。案件ごとに印を変えておけば、タブが増えても目で見分けられる。プロトタイプをプレゼンテーションビューで再生するとタブは隠れるが、表示させたい場合はツールバーの「表示」から「プレゼンテーション中は常にタブを表示」を選べる。この項目はMacだけで使える。

無料で使える範囲と、アプリを入れる判断

デスクトップアプリ自体は、すべてのプランで利用できる。有料プランの契約が条件になっているわけではないため、無料のスタータープランのままでも導入できる。スタータープランの案内には、ドラフト数に上限を設けていないことが明記されている。個人で試す段階であれば、料金の判断とアプリの判断を切り離して考えてよい。

その上で、入れる価値が大きいのは次のような場合である。指定書体を扱う仕事をしている、コメントの通知を見落とすと進行が止まる、プラグインやウィジェットを自分で作る予定がある、複数のファイルを並べて比べる作業が多い。逆に、プロキシ配下の環境で使う、ブラウザ版で困っていない、共有リンクを開いて確認するだけという使い方なら、無理に入れる必要はない。

判断を迷わせるのは「重い」という感覚である。これはFigmaの機能差では説明できないことが多く、実際にはブラウザ全体の使い方に原因が寄っている。次の節で扱う。

Figmaだけを速くしても残る、本当の詰まり

デスクトップアプリへ移しても、Macでの作業がすっきりしない人は珍しくない。Figmaが独立したウィンドウになった一方で、チャットもメールもドキュメントも、依然として同じブラウザの中に並んでいるからである。通知はブラウザのタブから飛んでくる。仕事用と個人用のアカウントを切り替えるたびに、ログインの画面を経由する。作業の中断は、Figmaの外側で起きている。

この構造に手を入れる道具として、Webアプリをまとめるブラウザという種類のソフトウェアがある。サービスごとに独立した領域を与え、アプリのように呼び出せるようにするものである。何ができるのかはできることに整理されており、作業の単位ごとに画面を分ける考え方はワークスペースで説明されている。デザインの確認とコードの確認を行き来する人向けには、同じ画面の中で端末を開けるターミナルという組み合わせもある。

どのサービスが扱えるのかは使えるアプリで確認できる。Figmaのように専用アプリが提供されているサービスと、ブラウザしか入口がないサービスが混在しているのが実情であり、後者をどう扱うかで1日の切り替え回数が決まる。

窓の数で作業を組み直すときの見どころ

この種のソフトウェアを比べるとき、機能の一覧よりも先に確かめたい点が三つある。

第一に、サービスごとの分離の粒度である。同じサービスの複数アカウントを、別々の入れ物として扱えるかどうか。仕事用と個人用のアカウントを持つ人には、ここが最も効く。アプリごとに独立したワークスペースという設計になっているかどうかで、ログインの切り替えが消えるか残るかが分かれる。

第二に、動作の重さである。すべてのサービスを1つのプロセスに詰め込む作りだと、重いサービスが軽いサービスを巻き込む。Figmaをブラウザのタブから外した理由と同じ問題が、道具を変えた先でも起きる。

第三に、料金の考え方である。月額の購読か、一度の購入か。長く使う道具ほど、この差が積み上がる。実際の金額は料金で確認できる。

比較の材料としては、同じ領域の製品ごとの違いを並べた資料が役に立つ。購読型で拡張機能に力点を置く製品との差はWaveboxとの比較、オープンソースの選択肢との差はFerdiumとの比較で扱われている。導入前に出てくる疑問はよくある質問にまとめられているため、動作環境や対応サービスの確認はそこで済む。

Figmaのデスクトップアプリを入れるかどうかは、フォントと通知とプラグインの三点で判断がつく。その先にある「タブが多すぎて集中が切れる」という問題は、Figmaの外側で、置き場所の設計として解く。