Figma MCP: ربط Figma بـ Claude Code ووكلاء البرمجة الذكية

أخذ لقطة شاشة لإطار Figma ولصقها في Claude Code هو ما تحصل منه على أجواء. توصيل Figma MCP هو ما تحصل منه على مكوّنات تطابق نظام تصميمك وصولاً إلى التوكن.

الفجوة بين هذين السيرَين هي نحو خمس دقائق من الإعداد. معظم المصممين لم يفعلوا ذلك لأن كل درس تعليمي يجعله يبدو تقنياً. هو ليس كذلك. أمر واحد وتفعيل مفتاح واحد داخل Figma. هذا كل شيء.

بمجرد أن يتصل، يتوقف وكيل الذكاء الاصطناعي عن التخمين بشأن معنى "20px gap" ويبدأ في قراءة توكن التباعد الفعلي الذي عيّنته. يتوقف عن اختراع الألوان ويبدأ في السحب من لوحتك الحقيقية. يتوقف عن تقريب Button الخاص بك ويبدأ في استدعاء الزر الذي بنيته بالفعل.

MCP مترجم، لا عصا سحرية

MCP اختصار لـ Model Context Protocol. شحنته Anthropic في أواخر 2024. أطلقت Figma خادماً رسمياً له في 2025. كل أداة ذكاء اصطناعي تستحق الاستخدام في 2026 تدعمه.

فكّر في MCP كمنفذ USB لوكلاء الذكاء الاصطناعي. قبل MCP، كل أداة أرادت التحدث مع نموذج ذكاء اصطناعي كانت بحاجة لبناء تكامل مخصص. بعد MCP، الأدوات تتحدث البروتوكول فقط وأي وكيل يدعم MCP يمكنه قراءتها. Figma، GitHub، Slack، Linear، نظام الملفات لديك، قواعد البيانات، أياً كان. بروتوكول واحد، موحّد، قابل لإعادة الاستخدام.

ما يفعله خادم MCP الخاص بـ Figma تحديداً: يكشف البيانات الهيكلية داخل ملفات Figma لأي وكيل ذكاء اصطناعي تتصل به. معرّفات الإطارات، أسماء الطبقات، المكوّنات المتداخلة، قيم التباعد، متغيرات الألوان، أنماط الطباعة، إعدادات التخطيط التلقائي، كل شيء. يقرأ الذكاء الاصطناعي ما يحتويه ملفك فعلاً، لا ما تبدو عليه صورة JPEG لملفك.

MCP ليس سحراً. إنه كابل. العمل لا يزال يجب أن يكون جيداً على كلا الطرفين.

ما الذي يكشفه خادم MCP الخاص بـ Figma فعلاً

يمنح الخادم وكلاء الذكاء الاصطناعي صلاحية قراءة مجموعة محددة من بيانات Figma. معرفة ما يمكنه وما لا يمكنه رؤيته بالضبط تهم النتائج والأمان معاً.

ما لا يمكنه قراءته: الملفات الخاصة التي لم تأذن بها، مكتبات الفريق الأخرى غير المتصلة بهذا الملف، التعليقات، سجل الإصدارات، أو أي شيء خارج الملف المحدد الذي تشير إليه.

هذا النطاق مهم لأنه يعني أن ذكاءً اصطناعياً سيء التدريب لا يمكنه التجول في مساحة عمل Figma الخاصة بك. يقرأ ما تسلّمه إليه، لا أكثر.

تثبيته في Claude Code (خمس دقائق)

إذا كان Claude Code يعمل بالفعل لديك (إن لم يكن كذلك، انظر Claude Code للمصممين)، فـ MCP على بُعد تعديل إعداد واحد.

الخطوة 1: في Figma للسطح المكتبي، اذهب إلى Preferences، وفعّل "Enable local MCP server" ضمن إعدادات Dev Mode. ستبدأ Figma بتشغيل خادم على جهازك على المنفذ الافتراضي.

الخطوة 2: في طرفيتك، افتح ملف إعدادات Claude Code:

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 في الموجّه الخاص بك. يحلّ 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، يقرأ الوكيل الإطار الحقيقي، يطابق الإخراج نظامك.

السير الخمسة التي يفتحها

التصميم إلى كود بدقة. تلصق رابط إطار Figma. يسحب Claude Code هيكل الطبقات، وقيم التخطيط التلقائي، وروابط المتغيرات، ونماذج المكوّنات. يستخدم مكوّن React المُولَّد الـ Button الحقيقي لديك، والـ Card الحقيقي، وتوكنات التباعد الحقيقية. لا تقريب، لا أصناف مخترعة. هذا هو السير الرئيسي وهو يستحق الدقائق الخمس من التثبيت بمفرده.

التحقق من Code Connect. إذا كنت تستخدم بالفعل ميزة Code Connect الخاصة بـ Figma (التي تربط مكوّنات Figma بمكوّنات الكود الخاصة بك)، تتيح MCP للوكيل التحقق من الربط عند توليد الكود. لن يبني مكوّناً جديداً يُكرّر واحداً سجّله Code Connect بالفعل. اختراعات عرضية أقل.

