Figma to code: راجع واجهات Claude Code وأعدها إلى تطبيقك

ما الذي ينقله Claude Code إلى Figma؟

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

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

MCP، اختصارًا لـ Model Context Protocol، هو بروتوكول الربط الذي يتيح لـ Claude Code استخدام أدوات Figma. وتُسمّى أداة الالتقاط generate_figma_design. ويمكنها إرسال الطبقات إلى ملف Figma Design جديد، أو ملف Design موجود، أو الحافظة. تُحفَظ الملفات الجديدة الناتجة عن الالتقاط في مسودات فريقك أو مؤسستك، أما المحتوى المرسل إلى الحافظة فيمكن لصقه على لوحة التصميم. يشرح مرجع أدوات Figma هذه الوجهات.

ربط Claude Code بـ Figma: إعداد لمرة واحدة

استخدم الخادم البعيد لهذا المسار. فهو يتصل بالعنوان https://mcp.figma.com/mcp ويعمل دون تطبيق Figma لسطح المكتب. توثّق Figma طريقتين للإعداد: الإضافة، وهي الخيار المفضّل لديها، والإعداد اليدوي. اختر إحداهما. إعداد الخادم البعيد.

الخيار المفضّل: تثبيت إضافة Figma لـ Claude Code

بعد تثبيت Claude Code، شغّل الأمر التالي في الطرفية:

claude plugin install figma@claude-plugins-official

ثم اتبع خطوات منح الإذن التي توثّقها Figma:

1. أعد تشغيل Claude Code إذا كان يعمل.
2. أدخل /plugin، وافتح المثبّتة (Installed)، واختر figma، ثم ابدأ عملية منح الإذن.
3. انتقل إلى المتصفح واختر السماح بالوصول (Allow access) لحسابك في Figma.
4. عد إلى /plugin وتحقّق من ظهور Figma بحالة متصلة ضمن المثبّتة (Installed).

تتضمن الإضافة إعدادات MCP والمهارات، وهي تعليمات قابلة لإعادة الاستخدام لمسارات العمل الشائعة في Figma. وإذا كانت مؤسستك تمنع التثبيت، فتوجّهك Figma إلى المسؤولين عن Claude فيها. دليل إعداد Claude Code من Figma.

الإعداد اليدوي: إتاحة الاتصال عبر مشاريعك

للإعداد اليدوي الذي يمكنك استخدامه عبر مشاريع متعددة، توثّق Figma هذا الأمر كما هو:

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

ابدأ جلسة جديدة في Claude Code، وأدخل /mcp، واختر figma، ثم المصادقة (Authenticate)، ثم السماح بالوصول (Allow Access). تحقّق من الاتصال باستخدام /mcp.

يجعل الخيار --scope user الاتصال متاحًا عبر مشاريعك. وتوثّق Figma أيضًا الأمر claude mcp add --transport http figma https://mcp.figma.com/mcp، الذي يقتصر افتراضيًا على المشروع الحالي. الإعداد اليدوي ونطاق الاتصال.

ما خطة Figma أو نوع المقعد الذي تحتاج إليه؟

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

المصادر: إتاحة MCP، وأذونات الالتقاط، وحدود القراءة.

يتاح لمستخدمي Starter وأصحاب مقاعد View أو Collab ما يصل إلى 20 استدعاءً لأدوات القراءة شهريًا. واستدعاء الأداة هو طلب منفرد، لذا لا تعني هذه الحصة إتمام 20 دورة كاملة من التطبيق إلى التصميم والعودة. أما أداة الالتقاط generate_figma_design فهي مستثناة من حدود معدل استخدام MCP المعتادة. حصة القراءة واستثناء أداة الالتقاط.

ولنظرة أشمل إلى المنتج وقرار الاشتراك فيه، راجع مراجعتنا لـ Figma.

مثال عملي على Figma to code: دورة كاملة لثلاث شاشات تهيئة

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

التقاط المسار في ملف واحد

افتح المشروع في Claude Code، وحدّد رابط تطبيقك والملف الذي تريد إرسال الالتقاط إليه. مثلًا:

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

تأكّد من وجود شاشة الترحيب، ثم تابع التنقّل في التطبيق. عند الوصول إلى شاشتي دعوة أعضاء الفريق والمشروع الأول، استخدم الشاشة كاملة (Entire screen) من شريط أدوات الالتقاط. ولجزء أصغر، يتوفر خيار تحديد عنصر (Select element). وعند الانتهاء، اختر فتح الملف (Open file). شريط الأدوات وخطوات الإكمال.

نصيحتي: حافظ على أبعاد ثابتة لمساحة العرض طوال هذه الجولة الأولى، وسجّل الحالة التي التقطتها. فالشاشة التي تعرض خطأ في التحقّق من المدخلات تحتاج إلى اسم يميّزها عن الشاشة نفسها حين تكون المدخلات صحيحة.

مراجعة رحلة المستخدم وتعديلها في Figma

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

