code-connect-components

यह कौशल तब उपयोग किया जाना चाहिए जब उपयोगकर्ता किसी UI स्क्रीन रिकॉर्डिंग का विश्लेषण करने और इंटरैक्शन स्थितियों को Figma में मैप करने के लिए कहे। "वीडियो डालें..." जैसे अनुरोधों के लिए ट्रिगर करें।

Figma Code Connect टेम्पलेट फ़ाइलें बनाता और बनाए रखता है जो Figma घटकों को कोड स्निपेट से मैप करती हैं। उपयोग तब करें जब उपयोगकर्ता Code Connect, Figma घटक का उल्लेख करता है…

आपके प्रोजेक्ट में consistent Figma-to-code implementation के लिए custom design system rules। Component organization, styling, design tokens, और asset handling के लिए project-specific conventions उत्पन्न करता है जो AI agents को consistent code बनाने में मार्गदर्शन करते हैं। तीन rule file formats का समर्थन करता है: Claude Code के लिए CLAUDE.md, Codex CLI के लिए AGENTS.md, और Cursor के लिए .cursor/rules/figma-design-system.mdc। Rule बनाने से पहले existing patterns खोजने के लिए Figma MCP server connection और codebase analysis की आवश्यकता होती है...

Figma मोशन और एनिमेशन को प्रोडक्शन-रेडी एप्लिकेशन कोड में अनुवाद करता है। Figma डिज़ाइन से एनिमेशन/मोशन लागू करते समय उपयोग करें — उपयोगकर्ता उल्लेख करता है…

SwiftUI ↔ Figma अनुवाद। जब भी उपयोगकर्ता Swift, SwiftUI, iOS, iPhone, या iPad का उल्लेख करे — किसी भी दिशा में — Figma डिज़ाइन का अनुवाद करने के लिए उपयोग करें...

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

यह कौशल एजेंटों को स्लाइड्स संदर्भ में Figma के use_figma MCP टूल का उपयोग करने में मदद करता है। इसे figma-use के साथ उपयोग किया जा सकता है, जिसमें इसके उपयोग के लिए मूलभूत संदर्भ है…

यह कौशल एजेंटों को FigJam संदर्भ में Figma के use_figma MCP टूल का उपयोग करने में मदद करता है। इसे figma-use के साथ उपयोग किया जा सकता है, जिसमें इसके उपयोग के लिए मूलभूत संदर्भ है…