Token Flow - Library Variable Inspector

About this plugin

🎯 When to use Token Flow?

Struggling with a massive Design System? Use Token Flow when you need to:

1. Identify exactly which variable or style is applied to a component.
2. Verify if a variable correctly maps to the right value after switching Modes.
3. Audit all Remote Library resources used within a specific Frame.

🎁 What you’ll get

Resolved Values: See the final primitive values (Hex, px) under the current Mode, not just alias names.

1. Source Tracking: Automatically group variables by their source (Local vs. Remote Library).
2. Comprehensive Audit: A clear list of all Variables, Styles, and Components in your selection.
3. JSON Export: quick integrate into your codebase.
4. One-Click Copy: Instant copy for developer handoff or documentation.

🛠️ Under the Code

1. Smart Context Detection: Scans selected layers or page to resolve the correct values based on your Variable Mode settings.
2. Deep Dependency Trace: Reconstructs the full path from Semantic Token → Primitive Token → Raw Value.
3. Live Remote Sync: Uses Figma’s API to ensure your data matches the Design System’s Source of Truth.

---

🎯 適用情境

當你在維護龐大的設計系統，遇到以下問題時：

1. 想確認元件到底使用了哪個變數，以及為什麼顏色顯示異常。
2. 切換 Mode 後，不確定變數是否正確對應到預期的數值。
3. 需要快速盤點選取範圍內使用了哪些遠端 Library (Remote) 資源。

🎁 你將獲得

1. 數值解析： 不只顯示別名 (Alias)，直接顯示當前 Mode 下的最終原始值 (Hex, px)。
2. 來源追蹤： 自動依來源 Library 分組，清晰區分本地與遠端資源。
3. 完整變數清單： 一次列出選取範圍內所有的變數、樣式與元件。
4. 一鍵匯出：讓你導出 JSON, 快速整合進前端
5. 一鍵複製： 快速複製數值，大幅提升開發溝通與文件撰寫效率。

🛠️ 運作邏輯

1. 智慧環境偵測： 自動抓取選取物件或頁面的 Variable Mode 設定，確保解析結果與實際畫面一致。
2. 完整路徑解析： 還原從 語意 Token (Semantic) → 原始 Token (Primitive) → 最終數值 的完整路徑。
3. 遠端同步檢索： 透過 Figma API 抓取遠端定義，確保資訊與設計系統實體同步。