من Figma إلى Godot UI: تصدير تسلسل تحكم مع AI Studio (خطوة بخطوة)

معايير الإنجاز: ما يعنيه “في Godot”

الأنسجة وحدها لا تكفي. يجب أن يكون لديك أيضًا:

1. شجرة عقد تتوافق مع إطارات Figma ذات المعنى (الشريط العلوي، القائمة، الشريط السفلي، وما إلى ذلك)
2. هيكل رئيسي يتحمل أحجام 16:9، الوضع الرأسي، والنوافذ بدون إعادة ضبط الشجرة بأكملها
3. طبقات النص التي تبقى Label (أو عقد النص في مشروعك) عندما يكون ذلك ممكنًا—وليس مدمجة في الصور
4. طريقة لإعادة التصدير بعد تغييرات هيكل Figma، بدلاً من إعادة بناء المشهد من الصفر

الإشارات، وربط البيانات، ومفاتيح الترجمة لا تزال في Godot. AI Studio يزيل “إعادة بناء هيكل التخطيط من النموذج”.

المتطلبات الأساسية

العنصر	ملاحظات
Figma	شاشات مقسمة إلى إطارات بأسماء واضحة
AI Studio	الوصول إلى VberAI Studio
Godot	يُفضل مشروع Godot 4.x؛ اضبط هدف التصدير على Godot
اصطلاحات الأصول	الاتفاق على مجلدات مشاهد الواجهة (مثل res://ui/generated/) وموقع السمة

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

الخطوة 1: نظّم Figma بحيث يقرأ كشجرة واجهة مستخدم

تنظيف قصير قبل الاستيراد أرخص من تقسيم العقد في المحرك لاحقًا.

الممارسة	لماذا
أسماء إطارات واضحة (Panel_HUD, Btn_Play, List_Item)	الأسماء تصبح أسماء عقد Godot
استخدم الإطارات / التخطيط التلقائي للمجموعات؛ تجنب دمج الشاشات بأكملها	يبقى التسلسل الهرمي معروفًا بعد الاستيراد
احتفظ بالنص كطبقات نصية عندما يمكنك	تعيين Label أسهل
افصل لوحات nine-slice عن الأيقونات الثابتة	قواعد التمدد تبقى واضحة
إخفاء الإطارات المسودة والمتغيرات غير المستخدمة	ضوضاء أقل في شجرة التصدير

الخطوة 2: استيراد Figma في AI Studio

1. افتح VberAI Studio
2. ابدأ استيرادًا، اختر Figma، وارفع الملف (أو استخدم اتصال Figma المدعوم من المنتج)
3. في شجرة الطبقات / الإطارات، أكد الشاشات التي ستنشرها فعليًا—وليس كل مسودة في الملف

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

الخطوة 3: تحقق من التسلسل الهرمي قبل التصدير

على اللوحة، تحقق من:

• تداخل اللوحات يطابق الرأس / الجسم / التذييل (أو اصطلاحات الهيكل الخاصة بك)
• مناطق النقر للأزرار منفصلة عن الأيقونات الزخرفية
• النص القابل للترجمة لا يزال طبقات نصية
• اللوحات القابلة للتمدد مقابل الأيقونات ذات الحجم الثابت مميزة

أصلح التسمية أو التجميع في AI Studio عندما يمكنك. فك تشابك .tscn مكسور في Godot يكلف أكثر.

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

الخطوة 4: التصدير لـ Godot

اضبط المحرك الهدف على Godot. يُفضل تسلسل Control / مشهد على “الأنسجة فقط”.

بعد التصدير، في Godot:

1. ضع الأصول في المجلد المتفق عليه (مثل res://ui/generated/)
2. أرفق المشهد المُصدَّر تحت CanvasLayer أو جذر واجهة مشروعك
3. تأكد من أن الجذر هو شجرة Control (أو حاوية) منطقية
4. معاينة عدة دقات في المحرر
5. اربط pressed والإشارات الأخرى، وتعبئة البيانات، باستخدام GDScript / C# كالمعتاد

المنطق يبقى في المشروع. ما تتخطاه هو تكديس كل TextureRect / Label / حاوية يدويًا من Figma.

الخطوة 5: قائمة التحقق للقبول في المحرر

التحقق	معايير النجاح
أسماء العقد	تطابق الإطارات الرئيسية؛ ليست كومة من فهارس Node2D / Control بلا معنى
التخطيط	الهيكل يبقى قابلًا للاستخدام عند تمدد النافذة
النص	تغيير نص Label لا يتطلب إعادة تصدير الشاشة كاملة كفن
السمة	الخطوط والألوان يمكن ربطها بسمة المشروع، أو تعرف أن السمة لا تزال تحتاج إلى تمريرة يدوية
إعادة التصدير	بعد تغييرات هيكل Figma، يمكن لتصدير جديد أن يحل محل المشهد أو يجاوره—وليس أن يتركك عالقًا

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

الأسئلة الشائعة

هل هذا هو نفسه إضافات Figma “إلى الكود”؟
معظم تلك تستهدف الويب. Godot يحتاج اصطلاحات Control / حاوية / سمة. التصدير الموجه للمحرك ليس نفس منتج توليد كود الويب.

هل ما زلنا نصمم في Figma؟
نعم. AI Studio يستهلك بنية التصميم؛ لا يحدد اتجاه الفن. التخطيط والرموز لا تزال تأتي من Figma.

أين يتناسب Godot MCP؟
AI Studio يتعامل مع التصميم → بنية Control. Godot MCP يساعد بعد أن يكون المشهد في المشروع—إعادة تسمية العقد، ربط الإشارات، فحص الشجرة من Cursor وما شابه. MCP لا “يولد واجهة كاملة من صورة”. الإعداد: تثبيت Godot MCP.

هل سيكون التصدير الأول مطابقًا للبكسل؟
عادة لا. الفوز هو ترحيل البنية في دقائق بدلاً من إعادة بناء نصف يوم؛ البكسلات والسمة تكتمل في Godot.

كيفية إعادة التشغيل بعد تغييرات التصميم

تغيير Figma	الاقتراح
صفوف/أعمدة الهيكل، علامات تبويب جديدة	إعادة التصدير عبر AI Studio
تلوين الأيقونة أو النص فقط	يُفضل مشهد Godot / السمة / جداول الترجمة
لوحة فنية جديدة كاملة	تصدير جديد → .tscn جديد أو استبدال المسار المتفق عليه