از مجموعه ۳۰ نکته و ترفند که آرزو میکردید ای کاش زودتر در رابطه با Adobe XD میدونستید! قسمت دوم

ادوبی xd

از مجموعه ۳۰ نکته و ترفند که آرزو میکردید ای کاش زودتر در رابطه با Adobe XD میدونستید! قسمت دوم

از مجموعه ۳۰ نکته و ترفند که آرزو میکردید ای کاش زودتر در رابطه با Adobe XD میدونستید! قسمت دوم 1350 500 حنانه روشنی

اولین ترفند ادوبی XD را در قسمت اول از مجموعه مقالات ترفندها و نکته های Adobe Xd به شما معرفی کردیم. در این مطلب ترفندهای دوم تا چهاردهم را یاد می گیرید و مابقی آن ها را در قسمت سوم (آخر) این مقالات خواهید خواند.

ترفند دوم؛ بردارها را از فتوشاپ وارد کنید

اگر می خواهید تصاویر برداری را از فتوشاپ به ادوبی XD انتقال دهید، محدوده مورد نظر خود را انتخاب کنید سپس همزمان کلیدهای میانبر کنترل (Ctrl) + شیفت (C) + (Shift) را بگیرید. (این عملیات، تمام اجزاء محیط انتخاب شده که قابل رویت است را با هم کپی می‌کند، حتی اگر لایه مورد نظر را انتخاب نکرده باشید). سپس در Adobe XD کلیدهای (Ctrl) + (V) را بگیرید تا تصویر مورد نظر شما به صفحه منتقل شود.

با این حال می توانید با کلیک راست روی لایه مورد نظر (از نوار ابزار لایه ها)، انتخاب گزینه «Copy SVG» و paste کردن آن در Adobe XD مشابه همین عملیات را انجام دهید.

ادوبی xd

ترفند سوم؛ ۱۰ پیکسل شبکه 👉 ۱۰ پیکسل ناج nudge

در ادوبی XD می توانید با استفاده از کلیدهای میانبر کنترل (Ctrl)+’ ، شبکه (Grid) را برای آرتبورد (Artboard) فعال کنید. به طور پیش فرض، ابعاد شبکه روی ۸ پیکسل تنظیم شده است. بنابراین اگر بخواهیم با استفاده از کلیدهای Shift + فلش چپ / راست یا بالا / پایین، عناصر را در گریدهای ۸ پیکسل حرکت دهیم به درستی فیت نمی‌شوند. برای رفع این مشکل می توانید روی نام آرتبورد Artboard کلیک کنید تا به حالت انتخاب در بیاید، سپس مقدار پیش فرض ۸ پیکسل را به ۱۰ پیکسل تغییر دهید تا حرکت عناصر با خط های شبکه مطابقت داشته باشد. این مقدار را می توانید با کلیک کردن روی دکمه Make Default به عنوان پیش فرض برای پروژه های بعدی تعریف کنید.

پی نوشت: “ناج nudge “ واحد هر حرکت در ادوبی فتوشاپ، ادوبی XD یا… است. یعنی اگر دکمه Shift را  بگیریم و کلیدهای فلش چپ / راست یا بالا / پایین را فشار دهیم، یک ناج انجام دادیم.

ادوبی xd

ترفند چهارم؛ Guideline آری یا نه! 🤔

در ادوبی xd ، خطوط راهنما یا همان Guideline ها مانند فتوشاپ وجود ندارند، ولی هنگام درگ کردن، راهنماهای هوشمندی ظاهر می شوند و به مکان‌یابی بهتر اجزا کمک می‌کنند. اما گاهی این رفتار پیش فرض ممکن است چسبیدن یا چفت شدن ناخواسته ایجاد کند. برای غیرفعال کردن موقتی راهنماهای هوشمند، دکمه Cmd (مک) یا Control (ویندوز) را هنگام درگ کردن فشار دهید.

ادوبی xd

ترفند پنجم؛ راهنماهای استایل برای نجات!

