طبقات التعليمات البرمجية Figma وSpecs: ما هي وكيف تعمل وأين تتوقف2 min read

تضع طبقات التعليمات البرمجية Figma تعليمات برمجية قيد التشغيل على اللوحة القماشية، كما تضع Figma Specs Markdown هناك أيضًا. دخل كلاهما إلى الإصدار التجريبي المفتوح في Config India في 15 أكتوبر 2026، لذا يمكن لملف التصميم الآن أن يحتوي على إطارات ونموذج أولي عملي والخطة المكتوبة التي يبني عليها الوكيل.

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

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

التصميم مباشرة بالبرمجة باستخدام الذكاء الاصطناعي

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

ماذا تم إطلاق Figma في Config India 2026؟

كانت طبقات التعليمات البرمجية وSpecs هي العنوان الرئيسي، لكنها وصلت مع مجموعة من ميزات الوكيل من حولها. فيما يلي الحالة الحالية من مركز مساعدة Figma:

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

ما هي طبقات الكود Figma؟

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

يمنحك Figma أربع طرق لبدء واحدة:

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

يمكنك أيضًا إحضار النموذج الأولي الذي قمت بإنشائه في أداة البرمجة إلى اللوحة القماشية من خلال خادم Figma MCP.

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

ما هو Figma Specs؟

Figma يدعو Specs “موطن أصلي للسياق.” من الناحية العملية، يعد هذا مستند Markdown تعاونيًا موجودًا إما على لوحة ملف Figma Design أو لوحة FigJam، أو كملف Spec خاص به.

البدء سريع:

1. قم بإنشاء Spec مستقل من متصفح الملفات، أو انتقل إلى figma.com/spec/new.
2. داخل ملف التصميم أو لوحة FigJam، انقر فوق Spec في شريط الأدوات أو اضغط على د.
3. لديك بالفعل .md ملف؟ اسحبه إلى اللوحة القماشية وسيصبح أحد المواصفات.
4. اكتب باستخدام Markdown الذي تعرفه بالفعل: # للعناوين، - للرصاص، [] للمهام، > بالنسبة لعروض الأسعار، ثلاث علامات خلفية للرمز. يكتب / بالنسبة للصور، يقوم Figma بتضمين وفواصل.

ما يجعل المواصفات أكثر من مجرد ملف Markdown هو ما يوجد حول النص. يمكنك تضمين إطار أو لوحة FigJam أو أي عقدة من اللوحة القماشية، بحيث يظل المتطلبات والتصميم الذي يصفه بجوار بعضهما البعض. يعلق زملاء الفريق عليه، ويمكن لوكيل Figma قراءة تلك التعليقات والرد عليها.

يعمل Specs أيضًا خارج Figma. يمكن لوكلاء الترميز المتصلين بخادم Figma MCP قراءة المواصفات وإنشائها وتحديثها باستخدام figma-spec مهارة. لتسليم واحدة، يمكنك نسخ رابط المواصفات في موجه وكيل الترميز الخاص بك، وتأتي معه الإطارات المرتبطة والرسوم البيانية وطبقات التعليمات البرمجية ومقتطفات Code Connect.

لماذا أصبح Markdown هو تنسيق التسليم

يقول منشور الإطلاق الخاص بـ Figma ذلك بوضوح: Markdown هو الآن التنسيق الفعلي لمشاركة السياق مع الوكلاء. يقرأها كل وكيل ترميز. تحتفظ معظم فرق المنتجات بالفعل بالخطط وبيانات PRD وتعليمات الوكيل .md ملفات.

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

داخل Figma، يعمل Specs على إصلاح ذلك. والسؤال المفتوح هو ماذا يحدث خارجها. التضمينات والتعليقات ومراجع التصميم المباشر هي ميزات Figma، ويصل إليها الوكلاء من خلال العملاء المدرجين في كتالوج Figma MCP. إذا كان المهندسون لديك، وChatGPT من مدير المشروع الخاص بك، وكلود من فريق التسويق لديك بحاجة إلى نفس الخطة، فلا يزال يتعين عليك تحديد مكان تواجد النسخة المشتركة.

سير عمل عملي: من PRD إلى طبقة التعليمات البرمجية لسحب الطلب

وإليك كيفية دمج الميزتين معًا في ميزة حقيقية، باستخدام ما يوثقه Figma اليوم فقط.

