تخطَّ إلى المحتوى

أنشئ تطبيقًا يعمل من تصميم Figma

باختصارفي Figma، اختر File → Save local copy… للحصول على ملف .fig. في صفحة المشاريع، انقر على Figma وأفلت الملف. يقرؤه MonstarX في متصفحك ويعرض كل الشاشات. حدّد الشاشات التي تريد إنشاءها (حتى 30)، وصِف ما لا يستطيع التصميم إظهاره، ثم اضغط «إنشاء هذا التطبيق»، أو التخطيط أولًا لتجيب عن بضعة أسئلة قبل الإنشاء.

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

ملف .fig لتصميمك. في Figma، افتح التصميم واختر File → Save local copy…، فيُحفظ الملف الذي يقرؤه MonstarX. يجب أن يكون ملف Design من Figma: لوحات FigJam وعروض Figma Slides غير مدعومة، وسيخبرك MonstarX إن أفلت واحدًا منها.

كيف أنشئ تطبيقًا من ملف Figma؟

Section titled “كيف أنشئ تطبيقًا من ملف Figma؟”
  1. في صفحة المشاريع، انقر على Figma بجانب استيراد (وهو موجود أيضًا في قائمة استيراد). ويمكنك أيضًا إفلات ملف .fig أو لصقه على مربع الطلب.

  2. أفلت ملف .fig أو اختره. يقرؤه MonstarX في متصفحك، فتظهر «جارٍ قراءة الملف…» ثم «جارٍ فتح كل صفحة…» ثم «جارٍ رسم الشاشات…»، ولا يُرفع أي شيء بعد.

  3. حدّد الشاشات التي تريد إنشاءها. تُعرض كل صفحة من الملف مع إطاراتها مرسومة بحجم صغير. الإطارات التي تبدو شاشات تكون محددة من البداية، والصفحات التي تبدو تنظيمية (غلاف، أو نظام التصميم، أو أرشيف) تكون مطوية وغير محددة. استخدم تحديد الكل أو إلغاء تحديد الكل في كل صفحة.

  4. في ماذا ينبغي أن يفعل التطبيق؟ (اختياري)، قل ما لا يستطيع التصميم إظهاره: من يستخدم التطبيق، ومن أين تأتي البيانات، وماذا يحدث عندما ينشئ أحدهم حسابًا أو يدفع.

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

  6. اضغط إنشاء هذا التطبيق · 4 شاشات، أو التخطيط أولًا ليدرس MonstarX الشاشات ويسألك عمّا لا يستطيع التصميم إظهاره قبل أن ينشئ التطبيق.

تُرفع الشاشات («جارٍ رفع التصميم…»)، ويُنشأ المشروع باسم الملف، ويبدأ الإنشاء الأول.

ماذا يأخذ MonstarX من تصميمي؟

Section titled “ماذا يأخذ MonstarX من تصميمي؟”
  • كل شاشة صورةً: فيرى وكيل الإنشاء ما رسمته بالضبط، ويقارن صفحاته بها أثناء العمل.
  • وصف دقيق لكل شاشة: التخطيط، والمسافات، وكل نص مع خطه وحجمه، والألوان، والحدود، والزوايا، والظلال.
  • صورك وأيقوناتك: كل صورة وأيقونة في التصميم تصبح ملفًا في التطبيق، فلا يُستبدل أي منها بصور جاهزة.
  • نظام تصميمك: متغيرات الألوان (الفاتحة والداكنة)، والخطوط، وأنصاف أقطار الزوايا، والظلال.
  • المكوّنات: الزر المستخدم في عشر شاشات يصبح مكوّنًا واحدًا في التطبيق.
  • روابط النموذج الأولي: المكان الذي تنقلك إليه كل نقرة يصبح تنقلًا حقيقيًا.

الشاشات التي تحمل الاسم نفسه (سلسلة من الإطارات كلها باسم «Desktop») تُميَّز بكلماتها الأولى، فتعرف أيها أي.

يكون طلبك الأول مثلًا: «أنشئ هذا التطبيق من تصميمي في Figma «bloom.fig» (4 شاشات: الترحيب، الرئيسية، تفاصيل النبتة، إضافة نبتة). اجعله مطابقًا للتصميم تمامًا ويعمل فعليًا.»، وتحته شريط بالشاشات. انقر على شاشة لتراها بحجمها الكامل، مع مقاسها وصفحتها وملفها. وأثناء الإنشاء تعرض المحادثة خطوات مثل «جارٍ دراسة تصميم الرئيسية» و«قُورنت / بتصميم الرئيسية».

هل يمكنني إضافة شاشات أخرى لاحقًا؟

Section titled “هل يمكنني إضافة شاشات أخرى لاحقًا؟”

نعم. في محادثة المشروع، أفلت ملف .fig أو الصقه أو أرفقه، فتُفتح نافذة إضافة شاشات من Figma. حدّد الشاشات الجديدة، وقل ما يجب أن تفعله، واضغط إنشاء هذه الشاشات. تنضم إلى تصميم المشروع وتُنشأ لتتناسق مع بقية التطبيق. ويحتفظ المشروع بما يصل إلى 60 شاشة تصميم.

الحدالقيمة
الشاشات في الإنشاء الواحدحتى 30
الشاشات في المشروعحتى 60
الصور والأيقونات في التصميمحتى 400 ملف و150 MB (و8 MB لكل ملف)

يمكن أن يصل حجم ملف .fig إلى 250 MB، لكن الملف الكبير جدًا (مثل حزمة نظام تصميم كاملة) قد يظل أثقل من أن يفتحه المتصفح. انقل شاشات تطبيقك إلى ملف مستقل، دون صفحات نظام التصميم، واحفظ نسخة محلية منه.

هل يمكنني لصق رابط Figma بدل الملف؟

ليس في هذه النافذة، فهي تقرأ ملف .fig نفسه. استخدم File → Save local copy… في Figma. (ويمكن لبعض أدوات التصميم أيضًا إرسال عملها عبر وكيل البرمجة الخاص بك.)

هل يُرفع تصميمي عندما أفلته؟

لا. يُقرأ الملف في متصفحك، ولا تُرفع إلا الشاشات التي تحددها، عندما تضغط زر الإنشاء.

هل سيبدو التطبيق مطابقًا للتصميم تمامًا؟

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

تصميمي يعرض شاشات الهاتف فقط. ماذا يحدث على الحاسوب؟

تُنشأ تصاميم الهاتف عمودًا في وسط الشاشات العريضة، فيبقى التطبيق يعمل على الحاسوب.

يقول MonstarX إن ملفي ليس ملف Figma. لماذا؟

ربما يكون لوحة FigJam، أو عرض Figma Slides، أو ملف .fig من برنامج آخر. افتح التصميم في Figma واستخدم File → Save local copy… لحفظ ملف Design من Figma.