بهترین پلاگین های adobe xd – معرفی و دانلود 10 پلاگین قدرتمند در Adobe XD

بهترین پلاگین های adobe xd
  • پیش گفتار این مقاله
  • ایمان کمالی در 1399/09/07

در این مقاله 10 مورد از پلاگین های قدرتمند و شگفت انگیز Adobe XD را به شما معرفی می کنیم. این لیست شامل بهترین پلاگین های adobe xd از نظر کارایی است.

بهترین پلاگین های adobe xd

پلاگین ( plugin ) های موجود برای Adobe XD بسیار زیاد هستند! هر کدام از این پلاگین ها کاربرد خاص خود را دارند و در طراحی رابط و تجربه کاربری ( UI / UX ) به ما کمک می کنند. در این مقاله 10 مورد از بهترین پلاگین های Adobe XD را به شما معرفی می کنیم.

اگر با پلاگین و مفهوم آن و همچنین نصب پلاگین در Adobe XD آشنا نیستید پیشنهاد می کنیم مقاله آموزش نصب پلاگین در XD را مطالعه کنید.

اما برویم سراغ اصل مطلب؛ معرفی بهترین پلاگین های ادوبی اکس دی !

پلاگین UnDraw در Adobe XD؛ منبع کاملی از وکتور ها و تصاویر

پلاگین undraw در Adobe XD
افزونه Undraw در ادوبی اکس دی

در طراحی رابط کاربری ( UI ) و تجربه کاربری ( UX ) بسیار پیش می آید که از وکتور ها ( Vector ) و تصاویر استفاده کنیم.

افزونه Undraw منبعی کامل و حرفه ای برای تصاویر و وکتور ها است که به همراه امکاناتی که در اختیار ما قرار می دهد می تواند بهترین راه برای پیدا کردن تصاویر مورد نیازمان باشد!

در حالت عادی احتمالا مجبور هستید از وب سایت های رایگان دانلود تصویر مانند Freepik استفاده کنید و این کار زمان بر است و تمرکز شما را نیز به هم می زند، اما با استفاده از این پلاگین می توانید وکتور مورد نیازتان را در کمترین زمان ممکن پیدا کرده و استفاده کنید.

امکانات و چگونگی عملکرد پلاگین Undraw

ابتدا نگاهی کلی به لیست امکانات این پلاگین می اندازیم :

  • امکان جستجوی قوی
  • امکان انتخاب رنگ در زمان جستجو
  • امکان تغییر رنگ نتایج جستجو به صورت آنی!
  • امکان دانلود منابع از طریق وب سایت
  • ارائه فرمت های SVG و PNG

پس از نصب این افزونه می توانید از پنل آن در قسمت پلاگین عنوان مورد نظر خود را برای جستجو وارد کرده و رنگ بندی مناسب را انتخاب کنید.

خیلی سریع و راحت می توانید نتایج را در طرح خود استفاده کنید.

این پلاگین تا به امروز امتیاز بالایی را در لیست پلاگین های Adobe XD از آن خود کرده و کاربران بسیاری دارد.

برای نصب این پلاگین XD کافی است عبارت UnDraw را در پنل افزونه ها جستجو کرده و آن را نصب کنید.

برای مشاهده جزئیات بیشتر در مورد این پلاگین مقاله مربوط به آن یعنی معرفی UnDraw پلاگینی قدرتمند در Adobe xd را مطالعه کنید.

پلاگین UI Faces برای ایجاد آواتار های واقعی با چهره افراد در Adobe XD

پلاگین Adobe XD برای ایجاد آواتار UI faces
افزونه UI Faces در ادوبی اکس دی

حتما پیش از این در وب سایت ها یا اپلیکیشن های مختلف تصویر خودتان را آپلود کرده اید!

به این تصویر آواتار ( Avatar ) می گوییم. ( ربطی به فیلم آواتار ندارد 🙂 )

کاربر پس از ثبت نام در وب سایت معمولا می تواند تصویر خود را به عنوان آواتار آپلود کند، در تلگرام، اینستاگرام و یا بیت بنگ نیز این امکان برای شما وجود دارد.

در طراحی رابط کاربری ( UI ) خیلی از مواقع لازم است تا برای تصویر کاربران عکسی را انتخاب کنید و در طراحی خود از آن استفاده کنید.

این تصویر معمولا باید تصویر یک انسان باشد!

امکانات و چگونگی کارکرد پلاگین UI Faces

پلاگین UI Faces می تواند به صورت خود کار و با استفاده از تنظیماتی که شما می خواهید تصاویر مورد نظر را ایجاد کرده و بر روی المان های مشخص شده قرار دهد!

