توی این قسمت از آموزش جامع فیگما، قراره با هم یاد بگیریم که چطور انواع اشکال رو بسازیم، تنظیماتشون رو تغییر بدیم و از ماسک کردن برای طراحی‌های خلاقانه استفاده کنیم.
در این آموزش چه چیزهایی یاد میگیرید؟
بیا یه نگاه سریع به مباحثی در این آموزش بندازیم و بعد بریم سراغ جزئیات:
- نحوه ایجاد اشکال مختلف در فیگما (مستطیل، خط، بیضی، چندضلعی، ستاره)
- تنظیمات مربوط به هر شکل (ابعاد، گوشه‌ها، زوایا، تعداد اضلاع، پره‌ها و …)
- روش رسم مربع و دایره دقیق
- نحوه تغییر شکل سر خطوط
- روش ایجاد نمودار دایره‌ای (Pie Chart)
- نحوه ماسک کردن تصاویر در اشکال
- روش کپی کردن تصویر درون ماسک
- نحوه ماسک کردن متن در اشکال
(برای دیدن این ویدیو باید VPN شما روشن باشد. بعد از روشن کردن VPN یا فیلترشکن، بر روی لینک زیر بزنید و در یوتیوب ویدیو را تماشا کنید)
چطور اشکال مختلف را در فیگما ایجاد کنیم؟
برای ساخت اشکال تو فیگما چند راه ساده داریم:
- ابزارهای آماده: توی نوار ابزار پایین صفحه، آیکون‌هایی مثل مستطیل، دایره، خط و… رو می‌بینید. کافیه روی یکی کلیک کنید و تو صفحه بکشید تا شکلتون ساخته بشه.
- کلیدهای میانبر: هر شکل یه میانبر داره، مثلاً R برای مستطیل، O برای دایره. با زدن این کلیدها سریع شکل رو می‌سازید.
به همین سادگی هر شکلی که بخواید رو می‌تونید بسازید!
ایجاد شکل Rectangle و تنظیمات آن در فیگما
برای ساخت مستطیل:
- ابزار Rectangle: از نوار ابزار، آیکون مستطیل رو انتخاب کنید (یا کلید R رو بزنید) و تو صفحه بکشید.
- تنظیمات:
- رنگ و حاشیه: توی پنل سمت راست، رنگ داخل شکل (Fill) و حاشیه (Stroke) رو تغییر بدید.
- گوشه‌های گرد: تو بخش Corner Radius یه عدد (مثلاً 10) وارد کنید تا گوشه‌ها گرد بشن.
- تغییر اندازه: با دستگیره‌های دور مستطیل، اندازه‌ش رو تنظیم کنید.
مستطیل‌ها کاربرد زیادی دارن، پس تنظیماتشون رو خوب یاد بگیرید!
چطور یک مربع دقیق در فیگما بکشیم؟
برای کشیدن یه مربع دقیق:
- نگه داشتن Shift: ابزار مستطیل رو انتخاب کنید، بعد موقع کشیدن کلید Shift رو نگه دارید. اینجوری عرض و ارتفاع برابر می‌مونه و مربع می‌شه.
- تنظیم دستی: اگه بعداً خواستید، تو پنل Properties می‌تونید عدد عرض و ارتفاع رو مساوی کنید.
خیلی راحت و سریع!
ایجاد شکل خط یا Line و تنظیمات آن در فیگما
برای ساخت خط:
- ابزار Line: از نوار ابزار، آیکون خط رو انتخاب کنید (یا کلید L رو بزنید) و بکشید.
- تنظیمات:
- ضخامت: توی بخش Stroke، ضخامت خط رو کم یا زیاد کنید.
- رنگ: رنگ خط رو از همون بخش Stroke عوض کنید.
- نوع خط: می‌تونید خط‌چین یا نقطه‌چین هم بسازید (توی تنظیمات پیشرفته‌تر).
خطوط برای جداسازی یا طراحی‌های خاص عالی هستن.
چطور در فیگما یک خط مستقیم ایجاد کنیم؟
برای خط صاف و منظم:
- نگه داشتن Shift: ابزار خط رو بگیرید، موقع کشیدن کلید Shift رو نگه دارید. این کار خط رو کاملاً افقی، عمودی یا با زاویه ۴۵ درجه می‌کنه.
به همین راحتی خط مستقیم داریم!
چطور سر خطوط را در فیگما تغییر شکل بدهیم؟
برای تغییر شکل سر خطوط:
- توی پنل Stroke، بخش Cap رو پیدا کنید. گزینه‌هاش اینا هستن:
- Butt: سر خط صاف و تیز.
- Round: سر خط گرد.
- Square: سر خط مربعی.
اگه فلش بخواید، باید از ابزار دیگه استفاده کنید که جلوتر می‌گم.
ایجاد شکل فلش یا Arrow و تنظیمات آن در فیگما
برای ساخت فلش:
- ابزار Arrow: از نوار ابزار، آیکون فلش رو انتخاب کنید و تو صفحه بکشید.
- تنظیمات:
- جهت: با کشیدن، جهت فلش رو مشخص کنید.
- سر و دم: توی پنل Stroke، می‌تونید نوع سر و دم فلش (مثل فلش، دایره و…) رو عوض کنید.
فلش‌ها برای نشون دادن جهت یا ارتباط بین المان‌ها خیلی خوبن.
ایجاد شکل بیضی یا Ellipse و تنظیمات آن در فیگما
برای ساخت بیضی:
- ابزار Ellipse: از نوار ابزار، آیکون دایره رو انتخاب کنید (یا کلید O رو بزنید) و بکشید.
- تنظیمات:
- رنگ و حاشیه: مثل بقیه اشکال، Fill و Stroke رو تنظیم کنید.
- تغییر اندازه: با دستگیره‌ها، بیضی رو کشیده‌تر یا فشرده‌تر کنید.
برای دایره دقیق هم موقع کشیدن Shift رو نگه دارید.
چطور در فیگما یک دایره از مرکز آن ایجاد کنیم؟
ببرای کشیدن دایره از مرکز:
- نگه داشتن Option/Alt: ابزار بیضی رو انتخاب کنید، کلید Option (مک) یا Alt (ویندوز) رو نگه دارید و از مرکز بکشید.
- Shift برای دایره کامل: اگه Shift رو هم نگه دارید، دایره‌تون کاملاً گرد می‌شه.
این روش برای دایره‌های دقیق از یه نقطه مرکزی عالیه.
ایجاد شکل چندضلعی یا Polygon و تنظیمات آن در فیگما
برای ساخت ستاره:
- ابزار Star: از نوار ابزار، آیکون ستاره رو انتخاب کنید.
- تنظیمات:
- تعداد پر: توی Properties، تعداد پرهای ستاره رو کم یا زیاد کنید (مثلاً 5).
- شعاع داخلی: با اسلایدر Ratio، عمق پرها رو تنظیم کنید.
چطور در فیگما تصاویر را در اشکال ماسک کنیم؟
برای ماسک کردن عکس:
- یه شکل (مثلاً دایره) بکشید.
- عکس رو روی شکل بذارید.
- هر دو رو انتخاب کنید و از منوی بالا و یا با کلیک سمت راست روی آن Use as Mask کلیک کنید یا کلیدهای Ctrl + Alt + M (ویندوز) یا Cmd + Opt + M (مک) رو بزنید.
حالا عکس فقط تو محدوده شکل دیده می‌شه.
چطور در فیگما تصویر درون ماسک را کپی کنیم؟
برای کپی کردن عکس تو ماسک:
- روی ماسک (شکل) کلیک کنید.
- دابل‌کلیک کنید تا وارد حالت ویرایش ماسک بشید.
- عکس رو انتخاب کنید و Ctrl + C (ویندوز) یا Cmd + C (مک) بزنید.
- دوباره دابل‌کلیک کنید تا از ماسک خارج بشید.
- با Ctrl + V (ویندوز) یا Cmd + V (مک) عکس رو جای دیگه بچسبونید.
این روش برای وقتی که عکس رو بیرون ماسک هم بخواید خوبه.
چطور در فیگما یک متن را در یک شکل ماسک کنیم؟
برای ماسک کردن متن:
- یه شکل (مثلاً مستطیل) بکشید.
- متن رو روی شکل بنویسید.
- هر دو رو انتخاب کنید و Use as Mask رو از منوی بالا بزنید (یا کلیدهای میانبر بالا).
حالا متن فقط تو محدوده شکل نشون داده می‌شه و می‌تونید طراحی‌های خلاقانه بسازید.
تو این قسمت، ساخت و تنظیم اشکال مثل مستطیل، دایره، خط، فلش، چندضلعی و ستاره رو یاد گرفتیم. همچنین دیدیم که چطور با ماسک کردن، عکس و متن رو تو اشکال نشون بدیم. امیدوارم این آموزش به کارتون بیاد و بتونید طراحی‌هاتون رو حرفه‌ای‌تر کنید. سوالی داشتید، بپرسید!
اگه دوست داشتید، این مطلب رو با بقیه به اشتراک بذارید و حتماً ویدیوی کاملش رو توی [کانال یوتیوبم] ببینید!
آموزش‌های تخصصی طراحی 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
