توی این قسمت از آموزش جامع فیگما، قراره با هم یاد بگیریم که چطور انواع اشکال رو بسازیم، تنظیماتشون رو تغییر بدیم و از ماسک کردن برای طراحی‌های خلاقانه استفاده کنیم.
در این آموزش چه چیزهایی یاد می‌گیرید؟
بیا یه نگاه سریع به مباحثی در این آموزش بندازیم و بعد بریم سراغ جزئیات:
- نحوه ایجاد اشکال مختلف در فیگما (مستطیل، خط، بیضی، چندضلعی، ستاره)
- تنظیمات مربوط به هر شکل (ابعاد، گوشه‌ها، زوایا، تعداد اضلاع، پره‌ها و …)
- روش رسم مربع و دایره دقیق
- نحوه تغییر شکل سر خطوط
- روش ایجاد نمودار دایره‌ای (Pie Chart)
- نحوه ماسک کردن تصاویر در اشکال
- روش کپی کردن تصویر درون ماسک
- نحوه ماسک کردن متن در اشکال
ویدیوی کامل آموزش Shape و Mask در Figma
اگر فیلترشکن شما خاموش است، ویدیو را همین‌جا از آپارات تماشا کنید. برای تماشای نسخه یوتیوب با بالاترین کیفیت، از دکمه‌های زیر استفاده کنید.
چطور اشکال مختلف را در فیگما ایجاد کنیم؟
برای ساخت اشکال تو فیگما چند راه ساده داریم:
- ابزارهای آماده: توی نوار ابزار پایین صفحه، آیکون‌هایی مثل مستطیل، دایره، خط و… رو می‌بینید. کافیه روی یکی کلیک کنید و تو صفحه بکشید تا شکلتون ساخته بشه.
- کلیدهای میانبر: هر شکل یه میانبر داره، مثلاً 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 (ویندوز) یا Control + Command + M (مک) رو بزنید.
حالا عکس فقط تو محدوده شکل دیده می‌شه.
چطور در فیگما تصویر درون ماسک را کپی کنیم؟
برای کپی کردن عکس تو ماسک:
- روی ماسک (شکل) کلیک کنید.
- دابل‌کلیک کنید تا وارد حالت ویرایش ماسک بشید.
- عکس رو انتخاب کنید و Ctrl + C (ویندوز) یا Cmd + C (مک) بزنید.
- دوباره دابل‌کلیک کنید تا از ماسک خارج بشید.
- با Ctrl + V (ویندوز) یا Cmd + V (مک) عکس رو جای دیگه بچسبونید.
این روش برای وقتی که عکس رو بیرون ماسک هم بخواید خوبه.
چطور در فیگما یک متن را در یک شکل ماسک کنیم؟
برای ماسک کردن متن:
- یه شکل (مثلاً مستطیل) بکشید.
- متن رو روی شکل بنویسید.
- هر دو رو انتخاب کنید و Use as Mask رو از منوی بالا بزنید (یا کلیدهای میانبر بالا).
حالا متن فقط تو محدوده شکل نشون داده می‌شه و می‌تونید طراحی‌های خلاقانه بسازید.
تو این قسمت، ساخت و تنظیم اشکال مثل مستطیل، دایره، خط، فلش، چندضلعی و ستاره رو یاد گرفتیم. همچنین دیدیم که چطور با ماسک کردن، عکس و متن رو تو اشکال نشون بدیم. امیدوارم این آموزش به کارتون بیاد و بتونید طراحی‌هاتون رو حرفه‌ای‌تر کنید. سوالی داشتید، بپرسید!
Mask در نسخه فعلی Figma چطور کار می‌کند؟
Mask در Figma یک روش غیرمخرب برای نمایش بخشی از لایه‌هاست؛ یعنی بخش‌های پنهان حذف نمی‌شوند. هر لایه‌ای می‌تواند نقش Mask داشته باشد و Mask روی siblingهای بالاتر از خودش در لایه‌بندی اثر می‌گذارد تا به Mask بعدی، Parent یا Frame/Component دارای Clip Content برسد.
Figma سه نوع Mask دارد: Alpha که از شفافیت Mask استفاده می‌کند، Vector که Outline شکل را مبنا می‌گیرد و Luminance که روشنایی را برای میزان نمایش محتوا در نظر می‌گیرد.
Boolean Operations برای ساخت اشکال پیچیده
برای ترکیب چند Shape می‌توانید از Union، Subtract، Intersect و Exclude استفاده کنید. این عملیات در Figma غیرمخرب هستند؛ لایه‌های داخلی Boolean Group باقی می‌مانند و می‌توانید بعدا آن‌ها را ویرایش کنید.
جمع‌بندی و ادامه مسیر
- قسمت قبل: آموزش Effects در Figma – قسمت ۹
- قسمت بعد: آموزش Pen Tool در Figma – قسمت ۱۱
- کل مسیر: آموزش‌های Figma در LearnUIX
- مسیر عمیق‌تر طراحی رابط: UI Design Plus