اما بپردازیم به لیست مهم ترین امکانات UI Faces :

  • امکان انتخاب جنسیت در زمان جستجو
  • فیلتر انتخاب رنگ مو در جستجو
  • فیلتر حالت چهره در جستجو
  • امکان ایجاد تصاویر غیر واقعی از چهره افراد با هوش مصنوعی
  • امکان چسباندن خودکار تصاویر بر روی المان های طراحی

همان طور که گفتیم این پلاگین ویژگی های فوق العاده ای برای جستجو دارد و کار را برای طراحی آواتار در UI بسیار آسان می کند.

برای نصب این افزونه در ادوبی اکس دی و در پنل پلاگین ها عبارت UI Faces را جستجو کنید.

همچنین برای مطالعه بیشتر در مورد این پلاگین مقاله آن را در بیت بنگ با عنوان طراحی آواتار دلخواه با پلاگین UI faces را مطالعه کنید.

پلاگین طراحی دیاگرام user flow یا جریان کاربر در Adobe XD

پلاگین Adobe xd برای user flow
افزونه user flow در ادوبی اکس دی

کار اصلی این پلاگین طراحی و اشتراک گذاری دیاگرام User Flow یا جریان کاربر است.

اگر با این مفهوم آشنا نیستید در ادامه به آن می پردازیم.

منظور از جریان کاربر یا User Flow چیست؟!

User Flow به مسیری گفته می شود که کاربر در وب سایت یا اپلیکیشن شما طی می کند تا عملیاتی را به انجام برساند.

برای مثال ثبت نام کاربر ابتدا با ورود به یکی از صفحات سایت، سپس فشردن دکمه ثبت نام و در نهایت پر کردن فرم ثبت نام و ورود به پنل انجام می شود.

این مسیر را می توان با استفاده از این پلاگین طراحی کرد و با همکاران و یا کارفرمای خود به اشتراک گذاشت.

پلاگین User Flow چگونه کار می کند؟

پلاگین طراحی جریان کاربری در Adobe XD
طراحی جریان کاربر در UI

این افزونه با ایجاد ارتباط میان Artboard ها و اجزای طراحی شده مسیر کاربر را مشخص می سازد.

به این شکل که فلش های رسم شده نشان دهنده مسیر یا مسیر هایی است که کاربر می تواند از طریق آن اِلِمان از آن ها عبور کند.

گاهی یک جز می تواند چند مسیر متفاوت را پیش روی کاربر بگذارد و گاهی ارتباط میان این مسیر ها کمی پیچیده تر می شود.

این افزونه از بهترین پلاگین های Adobe XD است، برای اطلاعات بیشتر در مورد این پلاگین پیشنهاد می کنیم مقاله طراحی و اشتراک گذاری دیاگرام UserFlow ( جریان کاربر ) در Adobe Xd را مطالعه کنید.

پلاگین مدیریت حساب دریبل ( Dribbble ) در Adobe XD

پلاگین dribbble در adobe xd
افزونه Dribbble در ادوبی اکس دی

دریبل ( Dribbble ) وب سایتی است برای به اشتراک گذری طرح های UI و UX که ورود به آن برای همه آزاد است اما برای انتشار طرح لازم است تا توسط یک طراح عضو دریبل دعوت شوید!

پس از دریافت دعوت نامه از یک طراح رابط یا تجربه کاربری می توانید کار های خود را در آن انتشار دهید.

پلاگین dribbble در Adobe XD برای انتشار سریع کار ها و اشتراک گذری آن ساخته شده است.

می توانید خیلی سریع و با تنظیمات درست تصویری از کار خود بر روی دریبل آپلود کنید بدون این که نیاز باشد از طریق سایت کاری انجام دهید.

پلاگین Dribbble چگونه کار می کند؟

پلاگین دریبل در ادوبی اکس دی
افزونه دریبل در XD

پس از دانلود و نصب این پلاگین در ادوبی اکس دی کافی است ابتدا وارد اکانت خود شوید.

نام کاربری و رمز عبور حساب کاربری خود را در دریبل وارد کنید.

حالا می توانید پس از اتمام کار، وقتی می خواهید طرح UI را در دریبل منتشر کنید با استفاده از این پلاگین که از پیش در آن Login کرده اید طرح را منتشر کنید.

برای مطالعه بیشتر در مورد این پلاگین می توانید سری بزنید به مقاله پلاگین Dribbble در Adobe XD و آن را بررسی کنید.

پلاگین Custom Export در Adobe XD

پلاگین custom export در Adobe XD
افزونه خروجی گرفتن در ادوبی اکس دی

گاهی لازم است تا از اجزای مختلف آرت بورت ( Artboard ) خروجی بگیریم!