هذه التعديلات فرضيات تصميمية. وعلى وجه الخصوص، فإن رسم خيار للتجاوز لا ينفّذ منطق الصلاحيات أو التنقّل الذي يجعله يعمل. دوّن القرار بجانب الإطار المعتمد، وأدرجه في موجز التنفيذ.

افحص الطبقات الملتقطة قبل اعتمادها ضمن أصول نظام التصميم. تقول Figma إن الالتقاطات تصل في صورة طبقات عادية، دون ربط تلقائي بمكوّنات مكتبتك أو أنماطها. ويمكنها الربط بمتغيرات متوافقة من الملف أو من مكتبة أضفتها؛ والمتغيرات قيم قابلة لإعادة الاستخدام مثل الألوان والمسافات. وتتطلب إضافة مكتبات منشورة خطة مدفوعة. سلوك الالتقاط والمتغيرات.

إعادة الإطارات المعتمدة إلى Claude Code

انقر بزر الفأرة الأيمن على كل إطار معتمد، واختر نسخ رابط التحديد (Copy link to selection). ألصق هذه الروابط في Claude Code مع طلب التنفيذ. هذا هو مسار العمل عبر الخادم البعيد الذي توثّقه Figma. استخدام روابط الإطارات.

يمكن أن يكون موجز التنفيذ لهذا المثال كالتالي:

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

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

خمس حالات قد تستفيد من هذا المسار

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

وللفرق التي تعمل على تنظيم تعليمات تصميم قابلة لإعادة الاستخدام، تتناول حزمة نظام التصميم والمهارات المخصصة في Figma Make موضوعًا ذا صلة، ضمن مسار Figma Make المستقل.

حساب الجدوى: قِس جهد إعادة رسم الشاشات

البند الذي ينبغي فحصه في الميزانية هو إعداد التصميم وإعادة التنفيذ. إذا كان فريقك يعيد حاليًا إنشاء الشاشات المبنية قبل مراجعتها، فقارن هذا الجهد بجهد الالتقاط والتنقيح:

صافي القيمة لكل مراجعة = (ساعات الإعداد وإعادة العمل سابقًا − ساعات الالتقاط والتنقيح وإعادة العمل بالطريقة الجديدة) × التكلفة الداخلية لساعة العمل − التكاليف الإضافية للأدوات.

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

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

فكرتان محددتان يمكن تحويلهما إلى منتج

الفرصة المفيدة هي تقديم عملية مراجعة متكاملة حول الربط المتاح أصلًا. ما يلي فرضيات لمنتجات محتملة. تقديرات DataForSEO للسوق الأمريكية باللغة الإنجليزية، التي جرى التحقّق منها في 12 أكتوبر 2026، تقيس عمليات البحث الشهرية، ولا تمثل عملاء يدفعون.

الفرصة الأقوى: حزمة لمراجعة تهيئة المستخدم

قد يدفع فريق منتج أو وكالة صغيرة مقابل طريقة قابلة للتكرار تحوّل مسار التهيئة العامل لديه إلى مراجعة منظّمة وموجز تنفيذ. ومن مؤشرات الطلب القريبة من هذا المجال 590 عملية بحث شهريًا عن “claude code to figma” و260 عن “website to figma”. وقد يتداخل جمهور العبارتين.

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

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

أداة لفحص موجز التنفيذ

قد يستفيد الفريق الذي يسلّم تعديلات Figma إلى Claude Code باستمرار من أداة صغيرة ترصد روابط الإطارات الناقصة والوجهات غير الواضحة وغياب الإرشادات الخاصة بالمكوّنات قبل التنفيذ. يُقدَّر حجم البحث عن “Figma to code” بنحو 720 عملية بحث شهريًا؛ وهو مؤشر عام على المهمة الأساسية، وليس دليلًا على وجود طلب على أداة الفحص هذه.

يمكن أن تفحص أبسط نسخة موجزًا منظّمًا يضم الروابط المعتمدة ومسارات المكوّنات ومعايير القبول، ثم تُخرج قائمة بالأسئلة التي لم تُحسم. لكن التحدي يتعلق بالمعنى: تستطيع الأداة التنبيه إلى غياب وصف قاعدة تجاوز خطوة ما، لكنها لا تستطيع تقرير ما إذا كان ينبغي السماح للمستخدمين بتجاوزها. يظل حسم ذلك من مسؤولية مالك المنتج.

ما الذي لا تحلّه دورة الذهاب والعودة؟

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

تتفاوت جودة الالتقاط أيضًا. تذكر Figma أن الحركات الكثيفة المعتمدة على JavaScript والرسم باستخدام canvas والقوائم الافتراضية، التي لا تعرض في كل مرة إلا جزءًا من قائمة طويلة، قد تسبب مشكلات. جرّب التقاط عنصر محدد إذا لم تُنقل الصفحة كاملة بصورة جيدة. وقد تمنع أسماء متغيرات CSS المموّهة مطابقة المتغيرات؛ بينما قد يحافظ الالتقاط من خادم التطوير على الأسماء المقروءة. قيود الالتقاط المعروفة.

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

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

إذا أردت تهيئة مسار المراجعة هذا لمنتج فريقك، يمكننا مساعدتك في أتمتته.