توی این قسمت از آموزش جامع فیگما، قراره با هم ابزار فوق‌العاده Pen رو یاد بگیریم. این ابزار برای طراحی‌های خلاقانه و دقیق خیلی کاربردیه و اگه بلدش باشید، میتونید اشکال و طرح‌های پیچیده‌ای رو به‌راحتی بسازید. من همه‌چیز رو قدم‌به‌قدم و با زبون ساده توضیح می‌دم تا راحت یاد بگیرید.
در این آموزش چه چیزهایی یاد میگیرید؟
بیا یه نگاه سریع به مباحثی در این آموزش بندازیم و بعد بریم سراغ جزئیات:
- دلیل استفاده از ابزار Pen در فیگما و مزایای آن
- نحوه انتخاب و فعال‌سازی ابزار Pen
- روش پر کردن اشکال Pen با رنگ
- نحوه ویرایش اشکال ایجاد شده با Pen
- روش افزودن حاشیه (Stroke) به خطوط Pen
- نحوه نرم کردن و خمیده کردن نقاط Pen
- تنظیم دقیق خطوط خمیده Pen
- نحوه افزودن نقاط جدید به خطوط Pen
- روش حذف نقاط اضافی Pen
- نحوه خم و گرد کردن دقیق نقاط Pen
- نحوه ویرایش اشکال دیگر فیگما با ابزار Pen
(برای دیدن این ویدیو باید VPN شما روشن باشد. بعد از روشن کردن VPN یا فیلترشکن، بر روی لینک زیر بزنید و در یوتیوب ویدیو را تماشا کنید)
چرا باید از ابزار Pen در فیگما استفاده کنیم؟
ابزار Pen تو فیگما مثل یه مداد جادوییه! با این ابزار میتونید:
- اشکال سفارشی بسازید: هر شکلی که تو ذهنتون هست رو بکشید، از لوگوهای خاص تا آیکون‌های منحصربه‌فرد.
- دقت بالا داشته باشید: برعکس اشکال آماده، با Pen میتونید هر نقطه و خطی رو دقیقاً همون‌جایی بذارید که می‌خواید.
- ویرایش راحت: بعد از کشیدن، میتونید به‌راحتی نقاط و خطوط رو جابه‌جا کنید و شکلتون رو تغییر بدید.
- اشکال دیگه فیگما رو هم با ابزار پن میتونید ویرایش کنید.
خلاصه، اگه می‌خواید طراحی‌هاتون رو به سطح بالاتری ببرید، Pen بهترین دوستتونه!
چطور ابزار Pen در فیگما را انتخاب و با آن کار کنیم؟
برای شروع کار با Pen:
- انتخاب ابزار Pen: توی نوار ابزار سمت چپ، آیکون قلم (Pen) رو پیدا کنید و روش کلیک کنید (یا کلید P رو بزنید).
- کشیدن خطوط: روی صفحه کلیک کنید تا یه نقطه بذارید، بعد به جای دیگه کلیک کنید تا یه خط بینشون کشیده بشه. هر کلیک یه نقطه جدید اضافه می‌کنه.
- بستن شکل: اگه می‌خواید شکلتون بسته بشه (مثلاً یه چندضلعی)، روی نقطه اول دوباره کلیک کنید.
به همین راحتی میتونید اشکال مختلف بسازید!
چطور داخل شکلی که با ابزار Pen ایجاد کردیم، با رنگ پر کنیم؟
برای پر کردن شکل با رنگ:
- انتخاب شکل: شکلی که با Pen کشیدید رو انتخاب کنید.
- فعال کردن Fill: توی پنل سمت راست (Properties Panel)، بخش Fill رو پیدا کنید و روی مربع رنگی کنارش کلیک کنید.
- انتخاب رنگ: رنگ دلخواهتون رو انتخاب کنید و ببینید که شکلتون پر می‌شه.
نکته: اگه شکلتون بسته نباشه، رنگ پر نمی‌شه، پس مطمئن بشید که همه خطوط به هم وصل شدن.
چطور اشکال ایجاد شده با Pen در فیگما را ویرایش کنیم؟
برای ویرایش شکل:
- انتخاب ابزار: میتونید دوباره Pen رو انتخاب کنید یا از ابزار Move استفاده کنید. اگر ابزار Move را انتخاب کردید باید رو شکل دابل کلیک کنید تا نقاط آن فعال شود.
- جابه‌جایی نقاط: روی نقطه‌ها کلیک کنید و بکشیدشون تا شکل تغییر کنه.
- اضافه کردن نقطه: با Pen روی خط کلیک کنید تا نقطه جدید اضافه بشه.
- حذف نقطه: با Pen، روی نقطه‌ای که می‌خواید حذف بشه کلیک کنید (یا از کلید Delete استفاده کنید).
اینجوری میتونید شکلتون رو هر جور که می‌خواید تغییر بدید.
چطور به خطوط ایجاد شده با Pen حاشیه یا Stroke بدهیم؟
برای اضافه کردن حاشیه:
- انتخاب شکل: شکلتون رو انتخاب کنید.
- فعال کردن Stroke: توی پنل سمت راست، بخش Stroke رو پیدا کنید و روی مربع رنگی کنارش کلیک کنید.
- تنظیمات Stroke:
- رنگ: رنگ حاشیه رو انتخاب کنید.
- ضخامت: با اسلایدر کنارش، ضخامت حاشیه رو کم یا زیاد کنید.
- نوع خط: اگه می‌خواید خط‌چین یا نقطه‌چین باشه، تو تنظیمات پیشرفته‌تر میتونید انتخاب کنید.
Stroke به شکلتون جلوه بیشتری می‌دن!
چطور نقاط ایجاد شده با ابزار Pen را خم یا نرم کنیم؟
برای خم کردن خطوط:
- انتخاب نقطه: با ابزار Pen یا Move، روی نقطه‌ای که می‌خواید خم بشه دابل کلیک کنید.
- با دابل کلیک کردن روی نقطه مورد نظرتون دو دسته در اطراف آن ظاهر می شود.
- تنظیم دستگیره‌ها: دستگیره‌ها رو بکشید تا خط خم بشه. هر چی دستگیره‌ها رو بیشتر بکشید، خمیدگی بیشتر می‌شه.
- اگه می‌خواید هر طرف دستگیره رو جداگانه تنظیم کنید، کلید Alt/Option رو نگه دارید و دستگیره رو بکشید.
با این روش خطوط صافتون به منحنی‌های نرم تبدیل می‌شن.
چطور نقاط جدیدی به خطوط کشیده با Pen در فیگما اضافه کنیم؟
برای اضافه کردن نقطه جدید:
- انتخاب ابزار Pen: ابزار Pen رو بگیرید.
- کلیک روی خط: روی قسمتی از خط که می‌خواید نقطه اضافه بشه کلیک کنید.
یه نقطه جدید ظاهر می‌شه و میتونید باهاش شکل رو ویرایش کنید.
چطور نقاط ایجاد شده با Pen در فیگما را حذف کنیم؟
نقطه مد نظر خود را پیدا و انتخاب کنید و با زدن دکمه Backspace یا Delete می توانید آن را حذف کنید.
تو این آموزش، همه‌چیز درباره ابزار Pen در فیگما رو یاد گرفتیم: از ساخت اشکال سفارشی و ویرایششون گرفته تا خم کردن خطوط و تنظیمات دقیق. امیدوارم این نکات به کارتون بیاد و بتونید طراحی‌های خلاقانه‌تری بسازید. اگه سوالی دارید یا چیزی رو بیشتر توضیح بدم، حتماً بگید!
اگه دوست داشتید، این مطلب رو با بقیه به اشتراک بذارید و حتماً ویدیوی کاملش رو توی [کانال یوتیوبم] ببینید!
آموزش‌های تخصصی طراحی UI/UX و طراحی محصول
اگر می‌خواهید مهارت‌های خود را در زمینه‌های طراحی رابط کاربری و تجربه کاربری افزایش دهید، می‌توانید از طریق سایت Learnuix.com در دوره‌های آموزشی زیر ثبت‌نام کنید:
- آموزش طراحی رابط کاربری UI
- آموزش طراحی تجربه کاربری UX
- آموزش ساخت دیزاین سیستم در Figma
- آموزش پروداکت دیزاین
این دوره‌ها به شیوه‌ای عملی و کاربردی طراحی UI/UX را آموزش می‌دهند تا بتوانید مهارت‌های خود را ارتقا دهید.
در صورتی که این ویدیو برای شما مفید بود, لطفا با دوستانتون در شبکه های اجتماعی به اشتراک بگذارید.
برای مشاهده آموزش های بیشتر دیزاین عضو کانال یوتیوب من بشوید:
کانال تلگرام آموزشی طراحی UI/UX
کانال تلگرام iHMahmoodi محتواهای آموزشی و کاربردی مفیدی در زمینه طراحی رابط کاربری و تجربه کاربری منتشر می‌کند.
از طریق این کانال می‌توانید به آخرین اخبار، آموزش‌های ویدیویی، معرفی کتاب، نکات کاربردی و دیگر مطالب آموزشی مرتبط با UI/UX دسترسی داشته باشید.
با عضویت در کانال تلگرام iHMahmoodi همواره در جریان دانش روز طراحی رابط و تجربه کاربر باشید.
گروه تلگرام جامعه طراحان UI/UX
گروه تلگرامی UXHubs بستری برای ارتباط و تعامل طراحان UI/UX فراهم می‌کند.
اعضای این گروه می‌توانند درباره موضوعات مختلف طراحی رابط کاربر و تجربه کاربر بحث و تبادل نظر کنند، سوالات خود را مطرح کنند و از تجارب یکدیگر بهره ببرند.
با پیوستن به گروه تلگرام UXHubs به جامعه بزرگ طراحان رابط کاربر ملحق شوید.
دیگر آموزش های مرتبط:
آموزش جامع فیگما – پیش نیازهای شروع کار با Figma – قسمت صفر
آموزش جامع فیگما – آشنایی با داشبورد، کامیونیتی و محیط Figma – قسمت اول
آموزش جامع فیگما – آشنایی و کار با فریم ها در Figma – قسمت دوم
آموزش جامع فیگما – نکات اساسی برای شروع کار با Figma – قسمت سوم
آموزش جامع فیگما – تفاوت فریم، سکشن و گروه در Figma – قسمت چهارم
آموزش جامع فیگما – تنظیم و تراز کردن اشیا در صفحه Figma – قسمت 5
آموزش جامع فیگما – تغییر شفافیت و ترکیب لایه ها با هم در Figma – قسمت 6
آموزش جامع فیگما – کار با رنگ و گرادینت در Figma – قسمت 7
آموزش جامع فیگما – کار با حاشیه ها یا Stroke در Figma – قسمت 8
آموزش جامع فیگما – کار افکت یا Effect ها در Figma – قسمت 9
آموزش ساخت و تنظیم انواع اشکال و ماسک کردن در Figma – قسمت 10