اشکال مختلف، تصاویر و وکتور ها و یا حتی از خود ArtBoard می توانیم به صورت فایل با فرمت های مختلف خروجی بگیریم. پلاگین Custom Export یکی از بهترین گزینه ها برای خروجی گرفتن از اجزای طرح UI شما است.

این افزونه می تواند در فرمت های زیر به ما خروجی دهد :

  • PNG
  • SVG
  • JPG
  • PDF

چطور از افزونه Custom Export استفاده کنیم؟!

برای استفاده از این افزونه ابتدا آن را از طریق پنل افزونه های XD نصب کنید.

پس از نصب تنها کافی است لایه ( Layer ) یا لایه های مورد نظر خود را انتخاب کنید. برای انتخاب چند لایه در XD کافی است دکمه shift را نگه داشته و روی هر لایه ای که می خواهیم انتخاب شود کلیک کنیم.

سپس از قسمت پلاگین ها در ادوبی اکس دی گزینه Custom Export را انتخاب کنید.

در آخر طبق تصویر زیر می توانید با اندازه و فرمت دلخواه از مواردی که انتخاب کردید خروجی بگیرید.

پلاگین خروجی گرفتن از Adobe XD
خروجی گرفتن از Adobe XD

فراموش نکنید که در حالتی که Format را SVG انتخاب کردید نمی توانید Scale را انتخاب کنید.

پلاگین Adobe XD رسم انواع چارت و نمودار Vizzy Charts

پلاگین رسم نمودار در Adobe XD
رسم نمودار در ادوبی اکس دی

در طراحی رابط کاربری ( UI ) ممکن است بخواهیم از انواع نمودار ها استفاده کنیم.

Vizzy Charts جز بهترین پلاگین های Adobe XD است و برای رسم انواع نمودار ها به شما کمک می کند!

با استفاده از این پلاگین می توانید چارت های زیر را رسم کنید :

  • نمودار های خطی
  • نمودار های مستطیلی
  • نموداره ای دایره ای
  • و …

داستان این پلاگین از این قرار است که دو دوست که به صورت هر روزه با داده ها سر و کار داشتند و از طرفی برای نمایش در طراحی های UI خود باید از آن داده ها استفاده می کردند ابزار مناسبی برای این کار در Adobe XD نداشتند!

بنابراین با شرکت Adobe تماس گرفته و در مورد این مشکل راهنمایی می خواهند، ادوبی در پاسخ به این دو دوست می گوید آیا دوست دارید پلاگین خودتون رو برای این کار بنویسید؟! و آن ها قبول می کنند!

چطور با Vizzy Charts در XD نمودار رسم کنیم؟

برای رسم نمودار در ادوبی اکس دی با این پلاگین دو راه وجود دارد :

  • استفاده از داده های واقعی
  • استفاده از داده های تصادفی

برای استفاده از داده های واقعی در رسم نمودار می توانید داده ها در Excel نوشته و سپس با فرمت CSV وارد نمودار خود کنید.

فرمت CSV را می توانید از طریق نرم افزار مایکروسافت Excel ایجاد کنید.

برای رسم نمودار نیز، برای مثال ابتدا با استفاده از ابزار رسم مستطیل، یک چهار ضلعی ایجاد کنید و سپس نوع نمودار خود را انتخاب کنید.

حالا می توانید از طریق تنظیمات پلاگین، داده ها را وارد کرده و یا به صورت دستی آن را تغییر دهید.

پلاگین Color Ranger برای ویرایش حرفه ای رنگ ها در Adobe XD

پلاگین رنگ بندی در Adobe XD
تنظیم رنگ بندی در ادوبی اکس دی

پس از تکمیل یک طرح رابط کاربری ممکن است بخواهیم یک نسخه Dark Mode نیز از آن داشته باشیم، و یا بخواهیم رنگ بندی بخشی از طرح را تغییر دهیم.

پلاگین Color Ranger به ما کمک می کند تا بتوانیم رنگ بندی طرح UI خود را تنظیم کنید کنیم!

اگر بخواهیم به صورت دستی رنگ بندی طرح را تغییر دهیم کاری است زمان بر و پر دردسر در حالی که با استفاده از این افزونه Adobe Xd می توانیم تنها با چند کلیک و به راحتی این کار را انجام دهیم.

تغییر رنگ بندی در این پلاگین می تواند بر روی یک جز یا یک Artboard و یا حتی چند Artboard به صورت هم زمان باشد.

پلاگین Color Ranger به چه شکل کار می کند؟

یکی دیگر از بهترین پلاگین های Adobee XD افزونه Color Ranger است.

رابط کاربری این پلاگین بسیار ساده است و می توانید رنگ بندی اجزا را در سه بخش کلی به صورت جداگانه تنظیم کنید :

  • نوشته ها ( Text )
  • اشکال ( Shapes )
  • کادر ها ( Borders )

