خادم MCP (بروتوكول السياق النموذجي) الخاص بـ Figma ينشئ اتصالاً مباشراً بين ملفات تصميم Figma وعملاء البرمجة مثل Claude Code و Cursor. بدلاً من ترجمة التصاميم يدوياً إلى كود — فحص قيم المسافات، نسخ الألوان السادسة عشرية، إعادة إنشاء هياكل المكونات — يقرأ عميل البرمجة ملف Figma مباشرة وينتج كوداً يطابق نظام التصميم الخاص بك.
اتصال MCP ثنائي الاتجاه. عملاء البرمجة يقرؤون بيانات التصميم من Figma (المكونات، المتغيرات، هيكل التخطيط). كما يمكنهم الكتابة مرة أخرى على اللوحة — دفع الحالات المبرمجة، المتغيرات المتجاوبة، والشاشات المنفذة كطبقات Figma قابلة للتحرير لمراجعة المصمم. هذا يلغي عقدة تسليم التصميم التقليدية بالكامل.
النقطة الأساسية
الإعداد يستغرق أقل من 10 دقائق، لا يكلف شيئاً (MCP مجاني خلال النسخة التجريبية)، ويحول فوراً سير عمل التصميم إلى الكود. عميل البرمجة يرى سياق نظام التصميم الخاص بك — المكونات، الألوان، رموز المسافات — وينتج كوداً يطابقها. لا مزيد من تخمين قيم المسافات أو تقريب الألوان من لقطات الشاشة. خادم MCP هو الجسر بين أدوات التصميم ومحررات الكود الذي أرادته فرق المنتجات لعقد من الزمن.
فهم بنية MCP
MCP (بروتوكول السياق النموذجي) هو معيار مفتوح أنشأته Anthropic يتيح لعملاء الذكاء الاصطناعي الاتصال بمصادر البيانات الخارجية. إنه نفس البروتوكول الذي يدعم الاتصالات بين Claude وأدوات مثل Google Drive و Slack و GitHub. خادم MCP الخاص بـ Figma يعرض ملفات التصميم الخاصة بك من خلال هذا البروتوكول، مما يجعلها قابلة للقراءة بواسطة أي عميل برمجة متوافق مع MCP.
| المكون | ما يفعله | من يوفره |
|---|---|---|
| خادم Figma MCP | يعرض بيانات التصميم عبر بروتوكول MCP | Figma (مستضاف في mcp.figma.com/mcp) |
| عميل البرمجة (العميل) | يقرأ بيانات التصميم وينتج الكود | Claude Code، Cursor، Windsurf، إلخ. |
| المصادقة | OAuth عبر حساب Figma | تسجيل دخولك في Figma |
| البيانات المعروضة | المكونات، المتغيرات، الأنماط، التخطيط | ملفات Figma الخاصة بك |
| صلاحية الكتابة | دفع الحالات المبرمجة مرة أخرى إلى اللوحة | عبر مهارة /figma-use |
الإعداد: Claude Code (5 دقائق)
الخطوة 1: افتح الطرفية الخاصة بك وانتقل إلى دليل مشروعك.
الخطوة 2: ابدأ Claude Code مع خادم MCP المكون. أضف خادم Figma MCP إلى إعدادات Claude Code (عادة في ~/.claude/mcp_servers.json أو .mcp.json الخاص بمشروعك):
الخطوة 3: عندما يتصل Claude Code لأول مرة بخادم Figma MCP، ستتم مطالبتك بالمصادقة عبر OAuth — سجل الدخول بحساب Figma الخاص بك. هذا يمنح صلاحية القراءة لملفات التصميم الخاصة بك.
الخطوة 4: اختبر الاتصال بطلب من Claude Code وصف ملف Figma: "اقرأ ملف Figma في [الصق رابط ملف Figma] وصف هيكل مكوناته." إذا أرجع أسماء المكونات والمتغيرات ومعلومات التخطيط، فإن الاتصال يعمل.
الإعداد: Cursor (5 دقائق)
الخطوة 1: افتح إعدادات Cursor ← خوادم MCP.
الخطوة 2: أضف خادم MCP جديد بالرابط: https://mcp.figma.com/mcp
الخطوة 3: صادق عبر OAuth عند المطالبة — نفس تسجيل دخول Figma كما هو مذكور أعلاه.
الخطوة 4: في دردشة الذكاء الاصطناعي في Cursor، أشر إلى ملف Figma الخاص بك: "اقرأ التصميم في [رابط Figma] وأنتج مكون React لقسم الرأس باستخدام Tailwind CSS." يقرأ Cursor سياق التصميم وينتج كوداً متطابقاً.
📬 هل تحصل على قيمة من هذا؟
رؤية واحدة قابلة للتنفيذ حول الذكاء الاصطناعي أسبوعياً. بالإضافة إلى حزمة مطالبات مجانية عند الاشتراك.
اشترك مجاناً ←ما هي البيانات التي يعرضها خادم MCP
فهم ما يمكن لعميل البرمجة "رؤيته" يساعدك على كتابة مطالبات أفضل وتنظيم ملفات Figma الخاصة بك لقابلية قراءة MCP:
| نوع البيانات | ما يتم عرضه | كيف يستخدمها عملاء البرمجة |
|---|---|---|
| المكونات | الاسم، الخصائص، المتغيرات، المثيلات | يربطها بمكتبات مكونات الكود |
| متغيرات الألوان | الاسم، القيمة السادسة عشرية، المجموعات | يربطها بمتغيرات CSS أو إعدادات Tailwind |
| أنماط النص | الخط، الحجم، الوزن، ارتفاع السطر | يربطها بفئات الطباعة |
| المسافات | قيم الحشو، الفجوة، الهامش | يربطها برموز المسافات |
| التخطيط | اتجاه التخطيط التلقائي، المحاذاة، التفاف | يربطها بخصائص flexbox/grid |
| هرمية الطبقات | علاقات الوالد-الطفل | يربطها بهيكل DOM |
الأثر العملي: كلما كانت أسماؤك في Figma أفضل، كان فهم عميل البرمجة لها أفضل. "Button/Primary/Large" يربط بوضوح بمكون كود. "Frame 147" لا يخبر العميل بأي شيء مفيد. هذا هو نفس المبدأ للتحضير لـ عميل التصميم — أنظمة التصميم المنظمة جيداً تنتج مخرجات ذكاء اصطناعي أفضل بغض النظر عما إذا كان الذكاء الاصطناعي يصمم أو يبرمج.
سير العمل ثنائي الاتجاه في الممارسة
القوة الحقيقية لـ MCP ليست فقط القراءة من Figma — إنها قدرة الكتابة المرتدة التي تكمل الحلقة. عندما ينفذ المطور حالات حدية لم يحددها المصمم (حالات الخطأ، حالات التحميل، الحالات الفارغة، نقاط التوقف المتجاوبة)، يمكن دفع تلك التنفيذات مرة أخرى إلى لوحة Figma كإطارات قابلة للتحرير. يراجع المصمم الحالات المبرمجة الفعلية دون التبديل إلى معاينة الكود.
سير العمل هذا يلغي المصدر الأكثر شيوعاً لاحتكاك التصميم والتطوير: الفجوة بين "ما تم تصميمه" و"ما تم بناؤه." مع MCP، كلا الجانبين يعملان من نفس مصدر الحقيقة، والتغييرات تنتشر ثنائية الاتجاه. سير العمل المفصل خطوة بخطوة موجود في دليل Figma + Claude Code الخاص بنا.
للحصول على مطالبات أفضل عند استخدام عملاء متصلين بـ MCP — سواء لقراءة التصاميم أو إنتاج الكود — محسن المطالبات المجاني يضيف الهيكل الذي ينتج مخرجات أكثر دقة. للتحسين بنقرة واحدة داخل ChatGPT و Claude و Gemini، TresPrompt يجلبه مباشرة إلى الشريط الجانبي.
الأسئلة الشائعة
هل خادم MCP مجاني؟
نعم — خادم MCP مجاني خلال فترة النسخة التجريبية. لا يتم استهلاك أرصدة ذكاء اصطناعي لاتصالات MCP. لم تعلن Figma عن أسعار MCP بعد النسخة التجريبية، لكن تكاليف البنية التحتية للخادم ضئيلة (إنها صلاحية قراءة، وليس حوسبة)، لذلك من المحتمل أن تبقى مجانية أو منخفضة التكلفة جداً.
هل يعمل MCP مع أدوات أخرى غير Claude Code و Cursor؟
نعم — أي عميل متوافق مع MCP يمكنه الاتصال. هذا يشمل Windsurf و Cline وأدوات أخرى تدعم بروتوكول MCP. رابط الخادم (https://mcp.figma.com/mcp) هو نفسه بغض النظر عن أي عميل يتصل.
هل يمكن لـ MCP قراءة أي ملف Figma لدي صلاحية الوصول إليه؟
نعم — MCP يرث أذونات حساب Figma الخاص بك. إذا كان بإمكانك عرض ملف في Figma، فيمكن لـ MCP قراءته. إذا لم يكن لديك صلاحية وصول، فلا يمكن لـ MCP قراءته. هذا يعني أن ملفات الفريق والملفات المشتركة وملفاتك الشخصية كلها قابلة للوصول عبر MCP.
هل هناك خطر من تعديل عميل البرمجة لملف Figma الخاص بي؟
قدرة الكتابة المرتدة اختيارية وتستخدم مهارة محددة (/figma-use). العميل لن يعدل ملفك إلا إذا تم توجيهه صراحة لدفع الحالات المبرمجة مرة أخرى إلى اللوحة. صلاحية القراءة افتراضية؛ صلاحية الكتابة تتطلب استدعاء متعمد. حتى مع صلاحية الكتابة، العميل ينشئ إطارات جديدة بدلاً من تعديل الموجودة، لذلك تصاميمك الأصلية محفوظة.
هل يجب أن أقوم بإعداد MCP حتى لو كنت لا أبرمج؟
إذا كنت مصمماً لا يبرمج، فإن MCP له قيمة مباشرة محدودة — إنه في المقام الأول لعملاء البرمجة الذين يقرؤون تصاميمك. ومع ذلك، فهم كيف يعمل MCP يساعدك على التعاون بشكل أكثر فعالية مع المطورين الذين يستخدمونه. يمكنك أيضاً التجريب بربط Claude.ai بملفات Figma الخاصة بك لتحليل التصميم والبحث وإنتاج الوثائق (حتى دون كتابة كود).
إفصاح: بعض الروابط في هذا المقال هي روابط تابعة. نحن نوصي فقط بالأدوات التي اختبرناها شخصياً ونستخدمها بانتظام. راجع سياسة الإفصاح الكاملة الخاصة بنا.