Token Flow - Library Variable Inspector

🎯 When to use Token Flow?

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

Identify exactly which variable or style is applied to a component.

Verify if a variable correctly maps to the right value after switching Modes.

Audit all Remote Library resources used within a specific Frame.

🎁 What you’ll getResolved Values: See the final primitive values (Hex, px) under the current Mode, not just alias names.

Source Tracking: Automatically group variables by their source (Local vs. Remote Library).

Comprehensive Audit: A clear list of all Variables, Styles, and Components in your selection.JSON Export: quick integrate into your codebase.

One-Click Copy: Instant copy for developer handoff or documentation.

🛠️ Under the CodeSmart Context Detection: Scans selected layers or page to resolve the correct values based on your Variable Mode settings.

Deep Dependency Trace: Reconstructs the full path from Semantic Token → Primitive Token → Raw Value.

Live Remote Sync: Uses Figma’s API to ensure your data matches the Design System’s Source of Truth.---🎯 適用情境當你在維護龐大的設計系統，遇到以下問題時：想確認元件到底使用了哪個變數，以及為什麼顏色顯示異常。切換 Mode 後，不確定變數是否正確對應到預期的數值。需要快速盤點選取範圍內使用了哪些遠端 Library (Remote) 資源。🎁 你將獲得數值解析： 不只顯示別名 (Alias)，直接顯示當前 Mode 下的最終原始值 (Hex, px)。來源追蹤： 自動依來源 Library 分組，清晰區分本地與遠端資源。完整變數清單： 一次列出選取範圍內所有的變數、樣式與元件。一鍵匯出：讓你導出 JSON, 快速整合進前端一鍵複製： 快速複製數值，大幅提升開發溝通與文件撰寫效率。🛠️ 運作邏輯智慧環境偵測： 自動抓取選取物件或頁面的 Variable Mode 設定，確保解析結果與實際畫面一致。完整路徑解析： 還原從 語意 Token (Semantic) → 原始 Token (Primitive) → 最終數值 的完整路徑。遠端同步檢索： 透過 Figma API 抓取遠端定義，確保資訊與設計系統實體同步。