Figma と FigJam の同期がぐるぐる？2026 年、Clash の分流でデザイン協業を安定させる
2026 年もオンライン UI／設計協業の中心に Figma エコシステムは置かれ、企業デザイン組織とフリーランス双方で利用率が高いままです。一方で跨区域のチームでは、ページ本体・静的資産の CDN・WebSocket によるリアルタイム同期が別のネットワーク出口へ分散すると、キャンバス読み込みは進むのにカーソルやコメントが追いつかない、中央のスピナーが止まらない、といった症状が出やすくなります。本稿では Clash（Clash Meta／Mihomo を想定）でFigma／FigJam 関連ドメインと CDN を独立ポリシーグループにまとめ、DNS とノード選択を揃えつつ、国内オフィス向けの通常業務トラフィックは DIRECT に残す「設計ツールだけプロキシ」の典型を整理します（職場ポリシー・契約・法令の範囲でご利用ください）。
なぜ「同期だけ」おかしく見えるのか
ブラウザまたはデスクトップアプリで Figma／FigJam を開くと、ドキュメント取得・認証・フォントや画像などのHTTPS と、編集内容を伝える長時間の WebSocket が別ホスト名に分かれていることがよくあります。プロキシやグローバル VPN で入口だけを変え、DNS の返すアドレスと実際のTCP／TLS の終端先が噛み合わないと、画面上は「ずっと読み込み中」のように見えます。また粗いルールセットではメインドメインは安定グループに入っても、新しい CDN のエッジだけが最終 MATCH に落ち、レイテンシだけ突出する、というパターンもあります。
- アプリ表層：
figma.com周辺の HTML／API／認証フロー。 - 静的資産：画像・スクリプト・フォントが載る各種 CDN ホスト（環境や地域でホスト名が増える）。
- リアルタイム層：WebSocket や長めの HTTPS でカーソル・ボード・コメントを同期する経路。
AI チャットや IDE 向けの記事が多い中、デザイン協業 SaaS は依存がブラウザと CDN に分散しやすく、Lovable／Bolt.new のプレビュー分流稿と発想は近いですが、Figma では共同編集のライブ性が前面に出ます。
トラフィックの層を揃える
まず開発者ツールの Network で、詰まっているのがメインのドキュメントなのか、フォントや画像のサブリクエストなのか、WS 接続なのかを切り分けます。デスクトップ版では OS のファイアウォールや証明書プロキシの組み合わせも絡むため、症状がブラウザだけかアプリだけかも確認してください。
考え方
「日本から見て速いノード」でも、小さなパケットと再接続に弱いと共同編集には向きません。ダウンロード速度だけではなく、ログ上のラウンドトリップとフラップを見ます。
「設計ツールだけプロキシ」の分流
チーム全体をフルトンネルにすると、社内ポータルや国内 SaaS まで遠回りになりがちです。典型拆法としては、(1) Figma／FigJam に関連するサフィックスをひとつのポリシーグループ（例：DESIGN-SYNC）へ、(2) GEOIP や社内ドメインで国内向けを DIRECT、(3) それ以外の海外一般は別グループ、という順でルールを上から細かく置きます。Clash Meta では DOMAIN-SUFFIX、必要なら DOMAIN-KEYWORD、ログで特定した単発ホストは DOMAIN で足します。
静的ファイルだけ別 CDN に逃げているときは、一覧サイトの巨大リストより自分のセッションで実際に出たホスト名を追記したほうが保守しやすく、サービス側のホスト追加にも強いです。
利用規約と社内ポリシー
プロキシ経路の変更は雇用契約や情報セキュリティ規程に触れることがあります。手順は自分の管理下の端末・許可された環境に限定してください。
ルール順と YAML の例（イメージ）
以下は構造のサンプルです。グループ名・ドメインは環境と実ログに合わせて置き換え、実際に接続に使われたホストを Clash のログで確認してください（ホスト名は変更されます）。
# Illustrative — replace DESIGN-SYNC with your stable proxy group; verify hosts in logs
proxy-groups:
- name: DESIGN-SYNC
type: url-test
proxies:
- NODE-A
- NODE-B
url: https://www.gstatic.com/generate_204
interval: 300
rules:
- DOMAIN-SUFFIX,figma.com,DESIGN-SYNC
- DOMAIN-SUFFIX,figma.io,DESIGN-SYNC
- GEOIP,JP,DIRECT
- MATCH,DIRECT
figma.io などは製品側の利用状況によります。GEOIP,JP,DIRECT は日本国内向けトラフィックを例示したものであり、拠点や MMDB の前提に合わせて国コードを置き換えてください。リモートルールセットをマージする場合、自作の DESIGN-SYNC 行が広い MATCH より上に残っているか、インポート順で潰されていないかを確認します。
| 切り口 | 向く場面 | 注意 |
|---|---|---|
DOMAIN-SUFFIX |
プロダクトの基準ドメインがはっきりしている | CDN が別 TLD だと取りこぼす → ログで追記 |
DOMAIN（単発） |
プレビューや WS だけ別ホストのとき | 運用で行が増えるのでコメントを残す |
PROCESS-NAME（デスクトップ） |
同一端末でブラウザだけ分けたい | アプリのマルチプロセスとログで要検証 |
DNS と fake-ip を出口と一致させる
「一覧には表示されるがキャンバスが真っ暗」「同期だけ途切れる」は、ルールより先に DNS の解像度を疑うのが早いです。fake-ip を使う構成では、ブラウザと Clash の解決結果がズレると一瞬だけ繋がる／証明書まわりが不安定に見えることがあります。詳細は 「接続中なのに繋がらない？DNS と fake-ip」 を参照し、変数は一度に一つ変えて切り分けてください。
WebSocket と長時間 HTTPS
リアルタイム協業は WebSocket や HTTP/2 下の長めのストリームが絡みます。別経路に逃げたときの典型は、ドキュメント一覧は更新されるが共同カーソルが止まったまま、です。ブラウザではタブを拡張機能なしのプロファイルで試し、Clash ログのポリシー列とホスト名を突き合わせます。WebSocket を扱う別稿の切り分け手順も参考になります。
ノード選びと url-test のフラップ
DESIGN-SYNC グループには、帯域よりレイテンシが安定しているノードを集め、url-test の interval を短くしすぎて頻繁に乗り換えると、編集セッションが不安定に見えることがあります。逆に間隔が長すぎると、実際には障害したノードへ張り付いたままになります。ログでどのノードに実際に流れたかを確認しながら調整します。
国内オフィス・社内トラフィックを DIRECT に残す
メール、社内 Wiki、国内クラウドストレージなどは、設計ツールと同じ商用出口へ載せる必要性が低いことが多いです。GEOIP や社内ドメインの DOMAIN-SUFFIX を DIRECT にし、帯域と退出ポリシーの両面で無駄を減らします。オフィス側が固定出口 IP の許可リストを運用している場合は、プロキシ出口が変わると逆に社内 SaaS が弾かれることもあるため、その場合は設計ツール向けグループだけ慎重に選びます。
症状別の切り分け
中央のスピナーが止まらない
メイン HTML は返っているが、サブリソースや WS がタイムアウトしているパターンです。Network で赤くなっているホストを特定し、そのサフィックスを DESIGN-SYNC に寄せます。
他人のカーソルだけ遅い／自分だけ編集できないように見える
WebSocket が別ポリシーに落ちている、またはノードがフラップしている可能性があります。同じファイルを別ネットワーク（テザリング等）で試し比較すると切り分けが早いです。
画像やフォントだけ欠ける
CDN ホストだけ DIRECT に残り、メインだけプロキシ、など分解されすぎているときに起きやすいです。ログでホストごとのポリシーを揃えます。
Windows／macOS の土台
TUN やシステムプロキシの組み合わせは端末ごとに差があります。Windows では 「Clash for Windows 完全設定ガイド」、macOS では 「Clash Verge Rev の初回設定」で権限とモードを固めてから、本稿のドメイン分流を足すと手戻りが少ないです。
よくある質問
デスクトップアプリとブラウザで片方だけ不安定
証明書プロキシやアプリ独自のプロキシ設定がClash と二重になっていないか確認してください。どちらも同じルールに載るよう揃えるか、アプリ側をシステム設定に合わせます。
組織プランで SSO がある場合
認証ドメインが Figma 本体と別になることがあります。ログイン直後だけ失敗するなら、そのドメインも同じ安定グループに含めます。
チェックリスト
- 開発者ツールで失敗しているホスト名と（可能なら）WS／XHR を特定する。
- それらを
DESIGN-SYNCなどひとつのポリシーに束ね、ルール順を確認する。 - DNS・fake-ip と実出口を DNS 記事の手順で整合させる。
- url-test のフラップをログで確認し、ノード集合と間隔を調整する。
- 国内・社内向けは DIRECT を維持できるか、GEOIP／ドメイン行を見直す。
まとめ
2026 年も Figma／FigJam を軸にしたデザイン協業は盛んですが、ページ・CDN・WebSocket が別出口になると同期だけ壊れるように見えます。Clash で関連ドメインを独立ポリシーグループにまとめ、DNS とノードをログで突き合わせ、国内オフィス向けは DIRECT に残す構成は、Cursor／Lovable 系の稿と並んで実務で再現性が高いパターンです。契約と法令を踏まえ、自分の管理下の環境で適用してください。