فحوصات مزامنة المتغيرات. قل إنك أعدت تسمية توكن لون الأسبوع الماضي. اسأل Claude Code: "اقرأ الإطار على رابط Figma هذا وأدرج أي مراجع متغيرات لا تطابق ملف التوكنات الحالي لدينا." سيُبرز الانجراف في تمريرة واحدة. كان هذا يستغرق جلسة Loom مدتها 45 دقيقة مع مطوّر.

الاحتياط بالعودة إلى لقطة الشاشة كمكوّن. إذا لم يستطع MCP قراءة الملف (مملوك للعميل، غير مشارَك، أو لا يستخدم تخطيطاً تلقائياً)، يعود الوكيل إلى تحليل الصورة. يمكنك الدمج: MCP لعملك الخاص، لقطات الشاشة لمراجع العميل العرضية. نفس الموجّه، كلاهما يعمل.

مراجعة جودة التصميم. الاتجاه المعاكس. اسأل Claude Code لمقارنة لقطة شاشة صفحة مُنشورة بإطار Figma: "هنا رابط الصفحة في الإنتاج. هنا رابط Figma الذي يجب أن تطابقه. أدرج الاختلافات البصرية." يلتقط هذا مشكلة 'المصمم وافق لكن المطوّر شحن حشواً خاطئاً' قبل أن تصل إلى الإنتاج.

إذا أردت المزيد من تفصيلات سير الذكاء الاصطناعي، تصفّح بقية Brainy Papers. إذا أردت MCP مُوصَّلاً في خط أنابيب التصميم إلى الكود الكامل لفريقك، وظّف Brainy.

الأمان: ما تراه Figma وما يراه الذكاء الاصطناعي

سؤالان منفصلان، كلاهما يستحق الفهم.

ما تراه Figma. يعمل خادم MCP محلياً على جهازك، لا على خوادم Figma. تعرف Figma أنك فعّلت MCP وأي ملفات يُصل إليها، لأن المصادقة تمر عبر جلسة Figma الخاصة بك. بالنسبة لحسابات المؤسسات، يمكن للمسؤولين تعطيل MCP المحلي على مستوى المؤسسة.

ما يراه وكيل الذكاء الاصطناعي. أياً كان رابط ملف Figma الذي تلصقه. لا يحصل الوكيل على صلاحية التصفح في مساحة عمل Figma بأكملها. لا يرى مكتبات الفريق الأخرى إلا إذا أشرت إليها تحديداً. لا يرى التعليقات، سجل الإصدارات، أو الملفات غير المرتبطة. كل موجّه محدود بما تسلّمه إليه.

ما يغادر جهازك. إذا كنت تستخدم Claude Code مع API الخاص بـ Anthropic، تُرسَل بيانات الإطار التي تطلبها إلى Anthropic كجزء من سياق الموجّه. هذا مهم إذا كان ملف Figma يحتوي على عمل عميل سري أو تصاميم منتج غير مُصدَرة. اقرأ سياسة الذكاء الاصطناعي لفريقك قبل توصيل MCP على ملفات حساسة.

بالنسبة لمعظم عمل التصميم، هذا مقبول. بالنسبة للصناعات المُنظَّمة أو اتفاقيات عدم الإفصاح ذات بنود بيانات صارمة، تحقق أولاً.

أين لا يزال Figma MCP يقصر

لنكن صادقين. هذا هو Figma MCP في أبريل 2026، لا نسخة مصقولة من المستقبل.

معالجة أصول الصور محدودة. يمنح MCP الوكيل روابط URL لتعبئة الصورة، لا بيانات البكسل الفعلية. للتخطيطات التي تؤدي فيها الصورة عملاً تركيبياً ثقيلاً، لا يزال الوكيل يجب أن يخمّن.

النماذج الأولية والتفاعلات لا تترجم. يكشف MCP الهيكل الساكن. إذا كان ملف Figma يحتوي على اتصالات نموذج أولي، حالات تمرير، رسوم متحركة ذكية، أو تبديل متغيّرات، لا يرى الوكيل شيئاً من ذلك. لا تزال تكتب منطق الرسوم المتحركة بيدك.

الإضافات غير قابلة للقراءة. إذا أنشأت إضافة Figma محتوى في ملفك (مخططات، أيقونات، تصورات بيانات)، يرى الوكيل الإخراج كطبقة ساكنة. لا يمكنه إعادة توليد منطق الإضافة.

الأداء يتدهور في الملفات الضخمة. ملف يحتوي على أكثر من 500 إطار يستغرق وقتاً أطول للحل من ملف يحتوي على 20 إطاراً. اعمل في صفحات محدودة النطاق، لا في ملف وحيد ضخم، للحصول على أفضل النتائج.

افتراضات التخطيط التلقائي تهم. ينتج الوكيل أنظف إخراجه عندما تستخدم إطارات Figma التخطيط التلقائي بشكل صحيح. التخطيطات الحرة ذات الموضع المطلق تترجم بشكل سيء. هذه مشكلة انضباط في 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. ثبّت الموصّل في أداة الذكاء الاصطناعي. الصق روابط، لا لقطات شاشة.

الفرق في جودة الإخراج بين "قبل MCP" و"بعد MCP" ليس دقيقاً. إنه أعلى عائد استثمار لكل دقيقة تثبيت في مجموعة أدوات المصمم الحديث.

توقف عن أخذ لقطات شاشة من Figma.