يربط مكونات تصميم Figma بمكونات التعليمات البرمجية باستخدام Code Connect. يُستخدم عندما يقول المستخدم "اتصال الكود"، أو "توصيل هذا المكون بالرمز"، أو "توصيل Figma بالرمز"، أو "تعيين هذا المكون"، أو "ربط المكون بالرمز"، أو "إنشاء تعيين توصيل التعليمات البرمجية"، أو "إضافة اتصال التعليمات البرمجية"، أو "ربط التصميم بالرمز"، أو يريد إنشاء تعيينات بين تصميمات Figma وتنفيذ التعليمات البرمجية. يتطلب اتصال خادم Figma MCP.
ثبّت مهارة الذكاء الاصطناعي code-connect-components بسرعة في بيئة التطوير لديك عبر سطر الأوامر
المصدر: figma/mcp-server-guide.
This skill helps you connect Figma design components to their corresponding code implementations using Figma's Code Connect feature. It analyzes the Figma design structure, searches your codebase for matching components, and establishes mappings that maintain design-code consistency.
When the user provides a Figma URL with file key and node ID, first run getmetadata to fetch the node structure and identify all Figma components.
IMPORTANT: When extracting the node ID from a Figma URL, convert the format:
يربط مكونات تصميم Figma بمكونات التعليمات البرمجية باستخدام Code Connect. يُستخدم عندما يقول المستخدم "اتصال الكود"، أو "توصيل هذا المكون بالرمز"، أو "توصيل Figma بالرمز"، أو "تعيين هذا المكون"، أو "ربط المكون بالرمز"، أو "إنشاء تعيين توصيل التعليمات البرمجية"، أو "إضافة اتصال التعليمات البرمجية"، أو "ربط التصميم بالرمز"، أو يريد إنشاء تعيينات بين تصميمات Figma وتنفيذ التعليمات البرمجية. يتطلب اتصال خادم Figma MCP. المصدر: figma/mcp-server-guide.
حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.
npx skills add https://github.com/figma/mcp-server-guide --skill code-connect-componentsيربط مكونات تصميم Figma بمكونات التعليمات البرمجية باستخدام Code Connect. يُستخدم عندما يقول المستخدم "اتصال الكود"، أو "توصيل هذا المكون بالرمز"، أو "توصيل Figma بالرمز"، أو "تعيين هذا المكون"، أو "ربط المكون بالرمز"، أو "إنشاء تعيين توصيل التعليمات البرمجية"، أو "إضافة اتصال التعليمات البرمجية"، أو "ربط التصميم بالرمز"، أو يريد إنشاء تعيينات بين تصميمات Figma وتنفيذ التعليمات البرمجية. يتطلب اتصال خادم Figma MCP. المصدر: figma/mcp-server-guide.
افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/figma/mcp-server-guide --skill code-connect-components بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
https://github.com/figma/mcp-server-guide