نظرة عامة
وحدة التصميم في مايندلاب قماش يُبنى بالمحادثة: تصف الشاشات، فيرسمها مايندلاب ويصقلها معك. حين تصبح اللوحة جاهزة، لست محصوراً بتصديرها كصورة — يمكنك تمريرها إلى الباني ليحوّلها إلى تطبيق ويب فعلي بكود يعمل.
الفرق المهم: التصدير يمنحك أصولاً ساكنة (صور، PDF، مواصفات). أما التحويل إلى تطبيق ويب فيمنحك تطبيقاً مُبرمَجاً حيّاً تستطيع تشغيله، وتكراره، ونشره — انطلاقاً من تصميمك بدل البدء من شاشة فارغة.
قبل التحويل
بضع لمسات على اللوحة تجعل التطبيق المولّد أقرب إلى ما تتخيّله:
1
أنهِ التكرار على الشاشات الأساسية
كلما اقتربت اللوحة من النهائي، كان الكود المولّد أدقّ. اصقل الشاشات الرئيسية في وحدة التصميم أولاً قبل التحويل.
2
أرفق بصمة التصميم
إن أردت أن يطابق التطبيق هوية موقع قائم، تأكّد من أنّ بصمة التصميم مرتبطة باللوحة — فالألوان والخطوط ونصف القطر ستنتقل إلى الكود المولّد.
3
اجعل نصوص العناصر حقيقية
النصوص الفعلية (لا النائبة) تنتقل مباشرة إلى التطبيق، فتوفّر عليك جولة تحرير لاحقة في الباني.
تحويل اللوحة
التحويل نفسه بضع خطوات:
1
افتح لوحتك الجاهزة
في وحدة التصميم، افتح اللوحة التي تريد تحويلها وتأكّد من أنّ آخر تكرار قد اكتمل.
2
ابدأ التحويل إلى تطبيق ويب
اختر إجراء تحويل اللوحة إلى تطبيق ويب. يأخذ مايندلاب التصميم كنقطة انطلاق ويهيّئ مشروع باني جديداً منه.
3
أكّد النطاق
حدّد ما إذا كنت تريد توليد كل شاشات اللوحة أم مجموعة فرعية، وأضف أي ملاحظة عن السلوك المطلوب (مثل: ما الأزرار التي تتنقّل وأين).
4
دع الباني يولّد الكود
يولّد مايندلاب واجهة أمامية بـ React (وخادماً عند الحاجة) تطابق تخطيطك. حين ينتهي، تفتح اللوحة في باني تطبيقات الويب بمعاينة حيّة.
ما الذي ينتقل
لا ينطلق التحويل من الصفر — ينقل بنية تصميمك إلى الكود:
1
التخطيط والبنية
ترتيب العناصر على كل شاشة — الأقسام، والشبكات، والتباعد — يُترجَم إلى مكوّنات وتخطيطات مقابلة في الكود المولّد.
2
النمط وبصمة التصميم
تنتقل الألوان، والخطوط، ونصف قطر الحدود، ومقياس التباعد كرموز تصميم في الكود — لا كقيم مكتوبة مباشرة — فيبدو التطبيق متّسقاً مع هويتك ويسهل تعديله لاحقاً.
3
نصوص العناصر
النصوص الظاهرة في تصميمك (العناوين، والأزرار، والتسميات) تنتقل إلى التطبيق المولّد كنصّ حقيقي.
4
إشارات تدفّق الشاشات
حيثما تُظهر اللوحة كيف تنتقل الشاشات إلى بعضها، يستخدم الباني ذلك لتجهيز التنقّل والمسارات الأولية بين الصفحات.
ℹ
ملاحظة.ينقل التحويل التخطيط والنمط والمحتوى — لا منطق التطبيق الكامل. وظائف مثل التحقّق من النماذج، وقواعد البيانات، والتكاملات تُضاف في باني تطبيقات الويب بعد التوليد.
التكرار في الباني
بمجرّد وصول التصميم إلى الباني، يصبح مشروع تطبيق ويب كامل المزايا. من هنا تطلب التغييرات بالمحادثة كأي تطبيق بدأته من مطالبة:
1
أضف السلوك والمنطق
اطلب من الباني توصيل الأزرار، والتحقّق من المدخلات، وحفظ البيانات، وربط واجهات API — كلّ ما يحوّل الواجهة الساكنة إلى منتج عامل.
2
اصقل الواجهة بالمطالبات
عدّل التخطيط أو الأنماط بطلبات لغة طبيعية. ولأنّ النمط يُخزَّن كرموز تصميم، يبقى تعديل الهوية على مستوى المشروع سهلاً.
3
اعرض المعاينة وانشر
عاين التطبيق الحيّ، ثم انشره بنقرة واحدة على استضافة مايندلاب المُدارة، أو صدّره لاستضافته بنفسك في أي مكان.
ملاحظات وقيود
1
التصميم نقطة انطلاق لا نسخة طبق الأصل
يطابق الكود المولّد تخطيطك ونمطك عن قرب، لكنه ينتج مكوّنات حقيقية متجاوبة. توقّع فروقاً طفيفة في الانسياب عبر أحجام الشاشات، واصقلها بالمطالبات.
2
حوّل بعد أن يستقرّ التصميم
بما أنّ التكرار بعد التحويل يجري في الباني، حوّل عندما تكون راضياً عن البنية الأساسية لتجنّب إعادة العمل المزدوج عبر الوحدتين.
3
تبقى وحدة التصميم متاحة
لا يحذف التحويل لوحتك. يمكنك العودة إلى وحدة التصميم لاستكشاف اتجاه مختلف وتحويل لوحة جديدة لاحقاً.
💡
نصيحة.إن احتجت إلى مرجع بصري ثابت للمراجعة إلى جانب التطبيق المُبرمَج، صدّر اللوحة كملف PDF أو مواصفات تسليم قبل التحويل. راجع دليل «تصدير تصميم».
الخطوات التالية