10 إضافات لبرنامج Adobe XD على الجميع استخدامها

10 إضافات لبرنامج Adobe XD على الجميع استخدامها

 يعتبر برنامج Adobe XD أحد أفضل البرامج المتخصصة في صناعة نماذج UI/UX متكاملة واحترافية. كما يحمل اسم البرنامج فهو تابعة لشركة Adobe الشركة المالكة لبرمجيات مثل Photoshop و Illustrator. يتيح لك برنامج Adobe XD بعد تنصيبه، من البدء في تصميم واجهات المواقع والتطبيقات والصفحات بحرية، عبر مجموعة من الأدوات المساعدة. وكذلك تطبيق بعض الـ Animations و حتى Transistions بين الـ Frames على البرنامج. 

10 إضافات لبرنامج Adobe XD على الجميع استخدامها

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

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

1 - إضافة Icon 4 Design 

صدقني، لا أعرف كيف سأعيش بدون هذه الإضافة، كوني شخص يصمم بين الحين والآخر على برنامج Adobe XD، فإن هذه الإضافة وفرت علي الكثير. استخدام الأيقونات في التصميمات أمر روتيني نوعا ما، ستحتاجها في مظعم الأحيان. في البداية ربما ستستخدم منصات خارجية لتحميل أيقونات وتضمينها، لكن الأمر متعب، وبطيئ إلى حد ما. إضافة Icon 4 Design تأتي لتوفر لك محرك بحث سريع عن الأيقونات، ثم تظهر لك خيارات مختلفة، فور النقر على أي خيار، ستظهر لك الأيقونة في الـ Artboard. ولأنها Vector، سيمكنك تعديل حجمها وحتى شكلها، إلى جانب الألوان والـ Borders او الـ Strokes والمزيد. 

اقرأ أيضا: 5 أسباب جعلتني اسقط في حب برنامج Adobe XD أشاركها معك الآن

2 - إضافة Pexels 

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

3 - إضافة Advanced Export 

إن الهدف من برنامج Adobe XD هو إمكانية صناعة مجموعة من نماذج التصميمات UI/UX من أجل تطويرها لاحقا سواء على شكل مواقع للويب، او على شكل تطبيق للموبايل. بعد الإنتهاء من التصميم، يتم تكليف المطور بمحاكاة الشكل لاحقا من أجل البدء بالعمل به. لكن، إن كنت مطور Front End وتصمم تصميماتك بنفسك وتطورها بنفسك، فستحتاج لإضافة Advanced Export. تقوم هذه الإضافة باستخراج المشروع الذي قمت بتصميمه إلى أكواد HTML/CSS جاهزة من حيث الإستخدام. بمعنى بدل إعادة تصميمه من الصفر، يمكنك استخراج الأكواد مباشرة من التصميم. 

اقرأ أيضا: أفضل المنصات البديلة لبرنامج Adobe XD لصناعة نماذج UI/UX

4 - إضافتي UI Faces و User Profile 

سنقوم بتجميع إضافتين في فقرة واحدة، وذلك لتشابههما الكبير، وتوفيرهما لنفس الخدمة. تستطيع الإضافتين إضافة صور مستخدمين (Profiles) للـ Shapes او الأشكال التي قمت بتصميمها. يمكنك استخدامها دائما من أجل إضافة صور مستخدمين بشكل تلقائي وبسهولة. بافتراض أنك تطور صفحة ويب لمنصة اجتماعية، ستحتاج لإدراج صور مستخدمين مختلفة من أجل جلب بعض الواقعية عليها، لذا لتجنب عناء البحث، قم باستخدام احدى الإضافتين لملأ صور البروفايل بشكل تلقائي. 

5 - إضافة Lorem Ipsum 

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

اقرأ أيضا: 5 برامج تساعدك على تصميم UI/UX إحترافي قبل تطويره برمجياً

6 - إضافة Mockplus

حين تقوم بصناعة تصميمك الخاص، فعليك استعراضه للعميل أليس كذلك؟ سواء كان تصميم Adobe XD او تصميم على فوتوشوب او Illustrator وغيرهم، فإنه من الضروري استعراض تصميمك بشكل أنيق في النهاية. لهذا يوجد الـ Mockups، وهي عبارة قوالب جاهزة يمكنك استخدامها من أجل تركيب التصميم خاصتك واستعراضه بشكل أنيق. إلا أن فكرة أخذ التصميم في Adobe XD ثم إدماجه في Mockup قد تحتاج الكثير من العمل. فاستخدم إذن إضافة Mockuplus، إضافة تستطيع أن تقوم بدمج التصميم خاصتك في Mockups متعددة. استخدام الإضافة قد يكون صعبا قليلا، فاستخدم الفيديو التالي لإرشادك للطريقة الصحيحة لاستخدام الإضافة. 


7 - إضافة Color Designer 

الحصول على ألوان متناسقة من أجل استخدامها في تصميماتك أمر قد يجده الكثيرون صعب، لذلك يمكن الإستعانة بمواقع مثل Colorhunt مثلا أو Material Palette . لكن نحن في رحلتنا داخل Adobe XD، نحاول تسهيل الأمر أكثر، وجعل كل استخداماتنا داخل البرنامج دون الحاجة إلى أي نوع من الخدمات الخارجية. لذلك سنقترح عليك إضافة Color Designer. 
هي إضافة تستعرض عليك حزمة ألوان مختلفة (Color Palette) مع طرح كل التدرجات الممكنة للألوان التي يمكنك استخدامها. أضف الألوان التي تريد إلى حزمة الألوان التي ستستخدمها في المشروع (Library) من أجل تطبيق استخدامها مباشرة. 

8 - إضافة UnDraw 

موقع UnDraw بشكل عام، هو موقع ويب متخصص يطرح مجموعة من الرسومات (Illustrations) مفتوحة المصدر والمجانية من أجل استخدامها سواء في مشاريع التصميم، او مشاريع وصفحات الويب. وبالإعتماد على الإضافة الخاصة بالمنصة على Adobe XD سيمكنك أيضا استخدامها الآن في مشاريع الـ UI/UX خاصتك. 
النقر على الإضافة سيجلب لك كل الـ Illustrations المتاحة في المنصة، يمكنك البحث عن أي نوع لها ثم إضافتها مباشرة للمشروع، ولأنها مفتوحة المصدر فأنت قادر على تعديل أي جزء من الصورة، سواء الألوان أو الحجم او التشكيل، يمكنك التلاعب بها كما تريد. 

9 - إضافة Wireframer 

10 إضافات لبرنامج Adobe XD على الجميع استخدامها


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

اقرأ أيضا: ما هو الـ UX Design ؟

10 - Fancy Maps 

ثم نختم معك بإضافة Fancy Maps، قد لا تجلب الكثير فعليا، لكنها تبقى إضافة مميزة ستسهل عليك العمل أثناء بناء UI/UX لمواقع الويب. تجلب لك الإضافة مجموعة نماذج لخرائط (Maps) يمكنك إضافتها في مشروعك الخاص. لنفترض أنك في صدد صناعة صفحة " اتصل بنا " و تريد إضافة جزء من خريطة كنموذج للمكان الجغرافي. قد يبدو الأمر صعبا، او سيأخذ بعض الوقت. استخدام إضافة Fancy Maps تسهل عليك الأمر، حتى أنها تجلب أنماط خرائط كثيرة و متعددة يمكنك استخدامها.