كيفية تصدير Adobe XD إلى HTML

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

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

يمكنك إما اختيار حفظها كملف XD ​​وتأمل أن يكون لدى المطور بالفعل البرنامج المثبت على نظامه أو تصدير كل لوحة فنية كفرد بي إن جي الملف الذي قد يكون غير مريح بعض الشيء للاستخدام.

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

ملحوظة: لا ينبغي بأي حال من الأحوال معاملة ملف HTML الذي تم إنشاؤه باستخدام هذه الطريقة كقاعدة لصفحة ويب كاملة. هذه الطريقة ليست سوى وسيلة لمشاركة تصميماتك بسهولة مع مطور وليس عملية تطوير موقع ويب وظيفية.

قم بتصدير ملفات Adobe XD إلى HTML باستخدام الإضافات

الآن وقد توقفنا عن ذلك ، ما عليك سوى اتباع هذه الخطوات البسيطة لتنزيل المكون الإضافي المطلوب ثم تصدير ملفات Adobe XD إلى HTML:

الخطوة 1: انقر فوق زر قائمة الهامبرغر في الزاوية اليسرى العليا من البرنامج.

الخطوة 2: قم بالتمرير لأسفل ثم انقر فوق خيار الإضافات. سيؤدي ذلك إلى فتح لوحة الإضافات الجديدة على يمين القائمة الرئيسية.

الخطوه 3: حدد خيار Discover Plugins من لوحة Plugins.

الخطوة الرابعة: في الصفحة التالية ، ابحث عن HTML ثم انقر على زر التثبيت بجوار المكون الإضافي Web Export.

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

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

الخطوة السادسة: انقر الآن على زر القائمة ، وانتقل إلى لوحة الإضافات ثم اختر خيار Export Artboard من إعدادات البرنامج المساعد Web Export الجديد.

من نفس النافذة ، يمكنك أيضًا اختيار تصدير ألواح رسم متعددة أو آخر لوح رسم قمت بتحريره.

الخطوة السابعة: في النافذة المنبثقة Export Artboard ، أضف اسمًا للملف ثم حدد المجلد الذي ترغب في حفظ الملف فيه بالنقر فوق رمز المجلد الصغير الموجود بجوار خيار تصدير المجلد.

الخطوة 8: الآن ، إذا كنت ترغب في إضافة برنامج نصي خارجي أو ورقة أنماط أو خطوط بديلة إلى الملف المُصدَّر ، يمكنك إضافة تلك الموجودة في نفس النافذة.

الخطوة 9: بعد ذلك ، يمكنك اختيار أبعاد ملف HTML الناتج عن طريق كتابة القيم في المساحة الفارغة بجوار خيار الحجم.

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

الخطوة 11: علاوة على ذلك ، يمكنك اختيار أي إعدادات إضافية مثل التنقل عبر لوحة المفاتيح والتحديث التلقائي وما إلى ذلك. عن طريق تحديد المربعات بجوار الخيارات.

الخطوة 12: بمجرد الانتهاء من جميع الإعدادات ، ما عليك سوى النقر على الزر الأزرق "تصدير" وتكون بذلك قد انتهيت. ستظهر لوحة الرسم الخاصة بك كملف HTML في مجلد الوجهة الذي حددته مسبقًا.

من النافذة نفسها ، ستتمكن أيضًا من نسخ CSS وترميز لوح الرسم الخاص بك إذا كنت تريد أيضًا مشاركة هذه المعلومات مع المطور الخاص بك.

مرة أخرى ، لاحظ أن HTML المُصدَّر لا يمكن بأي حال من الأحوال استخدامه لتطوير موقع إلكتروني يعمل بكامل طاقته. اعتبارًا من الآن ، لا توجد طريقة لنشر مشروع Adobe XD على الويب مباشرةً ، ووفقًا للعديد المناقشات على منتديات Adobe، لن يكون هناك واحد في أي وقت قريب.

Adobe XD هو مجرد أداة نماذج أولية تتيح لك إنشاء تصميم أولي بدون رمز. بمجرد أن يكون لديك تصميم جاهز ، يمكنك استخدام نظام أساسي مثل Dreamweaver لتحويل تصميمك إلى موقع ويب. ولكن من أجل ذلك ، ستحتاج إلى بعض الخبرة السابقة في تطوير الويب أو ستحتاج إلى توظيف شخص يفعل ذلك.

قم بتصدير ملف Adobe XD الخاص بك إلى HTML

الآن ، بعد أن عرفت كيفية تصدير ملف Adobe XD الخاص بك إلى HTML ، أنا متأكد من أنك ستتمكن بسهولة من مشاركة اللوحات الفنية الخاصة بك مع مطور أو عميل. ولن تقلق بشأن أي مشكلات في التوافق. قم بتثبيت المكون الإضافي على الفور وابدأ في تصدير اللوحات الفنية الخاصة بك بسهولة.

القادم: تحقق من المقالة التالية للحصول على اثنين من مواقع الويب التفاعلية المجانية التي يمكنك من خلالها تعلم كيفية كتابة التعليمات البرمجية لموقع ويب HTML الخاص بك وكتابته.