التصميم والبرمجة

يمرّ المبرمج بعدة مراحل وخطوات أساسية للوصول إلى برمجة نفس التصميم الموجود في Adobe Xd، بداية بتصدير الأصول كالصور، الأيقونات، والخطوط المستخدمة في التصميم ويمكنه كذلك تصدير الأصول كصور PNG أو SVG أو استخدام ميزات CSS و HTML المدمجة في XD للحصول على بعض العناصر القابلة للاستخدام مباشرة.

ثم إنشاء هيكل المشروع من خلال إنشاء مشروع جديد باستخدام الأدوات المناسبة فإذا كان يعمل على موقع ويب مثلا، يمكنه البدء بإنشاء ملفات HTML و CSS و JavaScript وهكذا.

أما لو كنت تستخدم Figma فيمكنك الاستفادة من ميزة Dev Mode وإضافة Figma for VS Code يمكنك الاطلاع أكثر من هنا:

يتم تسليم ملفات التصميم إلى المبرمج ويقوم هو بتصفحها على المنصة الخاصة بتلك الملفات سواء Figma أو Adobe XD، ويستطيع من خلالها معرفة الألوان والمسافات واستخراج الـ Assests أيضًا مثل الصور بالجودة الكاملة.

ويتم توضيح التصميم من خلال الـ User flows أي رحلة المستخدم في الموقع أو التطبيق بدايًة من الصفحة الرئيسية أو صفحة تسجيل الدخول.

بالطبع عليه هو معرفة كيفية التعامل مع تلك الملفات فهو مطور واجهة أمامية بطبيعة الحال.

لتستوعب الأمر بشكل عملي ابحث على اليوتيوب عن design handover to developer.

ومن الأفضل التنسيق مع المطور من البداية أي إجراء إجتماع بين المصمم والمطور لمناقشة الأمور من البداية وليس في  النهاية.