code-connect-components

作者： figma

使用Code Connect在Figma設計組件與程式碼實作之間建立雙向連結。需要Figma MCP伺服器連線，以及已發布於Organization或Enterprise方案的組件。自動識別Figma選取中未對應的組件，接著掃描您的程式碼庫，依名稱、結構和props比對相符的程式碼組件。在建立對應前，將比對到的組件呈現給您審閱，允許選擇性接受或拒絕。支援多個...

npx skills add https://github.com/figma/mcp-server-guide --skill code-connect-components

下載 ZIP GitHub

來自 figma 的更多技能

video-interaction-mapper

此技能應在使用者要求分析UI螢幕錄影並將互動狀態映射到Figma時使用。觸發條件為「將影片…」等請求。

figma-code-connect

建立並維護 Figma Code Connect 範本檔案，將 Figma 元件對應至程式碼片段。當使用者提及 Code Connect、Figma 元件…時使用。

create-design-system-rules

自訂設計系統規則，確保專案中Figma轉程式碼實作的一致性。產生專案特定的元件組織、樣式、設計代碼與資產處理慣例，引導AI代理產出一致的程式碼。支援三種規則檔案格式：Claude Code適用的CLAUDE.md、Codex CLI適用的AGENTS.md，以及Cursor適用的.cursor/rules/figma-design-system.mdc。需連接Figma MCP伺服器並進行程式碼庫分析，以在規則制定前發現既有模式...

figma-implement-motion

將 Figma 的動態與動畫轉換為可直接用於生產環境的應用程式碼。在實作 Figma 設計中的動畫/動態時使用——使用者提及…

SwiftUI ↔ Figma 翻譯。每當使用者提及 Swift、SwiftUI、iOS、iPhone 或 iPad 時使用——無論是從 Figma 設計轉換為……

figma-use-motion

Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load…

figma-use-slides

此技能幫助代理在簡報（Slides）情境中使用 Figma 的 use_figma MCP 工具。可與提供基礎使用情境的 figma-use 技能搭配使用…

figma-use-figjam

此技能協助代理人在 FigJam 環境中使用 Figma 的 use_figma MCP 工具。可與提供基礎使用情境的 figma-use 搭配使用…