create-design-system-rules

द्वारा 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 की आवश्यकता होती है...

npx skills add https://github.com/figma/mcp-server-guide --skill create-design-system-rules

ZIP डाउनलोड करें GitHub

figma की और Skills

video-interaction-mapper

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

figma-code-connect

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

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

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

figma-use-figjam

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

code-connect-components

Figma डिज़ाइन घटकों और कोड कार्यान्वयन के बीच Code Connect का उपयोग करके द्विदिश लिंक स्थापित करें। Figma MCP सर्वर कनेक्शन और Organization या Enterprise योजनाओं पर प्रकाशित घटकों की आवश्यकता है। Figma चयनों में स्वचालित रूप से अमैप्ड घटकों की पहचान करता है, फिर नाम, संरचना और प्रॉप्स द्वारा मिलान कोड घटकों के लिए आपके कोडबेस को स्कैन करता है। मैपिंग बनाने से पहले समीक्षा के लिए मिलान किए गए घटकों को आपके सामने प्रस्तुत करता है, जिससे चयनात्मक स्वीकृति या अस्वीकृति की अनुमति मिलती है। कई का समर्थन करता है...