بهتر است برای راهنماهای استایل، Artboard های جداگانه ایجاد کنید. جایی که تمام مشخصات هویتی مانند رنگ، تایپوگرافی، استایل‌های مشترک و کنترل هایی مانند دکمه‌ها، ورودی ها، و آیکون های مشترک را قرار می‌دهید.

ادوبی xd

ترفند ششم؛ سبک های تایپ و استفاده مجدد از استایل تایپ🔥

برای تایپ کردن یک متن عمودی می‌توانید از سایت gridlover.net استفاده کنید. برای استفاده مجدد از استایل های متنی که قبلا در Adobe XD تایپ کرده بودید به شکل زیر است:
متنی که می‌خواهید به عنوان مرجع برای استایل جدید استفاده کنید را انتخاب کنید، سپس یک منطقه تایپ جدید ایجاد و متن مورد را نظر را تایپ کنید؛ می‌بینید که استایل متن انتخاب شده قبلی را گرفته است.

ادوبی xd

 

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

 

ترفند هفتم؛ فوت و فن شیرین سایز فونت 🍭

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

ترفند هشتم؛ زیرمجموعه استایل متن

هر فیلد متن شامل ساب‌استایل (زیرمجوعه استایل) هایی با ویژگی‌های مختلفی مانند رنگ و وزن است.

ادوبی xd

ترفند نهم؛ ایجاد متن با چسباندن مستقیم متن

متن دلخواه خود را کپی و آن را مستقیماً در Adobe XD پیست کنید تا فیلد تکست به صورت اتوماتیک ایجاد شود.

ادوبی xd

ترفند دهم؛ ریست کردن ارتفاع خط با عدد صفر

بعد از آزمایش ارتفاع بین خطوط متن، ممکن است بخواهید به مقادیر پیش‌فرض برگردید. نیازی نیست حدس بزنید، فقط برای مقدار ارتفاع ورودی عدد صفر را قرار دهید تا ریست شود.

ادوبی xd

ترفند یازدهم؛ لمس مقادیر رنگ‌ها

در ادوبی xd از دکمه شیفت و جهت های راست یا چپ کیبورد برای تغییر مقادیر در ورودی‌هایی مانند آلفا یا رنگ استفاده کنید.

ادوبی xd

ترفند دوازدهم؛ مقدار رنگ #HEX 👨🏼👨🏾👨🏿

در باکس انتخاب رنگ، از مقادیر هگزا دسیمال (در مبنای ۱۶) برای انتخاب رنگ دقیق‌تر استفاده کنید. می‌توانید یک حرف، عدد یا ترکیبی از آن‌ها را برای به دست آوردن نتایج مختلف استفاده کنید.

ادوبی xd

ترفند سیزدهم؛ آیکون های ساده در XD

گاهی اوقات ساده تر و سریع تر است که از ابزارهای دیفالت Adobe XD مثل شکل‌ها و قلم ها و عملگرهای بولین روی شکل‌ها استفاده کنید و آیکون های ساده رسم کنید.

ادوبی xd

ترفند چهاردهم؛ تبدیل متن به اشکال

برای تبدیل متن به شکل و ویرایش نقاط برداری هر حرف، از میانبر Cmd/Control + 8 استفاده کنید.

ادوبی xd

قسمت آخر این مطلب را از اینجا بخوانید.

منبع: https://medium.com

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

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

آموزش Sass (قسمت اول) آموزش Sass عنوان مقاله پیش روی شما است  که به اصول اولیه Sass، پیش نیازهای آن، معایب و مزایای Sass پرداخته است و در مقالات بعدی تکمیل خواهد شد. SASS م...
استفاده از CSS Grid برای پیاده سازی صفحات وب... CSS Grid با توجه به ماهیت چهار گوش صفحات وب در تعادل و طراحی صفحات وب بسیار موثر و کاربردی است. یکی از مهم ترین اصول در طراحی، وجود تعادل است. تعادل ب...
مدل شی گرای سند (Document Object Model)... امروز قصد داریم راجع به یکی از مفاهیم کلیدی و پایه ای وب یعنی DOM بنویسیم. پس چه شما در جاوا اسکریپت یک تازه کار باشید یا اینکه قبلا با آن کار کرده با...

10 × one =