1. اسحب PRD إلى اللوحة القماشية. الموجود لديك .md يصبح الملف المواصفات. لا تتم إعادة كتابة أي شيء، ولا يستخدم تحريره يدويًا أي اعتمادات للذكاء الاصطناعي.
2. تضمين الإطارات التي تتحدث عنها. يستخدم / لإضافة التدفقات التي يصفها PRD. يرى المراجعون الآن المتطلبات والشاشة معًا.
3. تحويل الإطارات الرئيسية إلى طبقة التعليمات البرمجية. حددهم واطلب من الوكيل. إذا كان لديك بالفعل نموذج أولي، فاستورده من GitHub بدلاً من ذلك.
4. المراجعة في مكان واحد. جمع التعليقات على المواصفات وطبقة التعليمات البرمجية. اطلب من وكيل Figma الرد على كل تعليق مفتوح بإصلاح مقترح بينما يفكر الأشخاص في نفس المواضيع.
5. تسليم المواصفات. الصق رابط المواصفات في Codex أو Claude Code أو Cursor المتصل بخادم Figma MCP. يحصل الوكيل على Markdown بالإضافة إلى سياق التصميم المرتبط.
6. قم بشحن رمز النموذج الأولي. ادفع تغييرات طبقة التعليمات البرمجية إلى فرع وافتح طلب سحب حتى يقوم المهندسون بمراجعتها قبل الدمج.

الإخراج عبارة عن مواصفات يمكن لوكيل الترميز الخاص بك قراءتها ونموذج أولي عملي قام فريقك بالنقر فوقه بالفعل. اختبر الكود الذي تم إنشاؤه مثل أي كود آخر. النموذج الأولي الذي يتم تشغيله ليس هو نفسه الكود الجاهز للإنتاج.

إذا كانت الخطوة التالية هي تحويل تصميم Figma إلى تعليمات برمجية يمكنك تشغيلها، أو تصميم تعليمات برمجية من خلال موجه، فهذه هي مهمة Anima Playground.

ما هي تكلفة طبقات التعليمات البرمجية وSpecs؟

• تستخدم طبقات التعليمات البرمجية اعتمادات الذكاء الاصطناعي. في الخطط المدفوعة، يكون الإنشاء والتحرير داخل طبقة التعليمات البرمجية مجانيًا حتى 4 نوفمبر 2026. ولا يزال الوكيل الآخر الذي يعمل في نفس الموجه يستخدم الاعتمادات، وبعد 4 نوفمبر تستخدم جميع مهام طبقة التعليمات البرمجية الاعتمادات.
• Specs أحرار في الكتابة. كتابة المواصفات وتحريرها بنفسك لا يستخدم الاعتمادات. استخدام الوكيل مع المواصفات يفعل. قم بتمرير الإيصال بعد كل مطالبة لمعرفة التكلفة.
• Payload والمبادئ التوجيهية تضيف تكلفة. يلاحظ Figma أن كلاهما يمنح الوكيل مزيدًا من السياق والمزيد من العمل، لذلك يمكن للموجه نفسه استخدام المزيد من الاعتمادات.

الحدود التي يجب التحقق منها قبل التخطيط لها

• طرح. كلتا الميزتين عبارة عن إصدارات تجريبية مفتوحة يتم طرحها على مدار أسابيع. ابحث عن رمز Code في شريط الأدوات Figma Design وخيار Spec في متصفح الملفات.
• الخطط. يحتاج Specs إلى خطة مدفوعة. يحصل المستخدمون المبتدئون على طبقات التعليمات البرمجية ولكن ليس على Specs. كلاهما يحتاج إلى حق الوصول للتحرير للإنشاء.
• إلغاء الاشتراك. يمكن لمسؤولي المؤسسة فقط إيقاف تشغيل طبقات التعليمات البرمجية، وذلك فقط من خلال إيقاف تشغيل جميع ميزات Figma AI.
• حجم الريبو. استيراد GitHub مخصص لقواعد التعليمات البرمجية للنماذج الأولية خفيفة الوزن، وليس لتطبيق إنتاج كامل.
• كود نظام التصميم لا يزال ربط كود المكون الحقيقي الخاص بك من خلال مصادر التعليمات البرمجية بمثابة إصدار تجريبي مغلق، لذا قد لا تستخدم طبقات التعليمات البرمجية مكونات الإنتاج الخاصة بك حتى الآن.

حيث يتوقف Figma، وحيث يتناسب Anima وAgentGrid.io

إذا كان فريقك بأكمله يعمل في Figma، فإن طبقات التعليمات البرمجية وSpecs هي الإعدادات الافتراضية القوية. يوجد النموذج الأولي والخطة والتعليقات في نفس الملف، ويمكن لوكيل Figma وعملاء MCP العمل عليها.

لا يزال هناك حالتان شائعتان تقعان خارج هذا الملف.

