من Figma إلى Unity UI: من إطارات التصميم إلى Prefabs مع VberAI Studio

لماذا لا يزال الانتقال من Figma إلى Unity ينكسر في منتصف خط الإنتاج

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

هذا التسليم هو المكان الذي يختفي فيه الوقت:

• يصمم المصممون في Figma؛ ويعيد المهندسون بناء نفس البنية في UGUI
• نادرًا ما تنجو أسماء الطبقات والتجميعات من تفريغ صورة مسطحة
• يمكن لمراجعة صغيرة في Figma أن تجبر على قضاء فترة ما بعد الظهر في أعمال RectTransform

ما تحتاجه فعليًا هو الحفاظ على البنية—تحويل الإطارات إلى تسلسل هرمي—وليس خط أنابيب PNG آخر.

كيف يبدو المسار المفيد من Figma إلى Unity

يجب أن يقوم التسليم الجاهز للإنتاج بثلاثة أشياء:

1. استيراد ملف Figma مع الحفاظ على الإطارات والمجموعات المسماة
2. ضبط التخطيط والأصول بصريًا مباشرة على اللوحة القماشية
3. تصدير أو مزامنة إلى Unity كمكونات واجهة / prefabs يمكنك معاينتها في المحرر (تسلسل المحرك، وليس HTML ويب)

VberAI Studio (الاسم المختصر: AI Studio) مبني حول هذه الحلقة: ملف تصميم ← فحص التسلسل ← تعديلات اختيارية بالذكاء الاصطناعي ← تصدير موجه لـ Unity. لا يستبدل نظام التصميم الخاص بك أو توصيلات C#؛ بل يزيل خطوة “إعادة إنشاء هذه اللوحة في Canvas” المتكررة.

إذا كنت تستخدم أيضًا Unity MCP، يمكنك تحسين الـ prefab المستورد لاحقًا من Cursor أو Claude Code. تركز هذه المقالة على مسار التصميم إلى Unity UI.

قم بإعداد ملف Figma أولاً

يعمل AI Studio بشكل أفضل عندما يكون الملف قابلاً للقراءة كبنية واجهة.

الممارسة	لماذا تهم
تسمية الإطارات بوضوح (Panel_HUD, Btn_Play, List_Item)	تصبح الأسماء تسميات عقدة / GameObject
تفضيل المجموعات على لوحات الرسم المسطحة المدمجة	يبقى التسلسل الهرمي بعد الاستيراد
إبقاء النص كطبقات نصية عندما يكون ذلك ممكنًا	تعيين أفضل لـ TextMeshPro / UI Text
استخدام تباعد ثابت وتخطيط تلقائي	تترجم المراسي ومجموعات التخطيط بشكل أنظف
إخفاء الإطارات المسودة والمتغيرات غير المستخدمة	ضوضاء أقل في شجرة التصدير

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

سير العمل: استيراد ← تعديل ← تصدير إلى Unity

1. استيراد تصميم Figma

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

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

2. فحص التسلسل الهرمي قبل التصدير

تحقق من:

• تداخل اللوحات (الرأس / الجسم / التذييل)
• مناطق النقر للأزرار مقابل الأيقونات الزخرفية
• طبقات النص التي يجب أن تبقى قابلة للتحرير
• الخلفيات القابلة للتمدد (Nine-slice) مقابل الأيقونات الثابتة

أصلح التسمية والتجميع هنا إذا كان هناك شيء خاطئ. اكتشاف المشكلات قبل استيراد Unity أرخص من تصحيح prefab مكسور لاحقًا.

3. استخدم التعديلات باللغة الطبيعية عندما يحتاج التصميم إلى تمريرة

الطلبات النموذجية التي تستخدمها الفرق:

• “قم بتقليل التباعد الرأسي بين العنوان والزر الأساسي”
• “اجعل عناصر قائمة المتجر متساوية الارتفاع”
• “أخفِ شارة المسودة وأبقِ على زر الدعوة الرئيسي”

الهدف ليس إعادة تصميم اللعبة في الدردشة. بل تصحيح التخطيط والبنية قبل أن يصبح التسلسل الهرمي كائنات Unity.

4. تصدير أو مزامنة لـ Unity

اختر Unity كهدف وفضل إخراج تسلسل UI / prefab على الصور فقط.

ثم في Unity:

1. استورد الحزمة إلى مجلد واضح (Assets/UI/Generated/)
2. ضع الـ prefab تحت الـ Canvas الخاص بك (أو جذر الواجهة)
3. اختبر 16:9 ونسبة أبعاد موبايل طويلة
4. قم بتوصيل الأزرار وربط البيانات في C# كالمعتاد

ما زلت تمتلك منطق التفاعل. ما تتخطاه هو إعادة بناء كل Image / Text / LayoutGroup يدويًا لمطابقة Figma.

أين يتناسب هذا مع التصدير اليدوي

النهج	الأفضل عندما
PNG يدوي + إعادة بناء	شاشة تسويقية لمرة واحدة، شادرات مخصصة ثقيلة
AI Studio Figma → Unity	القوائم، HUD، المتاجر، الإعدادات—بنية متكررة
AI Studio + Unity MCP	نفس الشاشة، ثم إعادة تسمية دفعة / ربط الأحداث مع عميل AI

لمقارنات خاصة بـ Godot، انظر Figma to Godot: Manual vs AI Studio. لتمريرة قصيرة تركز على PSD لـ Unity، انظر How to Import PSD to Unity UI in 5 Minutes.

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

هل هذا هو نفسه إضافات Figma الخاصة بـ “إلى كود”؟ غالبًا ما تستهدف تلك الأدوات حزم الويب. تحتاج واجهة اللعبة إلى Canvas / RectTransform (أو ما يعادله في المحرك)، والخطوط، واتفاقيات prefab. تعامل مع التصدير الواعي بالمحرك كمشكلة منفصلة عن توليد كود الويب.

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

ماذا عن Figma MCP؟ Figma MCP مفيد عندما يتحدث عميل AI مع Figma مباشرة (قراءة الإطارات، التعليق، التعديل في التصميم). بالنسبة لـ تصميم Figma → Unity لواجهة اللعبة، المسار العملي لا يزال استيراد ← تسلسل هرمي ← تصدير Unity في AI Studio. استخدم Unity MCP بعد وصول الـ prefab إذا كنت بحاجة إلى أتمتة المحرر.

هل ستكون كل شاشة مثالية بالبكسل عند أول تصدير؟ توقع تمريرة مراجعة للخطوط والمناطق الآمنة والتوطين. المكسب هو دقائق من نقل البنية بدلاً من ساعات من إعادة الإنشاء اليدوي.

الخطوات التالية

1. نظف أسماء الإطارات على شاشة قائمة حقيقية واحدة في Figma
2. مررها عبر VberAI Studio
3. استورد حزمة Unity وقارن الوقت مقابل آخر إعادة بناء يدوية

إذا كانت الشاشة لا تزال بحاجة إلى أتمتة داخل المحرر بعد ذلك، قم بتوصيل Unity MCP وكرر من عميل الترميز AI الخاص بك.