When the board will not draw and teammates look offline
The user-visible story is deceptively simple. You open a file, the Figma chrome renders, the left sidebar can even populate with pages, and yet the central canvas never graduates from a spinner—sometimes for minutes. Another common variant is the inverse: the frame eventually paints, but live cursors stutter, comments post only after a refresh, or you fall out of a FigJam brainstorm while voice chat in another app still works. All of that can be described as a slow internet day, but the more precise diagnosis is often split brain between concurrent transports. One set of static assets can complete over DIRECT while a wss:// session to a different edge is pinned to a tunnel that is lossy, oversubscribed, or thrashing on health checks. Clash does not make pixels; it decides which rules own each new TCP flow. If those decisions disagree with the hostname your browser thinks it is talking to, you see collaboration bugs that look like a broken product.
The mental model to carry through this page is session coherence for design collaboration workloads. Every WebSocket the editor opens to keep presence, comments, and live layout updates in sync is a long-lived flow. Jitter, idle timeouts, and mid-session route changes are far more dangerous than a higher millisecond reading on a synthetic ping. Your goal is not the fastest line on a leaderboard; it is a path that your editor can keep open while you nudge type scales and re-run prototypes for an entire afternoon. That is why we privilege explicit suffix coverage, resolver alignment, and connection stability over ad-hoc “turn everything global” debugging that hides the real mismatch.
Why Figma feels different from a document tab
A marketing site mostly asks the browser to fetch a handful of large objects and then go idle. A design tool asks for a continuous contract with the product backend: the editor keeps at least one upgraded WebSocket to maintain multiplayer state, in parallel with batched REST or GraphQL calls, asset uploads, and feature-flagged subsystems that may or may not share the same registrable domain. If your split routing profile happens to place those families on different exits because one hostname matched a GEOSITE rule set and another fell through to MATCH, the UI can paint while state diverges. That is not a subtle corner case. It is the default failure mode of first-match-wins engines when long-tail SaaS hostnames are missing from the curated lists you imported from the community.
From the perspective of Clash policy, the fix is the same as for other WebSocket-heavy services: you gather the names you actually see on your own machine, you promote them in the rules: array ahead of wide-area catches, and you verify the resolver story so FakeIP and client-side dig output tell the same story. The parallel Notion sync field guide on this site walks a documentation product with the same building blocks. Read both if your company mixes knowledge work and design collaboration; the YAML grammar does not care whether the pixels live in a wiki or on a board.
Build a hostname set from DevTools, not from hearsay
Start every serious profile refresh with a fresh inventory. Open browser DevTools, enable persistent logs, and load a Figma file that reproduces the stall. Filter the Network table for WS or search for wss:// handshakes alongside ordinary HTTPS rows. You are looking for the first-party set that your editor truly depends on, not a vendor’s static marketing list. In practice, many teams will see figma.com and related subdomains on document traffic, with additional object-storage or API hosts for uploads and account flows. The exact set shifts when Figma changes edges, which is why copy-paste lists from a two-year-old forum post rot faster than Clash release notes.
On desktop, if you use the installed app as well as the browser, run the same exercise twice. Packaged clients often use Chromium-class networking but with different process boundaries; some background sync helpers are easier to corral in TUN mode than in pure system-proxy setups. The inventory step is your bridge between a designer’s “it feels stuck” report and the mechanical words your YAML understands: DOMAIN-SUFFIX, DOMAIN, and, when the core recovers a name, intelligible Sniffer output.
Re-check after new features: plugins, org SSO, and beta surfaces can add hostnames. Re-export after changes so your split routing block stays a living paragraph, not a museum piece.
Illustrative split routing: keep figma.com above blunt GEO buckets
Clash walks rules: from the top and stops on the first match. That single fact explains most “I added a line but nothing changed” stories. If a remote RULE-SET or a GEOIP,CN row already swallowed the flow, your Figma suffix line below it is dead text. The practical layout is to keep LAN and private range bypasses first, add your vetted design collaboration block next, and only then allow coarse buckets that map entire countries. For readers maintaining organization-wide policies, the same section should live in a file you can diff in code review, not inside an opaque bundle you cannot reason about. When in doubt, our rule order and MATCH guide for Clash Meta explains the ladder in depth.
# Illustrative — replace group and rule names to match your profile
DOMAIN-SUFFIX,figma.com,Figma-Stable
# Add exact lines from your DevTools export as needed, e.g.:
# DOMAIN,www.figma.com,Figma-Stable
A narrow DIRECT line can be the right call when you have hard evidence that a domestic anycast path is both allowed by policy and measurably steadier for your office ISP. A blind default to DIRECT to chase ping, by contrast, often strands long WebSocket sessions on a route that your enterprise firewall inspects or shapes aggressively. When legal and network teams have already blessed an overseas exit for SaaS, routing the design collaboration stack through a named stable group is usually more predictable than alternating policies mid-day.
When logs show an IP, not a brand name: Sniffer and HTTPS
Many domain-based rules only apply when the engine knows which hostname belongs to a flow. For HTTPS, the ClientHello SNI can supply that, which is why Meta-class cores offer Sniffer-style features to recover a label before routing. The capability is not a license to turn every connection into a guess; respect skip lists, read documentation, and treat recovered names as signals you correlate with the inventory you collected earlier. A focused intro lives in the Clash Meta Sniffer and HTTPS article. Use it when Clash logs show repeated connections to a raw IPv4/IPv6 target that should have been a familiar SaaS name.
The debugging habit that saves weeks is to record three things on every odd event: the displayed policy, the name or address in the log, and the resolver output for the same label. When those three disagree, fix DNS or capture before you swap server countries at random. That discipline turns mysterious canvas freezes into a finite checklist, which is the whole point of shipping boring logs.
Select proxy groups for long sessions, not for screenshot bragging
Interactive design collaboration can tolerate a few extra milliseconds of latency far more easily than a relay that rebalances every time a synthetic health check sneezes. If your url-test or fallback group is too aggressive, you will see waves of reconnection in the WebSocket layer that the Figma client surfaces as cursors that jump or vanish. Tune intervals and tolerances with the real workload in mind. Document what each outbound is for—some servers exist solely for untrusted public Wi‑Fi, others for high-trust org traffic—and resist the urge to let every SaaS call ride the same “fastest node” pool if that pool is also where your household queues 4K video downloads. Clash split routing is partly about fairness between flows on your own LAN, not only about the far side of the tunnel.
If you are already parallelizing, remember that the radio layer still matters. An overcrowded 2.4 GHz band can inject loss that even perfect YAML cannot correct. Where possible, run heavy file sync and video calls on different airtime from live editing, or use Ethernet for long critique sessions. No proxy core invents more spectrum; it can only make policy deterministic once packets reach the user space.
DNS, FakeIP, and the invisible reason your rule “missed”
Misaligned resolvers are the silent accomplice in many WebSocket dropouts. The browser may have learned one address for figma.com while the core issued a synthetic FakeIP for that label under a different policy, which means the first match that fires is the wrong one. Align nameserver-policy, fake-ip-filter, and any hijack toggles deliberately. A step-by-step treatment lives in the Meta core DNS leak prevention guide. Treat that document as a prerequisite for anyone maintaining shared team profiles, not an optional footnote.
When a teammate reports that “only my Figma tab fails,” compare OS resolver output with the core’s own trace for the same string. A disagreement there is a DNS bug until proven otherwise, not a mystery bug in the whiteboard. This same three-field method appears across our Clash tutorials; internalizing it keeps weekend debugging off your calendar.
Zero Trust and campus networks: if an agent intercepts design collaboration TLS on the laptop regardless of the proxy, YAML tweaks will not be enough. Take PCAP or SNI evidence to the network team instead of fighting alone.
System proxy compared to TUN for browser tabs and the desktop app
Chromium usually respects a system proxy on modern desktops. Figma’s packaged application may still ship helper processes that are easier to steer when TUN mode presents a single policy plane to the whole OS. If the web client is flawless while the installed client flakes, you are more likely looking at a capture issue than a bad rule. On Windows, service installation, driver consent, and Windows Defender exclusions still matter: skipping prerequisites is how people conclude that TUN “does nothing” when half the traffic never touched the engine. The TUN walkthrough for Clash Verge Rev and the Clash on Windows guide cover the details end to end. Pair them with the configuration documentation on this site for vocabulary that matches the core.
| Use case | System proxy | TUN (typical) |
|---|---|---|
| Figma in Chrome / Edge / Safari | Often sufficient for stable WebSockets | Helps if split-brain between apps |
| Figma desktop (Electron-style) | May miss background helpers | More uniform for design collaboration |
| Single shared stable outbound | Per-app variability | One routing story |
| Cross-team laptops with mixed localizations | More manual tuning | Often easier to standardize in IT runbooks |
A verification checklist for live files
The goal of these steps is a repeatable, low-drama test that a designer, not only a network engineer, can run before a design critique. You are looking for connection stability signals: pending wss:// rows that settle, a stable outbound tag, and resolvers that agree. Do not conflate a failed test with a moral judgment on your subscription—start by proving capture and the first rules match.
1Confirm that wss:// handshakes complete in DevTools
Reproduce the stall, sort by type, and watch whether a WebSocket stays in a pending or failed state. If static HTTPS completes while only the upgrade fails, you already know the split is transport-specific rather than a whole-site outage. That is high-value triage in minutes.
2Read the first policy hit for a figma.com-class flow in Clash logs
The tag should be the stable group you intended, not a generic GEOIP or keyword bucket you forgot sat above your manual list. If the index confuses you, reread the rule order guide with a flattened rules: view open.
3Compare resolver answers with FakeIP on and off in a test profile
A/B your resolver stack deliberately on a copy of the profile, not in production at three in the morning. The Meta DNS article shows which fields interact.
4Match capture mode to the client you actually use
If only the desktop app fails, try TUN per the Verge TUN recipe before you add exotic protocol chains.
5Rotate a suspect node, not the entire product stack
If failures correlate with a single city or provider, fail sideways within the same policy instead of arm-waving to “Global.” Connection stability starts with understanding which hop is actually sick.
Org policy, data residency, and the cost of “just make it work”
Routing design collaboration data through a third-party exit can collide with client contracts or local regulations, even when round-trip time improves. Your security team may require split tunnels that keep identity with one provider and assets with another. Clash is a tool for technical routing, not a substitute for legal review. On the other side of the same coin, aggressive DIRECT shortcuts that follow marketing advice instead of evidence can still strand WebSocket traffic on a path your ISP throttles during peak YouTube hours. The grown-up version of split routing is a written matrix: which hostname class exits where, who approved it, and when the next review is due.
Also budget maintenance. Figma ships design-system features on a quick cadence; Clash cores merge Sniffer and DNS changes that interact with the same areas of your file. A quarterly pass over your first-party split routing block, alongside subscription renewals, is cheaper than an emergency all-hands the night before a launch review.
Documentation, clients, and where binaries live
Skim the configuration documentation to keep your team speaking the same keywords when you file tickets, and use the official Clash download page for the graphical clients you recommend to design partners. Upstream source repositories and issue trackers on GitHub remain the right place to read licenses and report core bugs, separate from the day-to-day installer experience we standardize for readers here.
Last word
A stuck Figma canvas is frustrating because it collides with real deadlines, but it is still an IP, TCP, TLS, and DNS problem wearing a design collaboration skin. Treat WebSocket and streaming APIs as first-class citizens in Clash: build your hostname inventory from real sessions, place explicit split routing lines where the ladder can see them, align resolvers and FakeIP honestly, and pick exits for steadiness. When the logs get boring, your team can spend its attention on the work that matters—critique, iteration, and shipping—while connection stability stays a background guarantee instead of a meeting topic.