الفكرة بدأت في مكان آخر. نموذج أولي Claude Design، أو صفحة HTML تم إنشاؤها بواسطة ChatGPT، أو موقع مباشر تريد التعلم منه. يحتوي خادم MCP الخاص بـ Figma الآن على html_to_figma أداة للوكيل الذي أنشأه HTML. Anima’s Buddy، وكيل تصميم الذكاء الاصطناعي لدينا داخل Figma، يتحول أيضًا HTML ومصنوعات Claude والصور وعناوين URL في طبقات Figma القابلة للتحرير، وهو أمر مفيد عندما تريد الاستمرار في التصميم على تلك الطبقات باستخدام نظام التصميم الخاص بك.

النتيجة تحتاج إلى مغادرة Figma. يجب مراجعة المواصفات أو النموذج الأولي الخاص بك بواسطة أشخاص خارج فريق Figma الخاص بك، أو تحريره بواسطة وكلاء من العديد من البائعين، أو نشره كرابط مباشر. هذه هي المهمة التي يقوم بها AgentGrid.io، الذي أنشأه Anima. إن قطعة Markdown الموجودة على AgentGrid.io عبارة عن مستند مباشر يتم حفظه تلقائيًا ويمكن للأشخاص والوكلاء المتصلين مثل Claude وChatGPT وCursor وGrok Bot تحريره، مع إسناد كل تغيير بالاسم في سجل الإصدارات. قطعة أثرية HTML هي صفحة قيد التشغيل يمكنك التعليق عليها ونشرها على عنوان URL عام عند الموافقة عليها. يمكنك أيضًا استيراد إطار Figma واحد إلى AgentGrid.io باعتباره أحد عناصر التطبيق. يكون هذا الاستيراد أحادي الاتجاه، لذا لا تتم مزامنة تعديلات Figma اللاحقة.

ولا يتنافس الاثنان على نفس الخطوة. تمتلك Figma لوحة التصميم. AgentGrid.io هو المكان الذي يوجد فيه ملف Markdown وتذهب القطع الأثرية HTML عندما يتقاطع العمل مع الأدوات والفرق.

جرب AgentGrid.io للاحتفاظ بمواصفات أو نموذج أولي يمكن لكل وكيل في فريقك تعديله ونشره.

استخدم كل أداة عندما

• استخدم طبقات التعليمات البرمجية Figma عندما يحتاج أصحاب المصلحة إلى النقر فوق نموذج أولي عملي بجوار التصميمات ومقارنة الاتجاهات جنبًا إلى جنب.
• استخدم Figma Specs متى يجب أن تكون الخطة بجوار الإطارات وأن يقرأها وكيل الترميز من خلال خادم Figma MCP.
• يستخدم Anima Playground عندما تريد التصميم مباشرةً باستخدام التعليمات البرمجية باستخدام الذكاء الاصطناعي، أو تحويل تصميم Figma إلى تطبيق قابل للتحرير يمكنك معاينته ونشره.
• يستخدم Buddy عندما تكون نقطة البداية خارج Figma وتريد طبقات قابلة للتحرير على اللوحة القماشية. للحصول على مقارنة أكمل بين البناء في Figma مقابل منشئ المتصفح، راجع Figma Make مقابل Anima Playground.
• استخدم AgentGrid.io عندما يتعين على الأشخاص والوكلاء تحرير المواصفات أو النموذج الأولي عبر الأدوات، ومراجعتها مع التعليقات، ونشرها كرابط مباشر.

الأسئلة المتداولة

ما هي طبقات التعليمات البرمجية في Figma؟

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

هل Figma Specs مجرد Markdown؟

يستخدم Specs Markdown للنص الخاص به، ويمكنك سحب أي ملف .md إلى اللوحة القماشية لإنشاء ملف. فهو يضيف ميزات Figma حول هذا النص: الإطارات المضمنة ولوحات FigJam والتعليقات والوكيل الذي يمكنه قراءة تلك التعليقات والرد عليها.

هل تكلف طبقات التعليمات البرمجية Figma أرصدة الذكاء الاصطناعي؟

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

هل يمكن لـ Claude Code أو Codex أو Cursor قراءة Figma Spec؟

نعم، إذا كانوا متصلين بخادم Figma MCP. يمكن لوكلاء البرمجة قراءة المواصفات وإنشائها وتحديثها باستخدام مهارة figma-spec، ويمكنك لصق رابط المواصفات في الموجه الخاص بك لتمرير سياق التصميم المرتبط به.

ما هي خطط Figma التي تتضمن Specs؟

Specs في مرحلة تجريبية مفتوحة على الخطط المدفوعة: Professional، وOrganization، وEnterprise، وEducation، بالإضافة إلى Government وفقًا لمقالة Config India الخاصة بـ Figma. إنها ليست ضمن خطة Starter المجانية. يتم طرح طبقات التعليمات البرمجية في جميع الخطط، بما في ذلك خطط Starter.