Figma Skills

Establish bidirectional links between Figma design components and code implementations using Code Connect. Requires Figma MCP server connection and published components on Organization or Enterprise plans Automatically identifies unmapped components in Figma selections, then scans your codebase for matching code components by name, structure, and props Presents matched components to you for review before creating mappings, allowing selective acceptance or rejection Supports multiple...

Custom design system rules for consistent Figma-to-code implementation across your project. Generates project-specific conventions for component organization, styling, design tokens, and asset handling that guide AI agents to produce consistent code Supports three rule file formats: CLAUDE.md for Claude Code, AGENTS.md for Codex CLI, and .cursor/rules/figma-design-system.mdc for Cursor Requires Figma MCP server connection and codebase analysis to discover existing patterns before rule...

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

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

We need to translate the given English text to Hindi. The text describes a skill for connecting Figma design components to code components using Code Connect mapping tools. It lists trigger phrases and mentions canvas writes via use_figma. We must preserve product names like Figma, Code Connect, use_figma, and technical terms. No extra commentary or labels. Output only the translation. Translation: "Figma डिज़ाइन घटकों को Code Connect मैपिंग टूल का उपयोग करके कोड घटकों से जोड़ता है। जब उपयोगकर्ता "code connect", "इस घटक को कोड से कनेक्ट करें", "इस घटक को मैप करें", "घटक को कोड से लिंक करें", "कोड कनेक्ट मैपिंग बनाएं" कहता है, या Figma डिज़ाइन और कोड कार्य

उपयोगकर्ता के कोडबेस के लिए कस्टम डिज़ाइन सिस्टम नियम उत्पन्न करता है। इसका उपयोग तब करें जब उपयोगकर्ता "डिज़ाइन सिस्टम नियम बनाएं", "मेरे प्रोजेक्ट के लिए नियम उत्पन्न करें", "डिज़ाइन नियम सेट करें", "डिज़ाइन सिस्टम दिशानिर्देश अनुकूलित करें" कहे, या Figma-से-कोड वर्कफ़्लो के लिए प्रोजेक्ट-विशिष्ट परंपराएँ स्थापित करना चाहे। Figma MCP सर्वर कनेक्शन आवश्यक है।

उपयोगकर्ता के कोडबेस के लिए कस्टम डिज़ाइन सिस्टम नियम उत्पन्न करता है। उपयोग करें जब उपयोगकर्ता कहे "डिज़ाइन सिस्टम नियम बनाएं", "मेरे प्रोजेक्ट के लिए नियम उत्पन्न करें", "सेट अप डिज़ाइन…

एक नई खाली फिग्मा फ़ाइल बनाएँ। इसका उपयोग तब करें जब उपयोगकर्ता कोई नया फिग्मा डिज़ाइन या फिगजैम फ़ाइल बनाना चाहता है, या जब use_figma को कॉल करने से पहले आपको एक नई फ़ाइल की आवश्यकता हो। यदि आवश्यक हो तो whoami के माध्यम से योजना समाधान संभालता है। उपयोग — /figma-create-new-file [editorType] [fileName] (जैसे /figma-create-new-file figjam My Whiteboard)

एक नई खाली फिग्मा फ़ाइल बनाएँ। इसका उपयोग तब करें जब उपयोगकर्ता कोई नई फिग्मा डिज़ाइन या फिगजैम फ़ाइल बनाना चाहता है, या जब use_figma को कॉल करने से पहले आपको एक नई फ़ाइल की आवश्यकता हो।

इस कौशल का उपयोग figma-use के साथ तब करें जब कार्य में किसी एप्लिकेशन पेज, व्यू या मल्टी-सेक्शन लेआउट को Figma में अनुवाद करना शामिल हो। ट्रिगर: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code'। यह पसंदीदा वर्कफ़्लो कौशल है जब उपयोगकर्ता कोड या विवरण से Figma में पूरा पेज, स्क्रीन या व्यू बनाना या अपडेट करना चाहता है। search_design_system के माध

इस कौशल का उपयोग figma-use के साथ करें जब कार्य में किसी एप्लिकेशन पेज, व्यू या मल्टी-सेक्शन लेआउट को Figma में अनुवाद करना शामिल हो। ट्रिगर: 'write to…

MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. Routes to type-specific guidance (generic flowchart, architecture…

MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. Routes to type-specific guidance (generic flowchart, architecture…

कोडबेस से Figma में एक पेशेवर-ग्रेड डिज़ाइन सिस्टम बनाएँ या अपडेट करें। इसका उपयोग तब करें जब उपयोगकर्ता वेरिएबल/टोकन बनाना, कम्पोनेंट लाइब्रेरी बनाना, थीमिंग (लाइट/डार्क मोड) सेट करना,

Figma में कोडबेस से एक पेशेवर-स्तरीय डिज़ाइन सिस्टम बनाएँ या अपडेट करें। इसका उपयोग तब करें जब उपयोगकर्ता वेरिएबल/टोकन बनाना, कंपोनेंट लाइब्रेरी बनाना, सेट करना चाहता हो…

Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.

Figma डिज़ाइन को 1:1 दृश्य सटीकता के साथ उत्पादन-तैयार एप्लिकेशन कोड में अनुवाद करता है। Figma फ़ाइलों से UI कोड लागू करते समय, जब उपयोगकर्ता उल्लेख करता है...

**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in the Figma file context — e.g. create/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically.

**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first.…

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

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

Translates Figma designs into production-ready code with pixel-perfect visual fidelity. Requires Figma MCP server connection and a Figma URL with file key and node ID to extract design context, screenshots, and assets Seven-step structured workflow: parse URL, fetch design context, capture visual reference, download assets, translate to project conventions, achieve 1:1 parity, and validate against Figma Prioritizes design system reuse over duplication; maps Figma tokens to project design...