Figma MCP: ربط Figma بـ Claude Code ووكلاء البرمجة بالذكاء الاصطناعي
ما الذي يفعله Figma MCP فعلاً، وكيف تثبّته في عشر دقائق، وسير العمل الخمسة التي يفتحها، وأين لا يزال يتعثر.
التقاط لقطة شاشة لإطار Figma ولصقها في Claude Code هو طريقك للحصول على انطباعات. توصيل Figma MCP هو طريقك للحصول على مكونات تطابق نظام التصميم لديك حتى على مستوى الرمز.
الفجوة بين هذين الأسلوبين لا تتجاوز خمس دقائق من الإعداد. معظم المصممين لم يفعلوا ذلك لأن كل درس تعليمي يجعله يبدو تقنياً. لكنه ليس كذلك. أمر واحد فقط وتفعيل خيار واحد داخل Figma. هذا كل شيء.
بمجرد الاتصال، يتوقف وكيل الذكاء الاصطناعي عن تخمين ما يعنيه "فجوة 20px" ويبدأ في قراءة رمز التباعد الفعلي الذي حددته. يتوقف عن اختراع الألوان ويبدأ في سحبها من لوحتك الحقيقية. يتوقف عن تقريب الزر Button الخاص بك ويبدأ في استدعاء الزر الذي بنيته بالفعل. هذا لا يعمل إلا إذا كان نظام التصميم على الطرف الآخر حقيقياً.
MCP مترجم، لا عصا سحرية
MCP اختصار لـ Model Context Protocol. أطلقته Anthropic في أواخر 2024. أصدرت Figma خادماً رسمياً له في 2025. كل أداة ذكاء اصطناعي تستحق الاستخدام في 2026 تدعمه.
فكر في MCP كمنفذ USB لوكلاء الذكاء الاصطناعي. قبل MCP، كانت كل أداة تريد التحدث مع نموذج ذكاء اصطناعي تحتاج إلى بناء تكامل مخصص. بعد MCP، تتحدث الأدوات البروتوكول فحسب ويستطيع أي وكيل يفهم MCP قراءتها. Figma، GitHub، Slack، Linear، نظام الملفات لديك، قواعد البيانات، أياً كان. بروتوكول واحد، موحد، قابل لإعادة الاستخدام.
ما يفعله خادم MCP الخاص بـ Figma تحديداً: يكشف البيانات الهيكلية داخل ملفات Figma لأي وكيل ذكاء اصطناعي تربطه. معرفات الإطارات، أسماء الطبقات، المكونات المتداخلة، قيم التباعد، متغيرات الألوان، أنماط الخط، إعدادات auto-layout، كل ذلك. يقرأ الذكاء الاصطناعي ما يحتويه ملفك فعلاً، لا ما يبدو عليه ملف JPEG من ملفك.
MCP ليس سحراً. إنه كابل. يجب أن يكون العمل جيداً على كلا الطرفين.
ما يكشفه خادم MCP الخاص بـ Figma فعلاً
يمنح الخادم وكلاء الذكاء الاصطناعي صلاحية القراءة لمجموعة محددة من بيانات Figma الخاصة بك. معرفة ما يمكنه وما لا يمكنه رؤيته بالضبط مهمة لكل من النتائج والأمان.
| ما يستطيع الذكاء الاصطناعي قراءته | لماذا يهم ذلك |
|---|---|
| هيكل الإطار (المعرفات، الأسماء، التسلسل الهرمي) | يعرف الوكيل ما يستهدفه |
| إعدادات auto-layout (الاتجاه، الفجوة، الحشو) | يُترجم التباعد بدقة |
| مراجع المتغيرات (رموز الألوان، رموز التباعد، الخط) | يطابق الناتج نظامك |
| نسخ المكونات وتجاوزاتها | يستدعي الوكيل المكونات الموجودة |
| أنماط النص ومحتواه | يصل النص إلى المكان الصحيح |
| تعبئات الصور (روابط URL فقط، لا بيانات البكسل افتراضياً) | مراجع الصور نظيفة |
ما لا يستطيع قراءته: الملفات الخاصة التي لم تأذن بها، مكتبات الفريق الأخرى غير المرتبطة بهذا الملف، التعليقات، سجل الإصدارات، أو أي شيء خارج الملف المحدد الذي تشير إليه.
هذا النطاق مهم لأنه يعني أن ذكاءً اصطناعياً سيء التدريب لا يستطيع التجول في مساحة عمل Figma الخاصة بك. يقرأ ما تعطيه إياه، لا أكثر.
تثبيته في Claude Code (خمس دقائق)
إذا كان لديك Claude Code يعمل بالفعل (إذا لم يكن كذلك، راجع Claude Code للمصممين)، فإن MCP على بُعد تعديل إعداد واحد.
الخطوة 1: في تطبيق Figma سطح المكتب، انتقل إلى Preferences، وفعّل "Enable local MCP server" ضمن إعدادات Dev Mode. ستبدأ Figma خادماً على جهازك عند المنفذ الافتراضي.
الخطوة 2: في الطرفية، نفّذ:
claude mcp add figma http://127.0.0.1:3845/mcp --transport http
هذا الأمر الواحد يسجّل خادم MCP المحلي الخاص بـ Figma مع Claude Code. لا تعديل على JSON، لا بحث في ملفات الإعداد.
الخطوة 3: أعد تشغيل Claude Code. في جلستك التالية، سيرى Claude Code تلقائياً أن Figma متاحة.
تحقق بـ: /mcp داخل جلسة Claude Code. يجب أن ترى Figma مدرجة.
لاستخدامه، الصق رابط Figma URL في موجه الأوامر. يحل Claude Code الإطار عبر MCP، لا عبر لقطة شاشة، ويعمل مع الهيكل الفعلي.
تثبيته في Cursor (أيضاً خمس دقائق)
بالنسبة لمستخدمي Cursor، التدفق مختلف قليلاً لكن الفكرة نفسها.
الخطوة 1: نفس ما سبق. فعّل خادم MCP المحلي الخاص بـ Figma في تطبيق Figma سطح المكتب.
الخطوة 2: في Cursor، افتح Settings، انتقل إلى قسم MCP، اضغط "Add MCP Server." الصق:
Name: figma
URL: http://127.0.0.1:3845/mcp
Transport: HTTP
الخطوة 3: احفظ وأعد تشغيل Cursor. ستظهر Figma كمصدر بيانات متاح في لوحة الوكيل.
يتعامل Cursor مع MCP بشكل أكثر بصرية من Claude Code قليلاً، مع خيار تبديل قائم على واجهة المستخدم لكل خادم. من الناحية الوظيفية، التجربتان متطابقتان: تلصق رابط Figma URL، يقرأ الوكيل الإطار الفعلي، يطابق الناتج نظامك.
سير العمل الخمسة التي يفتحها
التصميم إلى كود بدقة عالية. تلصق رابط إطار Figma URL. يسحب Claude Code هيكل الطبقة، قيم auto-layout، ارتباطات المتغيرات، نسخ المكونات. يستخدم مكوّن React المولّد الزر Button الفعلي، والبطاقة Card الفعلية، ورموز التباعد الفعلية. لا تقريبات، لا فئات مخترعة. هذا هو سير العمل الرئيسي وهو يستحق التثبيت خلال خمس دقائق بمفرده.
التحقق من Code Connect. إذا كنت تستخدم بالفعل ميزة Code Connect في Figma (التي تربط مكونات Figma بمكونات الكود الخاصة بك)، فإن MCP يتيح للوكيل التحقق من الربط عند توليد الكود. لن يبني مكوناً جديداً يكرر مكوناً سجّله Code Connect بالفعل. اختراعات عرضية أقل.
فحص مزامنة المتغيرات. لنقل أنك أعدت تسمية رمز لون الأسبوع الماضي. اسأل Claude Code: "اقرأ الإطار في رابط Figma URL هذا وأدرج أي مراجع متغيرات لا تتطابق مع ملف الرموز الحالي لدينا." سيُشير إلى الانحراف في مرور واحد. كان هذا يستغرق 45 دقيقة من جلسة Loom مع مطور.
الرجوع إلى لقطة الشاشة للمكونات. إذا لم يستطع MCP قراءة الملف (ملك العميل، غير مشارك، أو ليس إطار auto-layout)، يرجع الوكيل إلى تحليل الصور. يمكنك الجمع: MCP لعملك الخاص، لقطات الشاشة للمراجع الفردية للعملاء. نفس الموجه، كلاهما يعمل.
ضمان جودة التصميم. الاتجاه المعكوس. اسأل Claude Code مقارنة لقطة شاشة صفحة منشورة بإطار Figma: "هذا رابط صفحة الإنتاج. هذا رابط Figma URL الذي يجب أن يطابقه. أدرج الاختلافات البصرية." يرصد هذا مشكلة "المصمم وافق لكن المطور أرسل حشواً خاطئاً" قبل أن تصل إلى الإنتاج.
| سير العمل | بدون MCP | مع MCP |
|---|---|---|
| التصميم إلى كود | قائم على الانطباعات، يتطلب تصحيحاً يدوياً | دقيق بالرموز، قابل للاستخدام في المرور الأول |
| Code Connect | خطوة يدوية منفصلة | تحقق تلقائي |
| انحراف المتغيرات | تدقيق يدوي، ساعات | سطر واحد، دقائق |
| الرجوع إلى لقطة الشاشة | الخيار الوحيد المتاح | بديل عند عدم توفر MCP |
| ضمان جودة التصميم | مقارنة يدوية | تقرير فروق في ثوانٍ |
إذا أردت مزيداً من تفصيلات سير عمل الذكاء الاصطناعي، تصفح بقية أوراق Brainy. إذا أردت ربط MCP بخط أنابيب التصميم إلى كود الكامل لفريقك، وظّف Brainy.
الأمان: ما تراه Figma وما يراه ذكاؤك الاصطناعي
سؤالان منفصلان، كلاهما يستحق الفهم.
ما تراه Figma. يعمل خادم MCP محلياً على جهازك، لا على خوادم Figma. تُلاحظ Figma أنك فعّلت MCP وأي ملفات يجري الوصول إليها، لأن المصادقة تتدفق عبر جلسة Figma الخاصة بك. بالنسبة لحسابات المؤسسات، يمكن للمسؤولين تعطيل MCP المحلي على مستوى المؤسسة.
ما يراه وكيل الذكاء الاصطناعي. أياً كان رابط ملف Figma URL الذي تلصقه. لا يحصل الوكيل على صلاحية تصفح مساحة عمل Figma الكاملة. لا يرى مكتبات الفريق الأخرى ما لم تشر إليها تحديداً. لا يرى التعليقات، سجل الإصدارات، أو الملفات غير ذات الصلة. كل موجه محدود بما تعطيه إياه.
ما يغادر جهازك. إذا كنت تستخدم Claude Code مع واجهة برمجة تطبيقات Anthropic، تُرسل بيانات الإطار التي تطلبها إلى Anthropic كجزء من سياق الموجه. هذا مهم إذا كان ملف Figma الخاص بك يحتوي على عمل عميل سري أو تصاميم منتج لم تُطلق بعد. اقرأ سياسة الذكاء الاصطناعي لفريقك قبل ربط MCP بالملفات الحساسة.
لمعظم أعمال التصميم، هذا مقبول. للصناعات الخاضعة للتنظيم أو اتفاقيات عدم الإفصاح ذات بنود البيانات الصارمة، تحقق أولاً.
أين لا يزال Figma MCP يقصر
لنكن صادقين. هذا Figma MCP في أبريل 2026، لا إصدار مصقول من المستقبل.
معالجة أصول الصور محدودة. يعطي MCP الوكيل روابط URL لتعبئة الصور، لا بيانات البكسل الفعلية. بالنسبة للتخطيطات التي تقوم فيها الصورة بعمل تركيبي ثقيل، لا يزال الوكيل يحتاج إلى التخمين.
النماذج الأولية والتفاعلات لا تُترجم. يكشف MCP الهيكل الثابت. إذا كان ملف Figma لديك يحتوي على اتصالات النماذج الأولية، حالات التمرير، smart animate، أو تبديل الأشكال المتغيرة، لا يرى الوكيل أياً من ذلك. لا تزال تكتب منطق الرسوم المتحركة يدوياً.
المكونات الإضافية غير قابلة للقراءة. إذا ولّد مكوّن Figma إضافي محتوى في ملفك (مخططات، أيقونات، تصورات بيانات)، يرى الوكيل الناتج كطبقة ثابتة. لا يستطيع إعادة توليد منطق المكوّن الإضافي.
يتراجع الأداء مع الملفات الضخمة. الملف الذي يحتوي على أكثر من 500 إطار يستغرق وقتاً أطول للحل من الملف الذي يحتوي على 20 إطاراً. اعمل في صفحات محددة النطاق، لا ملف وحش واحد، للحصول على أفضل النتائج.
افتراضات auto-layout مهمة. ينتج الوكيل أنظف ناتج عندما تستخدم إطارات Figma الخاصة بك auto-layout بشكل صحيح. التخطيطات الحرة ذات الموضع المطلق تُترجم بشكل سيئ. هذه مشكلة انضباط Figma، لا مشكلة MCP، لكنها تظهر بشكل أوضح هنا.
لا شيء من هذا يمنع الصفقة. كلها أسباب لإقران MCP بـ هندسة الموجهات الجيدة، لا الثقة العمياء.
الأسئلة الشائعة
هل Figma MCP مجاني الاستخدام؟
نعم. خادم MCP مدمج في Figma سطح المكتب بدون تكلفة إضافية. أنت تدفع مقابل Figma وتدفع مقابل أداة الذكاء الاصطناعي (Claude، Cursor، إلخ). الاتصال نفسه مجاني.
هل يعمل Figma MCP على إصدار الويب؟
خادم MCP المحلي ميزة في Figma سطح المكتب. مستخدمو الويب فقط لا يصلون إليه بعد. لأعمال التصميم إلى كود الجادة، سطح المكتب هو الإعداد الأفضل على أي حال.
هل يمكنني استخدام MCP مع أدوات ذكاء اصطناعي متعددة في آن واحد؟
نعم. يمكن لوكلاء متعددين قراءة نفس خادم MCP المحلي. يمكن لـ Claude Code، Cursor، Claude Desktop، وأي عميل آخر يفهم MCP الاتصال في وقت واحد.
ماذا يحدث إذا بدّلت ملفات Figma خلال جلسة؟
يحل الوكيل الإطار عند الرابط الذي تعطيه. تبديل الروابط يبدّل السياقات. يمكنك الرجوع إلى ملفات متعددة في محادثة واحدة دون إعادة تشغيل أي شيء.
هل يحل MCP محل Figma Dev Mode؟
لا. Dev Mode هو أداة الفحص الموجهة للإنسان. MCP هو طبقة البيانات الموجهة للوكيل. إنهما متكاملان. في الواقع، نفس البيانات التي يعرضها Dev Mode هي ما يكشفه MCP للوكيل.
توقف عن التقاط لقطات شاشة من Figma
لكل فريق تصميم عادة سيئة مشتركة: التقاط لقطة شاشة لإطار Figma، لصقها في ChatGPT أو Claude، والطلب بالكود. الناتج دائماً انطباعات، لا رموز. ثم تقضي ساعة في تصحيح الانطباعات يدوياً.
خمس دقائق من التثبيت وذلك سير العمل ميت. يقرأ الوكيل الإطار الفعلي. التباعد حقيقي. المكونات هي المكونات الحقيقية. الرموز هي الرموز الحقيقية. يخرج الكود في المرة الأولى أقرب للشحن.
فعّل MCP في Figma. ثبّت الرابط في أداة الذكاء الاصطناعي. الصق روابط URL، لا لقطات شاشة.
الفرق في جودة الناتج بين "قبل MCP" و"بعد MCP" ليس خفياً. إنه أعلى عائد استثمار لكل دقيقة تثبيت في صندوق أدوات المصمم الحديث.
توقف عن التقاط لقطات شاشة من Figma.
Want Figma MCP wired into your team's workflow without the setup headaches? Brainy installs it end-to-end.
Get Started
