اضبط خادم Figma MCP في Claude Code عبر الإضافة أو بأمر يدوي واحد، وأكمل المصادقة بنقرتين، وتعرّف على أدوات القراءة والكتابة التي يوفّرها. يشمل المهارات الخمس وCode Connect وحدود المعدل حسب المقعد وحلولًا لأكثر الأعطال شيوعًا.
الصق رابط Figma في Claude Code، وسيتمكن من قراءة تخطيط الإطار والمسافات والألوان والمكوّنات قبل أن يكتب سطرًا واحدًا من الشيفرة. هذا هو جوهر ما يقدّمه خادم Figma MCP، ولا يستغرق الإعداد سوى أمرين ونقرة واحدة في المتصفح. أما الباقي فيتعلق باختيار الأدوات المناسبة، والبقاء ضمن حدود المعدل، وتزويد الوكيل بسياق كافٍ حتى يتوقف عن اختراع أزراره الخاصة.
يستعرض هذا المقال خطوات الإعداد بدقة، والأدوات التي يوفّرها الخادم، والمهارات التي تقدّمها Figma لسير عمل الكتابة، وروتينًا جاهزًا للنسخ من الإطار إلى الشيفرة، والحدود التي يتعثر فيها الناس عادةً. المعلومات مستندة إلى وثائق Figma للمطوّرين كما هي في أكتوبر 2026، فراجع تلك الصفحات إذا بدا لك أمر ما مختلفًا على جهازك.
خادم Figma MCP جسر بين طرفين. في أحد الطرفين ملف Figma الخاص بك، بطبقاته ومتغيّراته ومكوّناته ولوحات FigJam وموارد Make. وفي الطرف الآخر عميل MCP، وهنا Claude Code. وبينهما مجموعة من الأدوات تتيح للوكيل طرح أسئلة حول التصميم، وتغييره بالصلاحيات المناسبة.
تصف وثائق Figma خمس مهام. يستطيع الخادم أن ينشئ المحتوى الأصلي في Figma ويعدّله على اللوحة، ويحوّل الإطارات المحددة إلى شيفرة، ويستخرج سياق التصميم مثل المتغيرات والمكوّنات وبيانات التخطيط، ويسترجع الموارد من ملفات Make، ويُبقي الشيفرة متوافقة مع نظام التصميم عبر Code Connect.
التغيير الحقيقي يكمن في الانتقال من لقطات الشاشة إلى البنية. لقطة الشاشة تُخبر النموذج بشكل الزر، أما سياق التصميم فيُخبره بأن الزر نسخة من مكوّن، ويستخدم متغيّر مسافات مسمّى، ويقع داخل صف بتخطيط تلقائي بفجوة ثابتة. الشيفرة المكتوبة من هذه البنية تكون أقرب كثيرًا إلى ما يمكن دمجه.
توفّر Figma نسختين من الخادم، والاختيار بينهما مهم لأن بعض الأدوات متاحة في إحداهما فقط.
| الخادم البعيد | الخادم المحلي | |
|---|---|---|
| الاتصال | نقطة النهاية المستضافة لدى Figma، https://mcp.figma.com/mcp | محلي، عبر تطبيق Figma لسطح المكتب |
| يتطلب تطبيق سطح المكتب | لا | نعم |
| مجموعة الأدوات | الأوسع، وتشمل جميع الأدوات الخاصة بالخادم البعيد | مجموعة أصغر |
| الاستخدام الأنسب | معظم المستخدمين | نشرات Figma for Government، والإعدادات المحلية فقط |
تصف Figma الخادم البعيد بأنه الخيار الأفضل لمعظم المستخدمين، وهذا ما يعتمده بقية هذا المقال.
تحتاج إلى ملف Figma Design أو Make أو FigJam، وصلاحية عرض أو تعديل عليه، ويُفضّل أن تملك مقعد Full أو Dev. أنواع المقاعد الأخرى تستطيع الاتصال أيضًا، لكن بحصة شهرية أقل بكثير (الأرقام في قسم الحدود أدناه). ولا يمكن الاتصال إلا بعملاء MCP المدرجين في كتالوج MCP لدى Figma، أما Claude Code فله صفحة إعداد خاصة به هناك.
هناك طريقان ينتهيان إلى المكان نفسه. اختر الإضافة إذا أردت أيضًا مهارات Figma، واختر الأمر اليدوي إذا كنت تفضّل إعدادًا بسيطًا.
claude plugin install figma@claude-plugins-official
توصي Figma بهذا المسار. تجمع الإضافة إعدادات خادم MCP ومهارات الوكيل لسير العمل الشائع، فتحصل بتثبيت واحد على الخادم والتعليمات التي تجعل أدوات الكتابة تعمل بشكل صحيح.
claude mcp add --transport http figma https://mcp.figma.com/mcp
بدون علامة النطاق، يُسجَّل الخادم للمشروع الذي تعمل فيه حاليًا فقط. إذا أردت توفّره في كل مكان، فأضف --scope user:
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp
يعني نطاق المستخدم أنك لن تكرر التثبيت لكل مستودع.
يعتمد الخادم على تسجيل الدخول عبر المتصفح، لذلك لا يُلصق أي شيء في ملف إعدادات.
/mcp.Authentication successful. Connected to figma.نفّذ /mcp مرة أخرى للتأكد من ظهور الخادم متصلًا. ثم اطلب من Claude استدعاء أداة whoami. ستعيد الأداة المستخدم المصادَق عليه والخطط، وهذا يُخبرك فورًا ما إذا كان مقعدك يملك حصة قابلة للاستخدام.
💡 نصيحة: إذا اختفت الأدوات أثناء الجلسة، فإن
/mcpهو أول مكان يجب النظر فيه. يعرض حالة الاتصال ويتيح لك إعادة المصادقة دون تعديل الملفات.
تسرد صفحة مرجع أدوات Figma عشرات الأدوات. ستستخدم عددًا محدودًا منها يوميًا، فابدأ بها وتجاهل البقية حتى تحتاج إليها مهمة ما.
| الأداة | وظيفتها | للخادم البعيد فقط |
|---|---|---|
get_design_context | يستخرج سياق التصميم لطبقة أو تحديد | لا |
get_metadata | يعيد مخططًا نصيًا بسيطًا بصيغة XML للتحديد | لا |
get_screenshot | يلتقط لقطة شاشة للتحديد | لا |
get_variable_defs | يسترجع المتغيرات والأنماط المستخدمة في التحديد | لا |
get_code_connect_map | يعيد ربط معرّف العقدة بمكوّن الشيفرة المقابل له | لا |
get_code_connect_suggestions | يقترح ربط المكوّنات بالشيفرة | لا |
get_context_for_code_connect | يوفّر بيانات وصفية للمكوّنات الخاصة بالقوالب | نعم |
search_design_system | يبحث في المكتبات عن المكوّنات والمتغيرات والأنماط | نعم |
get_libraries | يسرد مكتبات التصميم المشترَك بها والمتاحة | نعم |
get_figjam | يحوّل مخططات FigJam إلى XML | لا |
get_motion_context | يستخرج بيانات الرسوم المتحركة | لا |
download_assets | ينزّل الصادرات وصور المصدر الأصلية | نعم |
ابدأ بالأداة get_design_context. فهو المحرك الأساسي وراء عبارة "ابنِ هذا الإطار". وأقرنه مع get_screenshot ليحصل الوكيل على هدف بصري، ومع get_variable_defs لتأتي الألوان والمسافات من رموز التصميم الخاصة بك بدلًا من قيم سداسية عشرية مُخمّنة. وعندما يكون الإطار ضخمًا، يقدّم get_metadata مخططًا مبسطًا يمكنك من خلاله رسم خريطة للصفحة قبل سحب التفاصيل طبقة تلو الأخرى.
| الأداة | وظيفتها | للخادم البعيد فقط |
|---|---|---|
use_figma | أداة عامة للإنشاء والتعديل والفحص | نعم |
generate_figma_design | يولّد طبقات تصميم من الواجهات | نعم |
generate_diagram | ينشئ مخطط FigJam من Mermaid | نعم |
create_new_file | ينشئ ملف Design أو FigJam أو Slides فارغًا | نعم |
generate_image | يولّد صورة نقطية قابلة للتنزيل | نعم |
upload_assets | يرفع الصور إلى ملف Figma | نعم |
add_code_connect_map | يربط معرّف عقدة Figma بمكوّن شيفرة | لا |
send_code_connect_mappings | يؤكد اقتراحات ربط المكوّنات | لا |
يوفّر الخادم أيضًا أدوات للمظللات (shaders) والإضافات التوليدية، إضافة إلى ستّ أدوات weave_* تشغّل سير عمل Weave القائم على النقاط. ولن تحتاج معظم أعمال الواجهات الأمامية إليها. وهناك أمر نصي واحد يستحق أن تعرفه باسمه: create_design_system_rules، الذي يولّد ملف قواعد يجعل سياق الوكيل متوافقًا مع قاعدة الشيفرة لديك.
أدوات الكتابة قوية وسهلة سوء الاستخدام. تسرد وثائق Figma مهارات يحتاجها الوكيل لسير العمل المقابل، وتأتي هذه المهارات مع تثبيت الإضافة. وإذا اخترت المسار اليدوي، فثبّت مهارات Figma لعميلك بشكل منفصل.
| المهارة | تُستخدم في |
|---|---|
figma-use | سير عمل تصميم Figma |
figma-use-figjam | عمليات FigJam |
figma-use-slides | Figma Slides |
figma-shaders | إنشاء المظللات وتحديثها |
figma-generative-plugins | إنشاء الإضافات التوليدية وتحديثها |
إذا كان عملك يقوم في معظمه على قراءة التصاميم وكتابة الشيفرة، فلن تلاحظها كثيرًا. تظهر أهميتها عندما تطلب من Claude Code بناء شيء ما أو تعديله داخل Figma.
حتى مع الأدوات المثالية، لا يعرف الوكيل أعرافك. شغّل الأمر النصي create_design_system_rules ودعه يصيغ ملف قواعد، ثم اقتصر منه على ما يفرضه فريقك فعليًا، واحفظه في CLAUDE.md. إليك مثال قصير:
Figma to code rules:
- Reuse components from src/components/ui before creating new ones.
- Map Figma variables to our CSS tokens. Never hardcode hex values.
- Use the project spacing scale, not the pixel values from the frame.
- Treat Figma output as a reference. Match our file structure and naming.
أربعة أسطر كهذه تزيل معظم شكاوى "لماذا كتب زرًا جديدًا مرة أخرى؟".
get_design_context، وغالبًا get_screenshot وget_variable_defs أيضًا.تعليمة تعمل جيدًا:
Implement this frame using our existing components and tokens.
Do not add new dependencies. Figma link: <paste link here>
بعد المحاولة الأولى، تحقّق من أربعة أمور في الفروق قبل تشغيل أي شيء:
💡 نصيحة: اعمل على قسم واحد في كل مرة. الإطار الذي يمثّل صفحة كاملة ينتج كمًّا هائلًا من السياق ومن الكود، وحصتك من استدعاءات القراءة تنفد أسرع مما تتوقع.
Code Connect هي الطريقة التي يعرف بها Figma أن مكوّن Button الخاص به هو فعلًا src/components/ui/Button.tsx. بعد أن يوجد هذا التعيين، يستورد Claude المكوّن الحقيقي بدلًا من كتابة ترميز جديد من الصفر.
تتعامل أربع أدوات مع هذه الحلقة. get_code_connect_map يقرأ التعيينات الموجودة. get_code_connect_suggestions يقترح تعيينات جديدة، وsend_code_connect_mappings يؤكد التعيينات التي تقبلها، وadd_code_connect_map يكتب تعيينًا واحدًا مباشرةً. الأداة الأخيرة معفاة من حدود معدل الطلبات، وهذا مفيد عندما تربط مكتبة كاملة.
هذه الأرقام مأخوذة من صفحة حدود المعدل والوصول في Figma وقت كتابة هذا المقال. وقد تغيّرها Figma، لذا تحقّق منها في الصفحة قبل التخطيط لنشر فريق كامل.
| نوع المقعد | Starter | Professional | Organization | Enterprise |
|---|---|---|---|---|
| View, Collab | حتى 20 شهريًا | حتى 20 شهريًا | حتى 20 شهريًا | حتى 20 شهريًا |
| Dev, Full | حتى 200 يوميًا، و10 في الدقيقة | حتى 200 يوميًا، و15 في الدقيقة | حتى 600 يوميًا، و20 في الدقيقة | غير محدد في الجدول |
تنطبق الحدود على الأدوات التي تقرأ البيانات من Figma. أما add_code_connect_map وcreate_new_file وwhoami فهي معفاة.
المقاعد تحدد التجربة. يستطيع المصمم الذي يملك مقعد View أن يتصل ويتصفح، لكن سير العمل اليومي من نصيب المطوّرين الذين يملكون مقعد Full أو Dev. وإذا كان لدى فريقك شخصان فقط يملكان هذه المقاعد، فاجعلهما من يولّد الشيفرة، ودع الآخرين يراجعون طلبات الدمج.
💡 نصيحة: إذا استدعى Claude ثلاث أدوات قراءة لكل إطار، فإن 200 استدعاء يوميًا ستنفد بسرعة. اطلب قسمًا واحدًا، ودع
get_metadataيختار الطبقة المناسبة قبل سحب السياق الكامل.
الأدوات لا تظهر. نفّذ /mcp. إذا ظهر figma في القائمة دون أن يكون متصلًا، فاختره وأعد المصادقة. وإذا لم يظهر إطلاقًا، فكرر أمر التثبيت وأعد تشغيل Claude Code.
المخرجات تتجاهل مكوّناتك. هذه مشكلة في السياق لا في الأدوات. أضف ملف القواعد إلى CLAUDE.md، وأنشئ تعيينات Code Connect لأهم عشرة مكوّنات لديك، واطلب من الأمر إعادة استخدام المكوّنات الموجودة قبل كتابة مكوّنات جديدة.
تصل إلى الحد في منتصف المهمة. ضيّق النطاق، وتحقق من مقعدك باستخدام whoami، وانقل الأعمال الثقيلة إلى مقعد Full أو Dev. فمقعد View أو Collab يمنحك نحو 20 استدعاءً شهريًا، وهذا يكفي للتجربة لا لسير عمل حقيقي.
تأتي معظم إطارات Figma بمستطيلات رمادية بديلة في الأماكن التي ينبغي أن تظهر فيها الصور، وتتوارث الشيفرة المولّدة هذه الرتابة. املأها بصور تبدو حقيقية قبل التسليم، وسيبدو البناء مكتملًا من التشغيل الأول.
على PicassoIA، يضم كتالوج تحويل النص إلى صورة Seedream 5 Pro وGPT Image 2 وFlux 2 Pro وNano Banana Pro وP Image. ولّد صورة بطل، ثم أدرجها في الإطار يدويًا، أو اطلب من Claude إدراجها باستخدام upload_assets. تملك Figma أداة generate_image خاصة بها، لكن نموذج صور مخصص يمنحك تحكمًا أكبر في العدسة والإضاءة والتكوين.
أما للحركة، فحوّل الصورة الثابتة نفسها إلى مقطع قصير باستخدام نموذج فيديو مثل Seedance 2.5 Lite أو Wan 3 أو Veo 3.1 Lite أو LTX 2.5 Fast أو Kling v3 Video. تحقق من صفحة كل نموذج لمعرفة خيار إدخال الصورة لديه. وغالبًا ما تكفي صفحة الهبوط حلقة مدتها خمس ثوانٍ خلف العنوان الرئيسي.
يمكن للمنصة نفسها أن تتولى التفكير أيضًا. يعمل Claude Sonnet 5 على PicassoIA كنموذج نصي يقرأ الصور، وهذا يجعله وسيلة سريعة لصياغة ملف القواعد انطلاقًا من لقطة شاشة لنظام التصميم لديك.
low يعطّل التفكير للحصول على أسرع رد وأرخصه. استخدم medium أو high عندما يجب أن تستدل المخرجات عبر مكونات كثيرة، وxhigh أو max للأعمال المعقدة المتعددة الملفات.💡 نصيحة: يتوفر تفكير أعمق من Claude Fable 5 وClaude Opus 4.7 على المنصة نفسها.
أصبحت تملك الحلقة الكاملة. صِل الخادم، وأضف ملف قواعد، وابنِ قسمًا واحدًا في كل مرة، وارسم خريطة لمكوّناتك عبر Code Connect حتى تستمر المخرجات في التحسن.
الجزء الذي يسهل إغفاله هو الصور. فالواجهة المكتملة تحتاج إلى صور حقيقية وقليل من الحركة، ويوفّر Picasso IA النماذج للأمرين في مكان واحد. اختر نموذج صور، وصف لقطة البطل التي تريدها، وشاهد كيف تغيّر الإطار الذي بنيته للتو. ثم جرّب أحد نماذج الفيديو على الصورة نفسها، وقارن النسختين جنبًا إلى جنب. افتح PicassoIA وأنشئ صورة البطل الأولى اليوم.
اختر لغتك
