قبل أن تنتقل: هل الانتقال مناسب لك؟
هذا الدليل مختلف عن بقية أدلة الانتقال: Figma أداة تصميم وليست أداة بناء مواقع، فأنت لا تنقل موقعًا قائمًا، بل تنقل فكرة مرسومة إلى موقع يعمل. لذلك سؤال الملاءمة هنا هو: هل تصميمك جاهز ليُبنى؟
يناسبك هذا المسار إذا اعتمد فريقك أو مصممك الشاشات، وتريد أن تراها تعمل بسرعة دون أن تسلّمها لمطوّر يعيد رسمها سطرًا سطرًا. مثال: وكالة صغيرة في الخبر صممت لعميلها موقع مكتب محاماة في Figma، وتريد تسليمه موقعًا حيًا على نطاقه.
- جاهز للبناء: كل صفحة في إطار مستقل، والنصوص حقيقية بالعربية، والألوان والخطوط موحّدة.
- يحتاج ترتيبًا أولًا: الشاشات مرسومة كصور مسطحة، أو طبقات بلا أسماء، أو لا يوجد تصميم للجوال.
- ليس بعد: إذا كان التصميم ما زال مسودات متضاربة، فالأفضل حسم الاتجاه قبل البناء.
نعمل على تجهيز لقطات شاشة حقيقية وفيديو قصير يشرح خطوات الانتقال من Figma إلى أوترا، وسنضيفها هنا قريبًا. حتى ذلك الحين اتبع الخطوات المكتوبة بالترتيب.
ما الذي ينتقل وما الذي لا ينتقل
لأن المصدر تصميم وليس تطبيقًا، فأغلب الصفوف هنا عن ما يجب بناؤه وليس ما ينتقل.
| العنصر | ينتقل؟ | ملاحظات |
|---|---|---|
| الكود | لا يوجد | Figma لا يحتوي كود موقعك. أوترا تبني الكود من التصميم المستورد. |
| التصميم | نعم | تستطيع أوترا استيراد تصاميم Figma لتُبنى صفحات مطابقة لها في التخطيط والألوان والخطوط والمسافات. |
| بيانات قاعدة البيانات | لا يوجد | البيانات التي في التصميم أمثلة. القاعدة تُبنى في أوترا، وتنقل إليها بياناتك الحقيقية إن وجدت في ملف. |
| حسابات المستخدمين | لا يوجد | شاشة الدخول المرسومة تتحول إلى دخول حقيقي حين تطلبه. |
| النطاق | جديد أو قائم | تربط نطاقك في أوترا، أو تنقل نطاق موقعك القديم إن كان التصميم إعادة تصميم لموقع موجود. |
| الروابط والسيو | يُخطط له | إن كان التصميم يستبدل موقعًا قائمًا، طابق المسارات القديمة أو حوّلها. |
| المدفوعات | تُبنى | زر «ادفع الآن» في التصميم يحتاج ربطًا ببوابة دفع ومفاتيحها. |
| الأسرار ومفاتيح API | لا يوجد | تضيفها في «البيانات السرية» حين تربط خدمة. |
خطوات الانتقال
رتّب الملف: إطار لكل صفحة
اجعل كل صفحة في إطار مستقل باسم واضح مثل «الرئيسية» و«الخدمات» و«احجز استشارة». الإطارات المكررة أو التجارب القديمة انقلها إلى صفحة منفصلة في الملف حتى لا تُبنى بالخطأ.
سمِّ الطبقات المهمة
الأزرار والنماذج والقوائم تحتاج أسماء تشرح وظيفتها، مثل «زر الحجز» و«نموذج التواصل». الاسم يساعد على فهم ما يجب أن يفعله العنصر، لا شكله فقط.
صمّم نسخة الجوال
معظم زوار المواقع السعودية من الجوال. إن لم تكن نسخة الجوال مرسومة، ستُبنى الصفحات متجاوبة بافتراضات معقولة، لكن تصميمك الخاص للجوال يعطي نتيجة أدق.
استخدم نصوصًا عربية حقيقية
النص العربي الحقيقي يكشف مشاكل الاتجاه والطول مبكرًا. نص تجريبي لاتيني يخفي هذه المشاكل حتى البناء.
استورد التصميم في أوترا
أنشئ مشروعًا جديدًا في أوترا وابدأ من تصميم Figma مستورد، فتُبنى الصفحات مطابقة له في التخطيط والألوان والخطوط والمسافات.
اطلب الوظائف خلف الشاشات
صِف ما يفعله كل جزء: نموذج الاستشارة يحفظ في قاعدة بيانات ويرسل تنبيهًا، وصفحة المحامين تُدار من لوحة.
راجع على المعاينة وصحّح
افتح رابط المعاينة على الجوال والكمبيوتر، وقارن كل صفحة بالإطار المقابل، وصحّح الفروق بالطلب أو بالتعديل المرئي بالنقر على العنصر.
انشر على النطاق
اضغط «نشر» واربط نطاق العميل من «نطاق مخصّص».
استوردت تصميم موقع مكتب محاماة من Figma. ابنِ الصفحات مطابقة للتصميم، ثم اجعل نموذج «احجز استشارة» يحفظ الاسم والجوال ونوع القضية في قاعدة بيانات، وأضف لوحة للمكتب تعرض الطلبات الجديدة.
إن كان فريقك يعتمد الشاشات داخل «أوترا ديزاين» بدل Figma، فتُبنى الصفحات مطابقة لها بالطريقة نفسها.
أول 3 أشياء بعد الانتقال
- ضع كل صفحة بجانب إطارها في Figma وراجع المسافات والخطوط والألوان، ودوّن الفروق في طلب واحد.
- جرّب كل زر ونموذج، فالتصميم يرسم الشكل فقط، والتأكد أن «إرسال» يحفظ فعلًا مسؤوليتك الآن.
- اكتب عنوانًا ووصفًا لكل صفحة لمحركات البحث، فهذه لا تظهر في Figma عادةً.
حافظ على ترتيبك في البحث
إذا كان التصميم لموقع جديد، فلا ترتيب سابق تخسره، والمطلوب أن تبدأ صحيحًا: مسارات عربية أو إنجليزية واضحة، وعنوان رئيسي واحد لكل صفحة، ونص حقيقي وليس صورًا للنص.
أما إن كان التصميم إعادة تصميم لموقع قائم يجلب زيارات، فاكتب قائمة بمسارات الموقع القديم قبل البناء، واطلب أن تحمل الصفحات الجديدة المسارات نفسها. أي صفحة حذفتها أو دمجتها تحتاج تحويل 301 إلى أقرب صفحة لها في الموقع الجديد.
- لا تحوّل النصوص إلى صور في التصميم، فمحركات البحث تقرأ النص لا الصورة.
- أعط كل صورة وصفًا بديلًا يشرح محتواها.
- انقل النطاق القديم إلى أوترا بعد اكتمال المراجعة، لا قبلها.