figma-use

figma-use 技能概覽

figma-use 的用途

figma-use 是在 Figma plugin API 工作流程中，安全且正確呼叫 use_figma 的必備技能。它是為那些需要用 JavaScript 來撰寫、更新、檢視或結構化 Figma 檔案，而不是手動操作的代理設計的。如果你的任務包含編輯節點、綁定變數、調整 auto layout、建立元件，或以程式方式讀取檔案結構，這個技能就是正確的起點。

適合誰安裝

如果你需要在 agent 執行中可靠地操作 Figma 檔案，特別是做 Design Implementation，而單靠提示詞又太模糊時，就應該安裝 figma-use skill。當輸出結果取決於檔案上下文、既有元件，或是一般程式提示詞常會忽略的 Figma 特定限制時，它最有用。

為什麼實務上很重要

figma-use 的核心價值不只是 API 存取，而是幫你把握什麼時候該呼叫 use_figma，以及應該先載入哪些內容。這能減少錯誤呼叫、缺少前置條件與徒勞的反覆嘗試。當你需要在即時 Figma 檔案上穩定執行時，它特別有幫助，因為操作順序與檔案狀態都可能改變結果。

如何使用 figma-use 技能

先安裝並先載入

使用你的 skills manager 提供的安裝路徑，然後確認 agent 在任何 use_figma 工具呼叫之前先載入 figma-use。repo 內的規則寫得很明確：呼叫 use_figma 時要傳入 skillNames: "figma-use"。如果任務是整頁或多區塊畫面建置，也要一起載入 figma-generate-design，這樣才能把 API 規則和畫面建置流程結合起來。

先從正確的檔案開始

在使用 figma-use 時，先閱讀 references/plugin-api-standalone.index.md，掌握 API 範圍；接著在撰寫程式碼之前，再查看 references/common-patterns.md、references/gotchas.md 與 references/validation-and-recovery.md。如果你是在處理元件、變數或樣式，下一步應直接跳到對應的 pattern 文件，而不是把整個 repo 從頭掃一遍。

把模糊需求轉成可執行的提示

給 figma-use 的輸入越強，越應該明確寫出目標檔案區域、物件類型，以及預期變更。例如：「在選取的 frame 內，使用現有本地元件建立一個橫向 3 卡版面，維持目前頁面的間距一致，並回傳已建立的 node IDs。」這會比「讓它更好看」有效得多，因為這個技能需要的是可執行的結構，而不是主觀方向。

能提升輸出品質的工作流程

好的 figma-use 工作流程是：先檢查檔案或已選取的節點，確認可用的元件／樣式，做最小且安全的變更，然後驗證結果。對於 Design Implementation，應優先採用逐步組裝，而不是一次生成到位。先閱讀 agents/openai.yaml 了解工具情境，再把 references 資料夾當成 API 行為與常見失敗案例的唯一依據。

figma-use 技能 FAQ

figma-use 只能用來寫程式嗎？

不是。figma-use skill 適用於任何需要在 JavaScript 中透過 Plugin API 操作 Figma 的情境，包括像是程式化檔案檢視或結構探索這類獨特的讀取操作。只要任務依賴即時文件狀態，就屬於這個範圍。

什麼情況不該使用？

如果只是靜態建議、粗略的設計評論，或是不需要碰檔案就能完成的任務，就不要用 figma-use。若你其實沒有要呼叫 use_figma，這個技能能帶來的價值很有限，反而可能拖慢流程。

對新手友善嗎？

是，只要你依照 repo 順序操作，並把需求寫得具體。新手最常卡住的地方，是直接要求一個完成品，卻沒有提供目標 frame、既有元件選擇或限制條件。當你從目前檔案狀態與狹窄目標出發時，這個技能會更容易上手。

它和一般提示詞有什麼不同？

一般提示詞可以描述意圖；figma-use 則幫你依照 Figma 真實的 API 規則去執行。這對 Design Implementation 特別重要，因為很多 Figma 動作都取決於節點類型、頁面上下文或支援的 Plugin API 方法。這個技能會以文件化的 pattern 與 gotchas 作為錨點，減少猜測。

如何改進 figma-use 技能

提供更好的檔案上下文

最大的改進來自於明確指出現有內容：已選取的 frame、頁面名稱、元件庫、變數集合，或本地 style set。若你省略這些資訊，agent 就得猜到底該建立新資產，還是重用既有資產。對 figma-use 來說，上下文通常比冗長描述更重要。

指明結構，而不只是美感

像「讓它更乾淨一點」這類需求太弱。更好的輸入會像這樣：「把選取的 marketing 區塊轉成 12 欄響應式 frame，重用本地文字樣式，並讓 CTA 與既有 button component 對齊。」這能幫助 figma-use 選對 API 路徑，也能避免輸出看起來很精緻，卻不符合檔案結構。

留意常見失敗模式

最常見的問題包括：沒有載入 skill 就呼叫 use_figma、跳過 API 參考索引，以及試圖一次做太多事。另一個常見問題，是沒有檢查 node placement、component properties 或 variable modes 相關的 gotchas。如果結果不對，應先查看與失敗操作相符的 references，再重試。

用具體修正方式迭代

拿到第一版結果後，改進時要明確指出哪些要保留、哪些要替換，以及哪些必須完全不動。例如：「保留目前的 component instances，把垂直間距減少 8px，並且只更改次要標籤的文字樣式。」這種修正方式，通常比要求重新設計一版，更能讓 figma-use 在第二輪做得更好。