در ویدئو زیر نمونه ای از ایجاد Dark Mode را مشاهده می کنید.

افزونه ColoeRanger در ادوبی اکس دی

پلاگین طرحی UI با داده های واقعی Google Sheets در Adobe XD

پلاگین Google Sheets در ADobe XD
استفاده از داده های واقعی در طراحی رابط کاربری

تصور کنید برای UI یک بلاگ احتیاج دارید چند ردیف Card طراحی و ایجاد کنید.

هر کدام از این Card ها نیز شامل بخش های زیر هستند :

  • تصویر
  • عنوان نوشته
  • نام نویسنده
  • زمان انتشار
  • تعداد بازدید
  • امتیاز نوشته

اگر بخواهیم هر کارت در این ردیف ها متفاوت باشد لازم است تا برای هر کدام به صورت دستی عنوان، تصویر و … را وارد کرده و تنظیم کنیم!

با استفاده از افزونه Google Sheets می توانیم به راحتی اطلاعات لازم را برای هر کارت در یک فایل CSV وارد کرده و سپس در طرح خود از آن استفاده کنیم.

چطور از پلاگین Google Sheets استفاده کنیم؟!

استفاده از این افزونه بسیار ساده است! تنها کافی است طرح اولیه را از چیزی که می خواهید داده ها بر روی آن قرار بگیرد طراحی کنید.

سپس فایل CSV حاوی داده ها را فراخوانی ( import ) کنید.

اگر در این داده ها آدرس URL تصویر نیز وجود داشته باشد پلاگین به صورت خودکار آن را دانلود کرده و در طرح قرار می دهد.

ویدئو زیر مثالی ساده برای استفاده از این پلاگین است.

استفاده از افزونه Google sheets در XD

این افزونه جر بهترین پلاگین های Adobe XD است، برای توضیحات بیشتر می توانید مقاله پلاگین Google Sheets در XD را مطالعه کنید.

چند زبانه کردن طرح UI در Adobe XD با پلاگین Localisation

پلاگین Localisation در Adobe XD
افزونه Localisation در ادوبی اکس دی

چند زبانه بودن در وب سایت ها و اپلیکیشن ها بسیار معمول است!

وقتی طرح رابط کاربری ( UI ) شما با چند زبان مختلف نمایش داده شود ظاهر آن نیز متفاوت خواهد بود، برای مثال اگر بخواهید کلمات و جملات انگلیسی را در یک طرح ( UI ) که برای زبان انگلیسی طراحی شده با کلمات و جملات فارسی جایگزین کنید معمولا نوشته ها با طرح همخوانی ندارد.

پلاگین Localisation به شما کمک می کند تا بتوانید به صورت پیشفرض نوشته ها را به شکلی که مانند یک زبان غیر بومی است نمایش دهید و طرح را متناسب با آن تغییر دهید.

این افزونه جز بهترین پلاگین های Adobe XD برای این کار یعنی چند زبانه کردن طرح است.

چگونه از پلاگین Localisation استفاده کنیم؟

در ویدئو زیر مثالی برای استفاده از این پلاگین آورده این :

افزونه Localisation در XD

منابع کاربردی طراحی UI ( رابط کاربری ) برای Adobe XD با پلاگین Icon Drop

پلاگین Icon Drop در Adobe XD
افزونه Icon Drop در ادوبی اکس دی

یکی دیگر از کاربردی ترین و بهترین پلاگین های Adobe XD افزونه Icon Drop است.

این افزونه منبعی عالی از icon ( آیکون ) ها، تصاویر و وکتور ها است که می توانید به صورت رایگان در طرح UI خود مورد استفاده قرار دهید.

منابعی که در این پلاگین در اختیار دارید همان طور که گفتیم شامل موارد زیر است :

  • تصاویر معمولی
  • وکتور ها
  • آیکون ها

افزونه Icon Drop چطور کار می کند؟

در این پلاگین می توانیم به صورت حرفه ای و با فیلتر های مناسب تصویر یا آیکون مورد نظر خودمان را پیدا کنیم.

ویدئو زیر مثالی برای استفاده از این پلاگین است.

افزونه Icon Drop در ادوبی اکس دی

برای جستجو می توانید طراح مورد علاقه خود را انتخاب کنید و یا استایل ( Style ) طرح ها را انتخاب کنید.

برای مطالعه بیشتر این پلاگین می توانید مقاله آن را در پست معرفی و دانلود پلاگین Icon Drop در Adobe XD را مشاهده کنید.

دانلود پلاگین Icon Drop در Adobe XD

برای دانلود و استفاده از این پلاگین می توانید به لینک دانلود Icon Drop مراجعه کنید.

پس از دانلود می توانید از پنل Plugins در ادوبی اکس دی از آن استفاده کنید.