توی این آموزش قراره با هم کار با افکت‌ها یا Effect ها در فیگما رو یاد بگیریم. با استفاده از افکت ها در فیگما، طرح‌هامون رو زنده‌تر، جذاب‌تر و حرفه‌ای‌تر کنیم. افکت‌ها ابزارهای قدرتمندی هستن که به شما اجازه می‌دن عمق، سایه، تاری و جلوه‌های ویژه بصری به عناصر UI خودتون اضافه کنید.
در این آموزش چه چیزهایی یاد میگیرید؟
بیا یه نگاه سریع به مباحثی در این آموزش بندازیم و بعد بریم سراغ جزئیات:
- محل قرارگیری بخش Effect در فیگما
- نحوه ایجاد و تنظیم سایه در زیر اشیا با Drop Shadow
- روش نرم کردن سایه‌ها با استفاده از Blur
- ترفند دیدن سایه زیر اشیا شفاف
- نحوه ایجاد سایه داخلی با Inner Shadow
- روش تار کردن کامل لایه‌ها با Layer Blur
- نحوه ایجاد پس‌زمینه تار یا شیشه‌ای با Background Blur
(برای دیدن این ویدیو باید VPN شما روشن باشد. بعد از روشن کردن VPN یا فیلترشکن، بر روی لینک زیر بزنید و در یوتیوب ویدیو را تماشا کنید)
بخش Effect های فیگما کجا قرار دارد؟
برای پیدا کردن افکت‌ها توی فیگما، این مراحل رو دنبال کنید:
- انتخاب شی: اول شئ‌ای که می‌خواید بهش افکت بدید (مثل یه مستطیل یا دایره) رو انتخاب کنید.
- پنل Properties: توی پنل سمت راست (که بهش Properties Panel می‌گن)، بخشی به اسم Effects رو می‌بینید.
- اضافه کردن افکت: کنار Effects یه علامت “+” هست، روش کلیک کنید تا منوی افکت‌ها باز بشه.
از اینجا می‌تونید هر نوع افکتی که می‌خواید رو به شئ‌تون اضافه کنید و تنظیمش کنید.
چطور در فیگما یک سایه در زیر اشیا قرار دهیم و آن را تنظیم کنیم؟
برای اضافه کردن سایه زیر اشیا (که بهش Drop Shadow می‌گن):
- انتخاب شی: شئ‌تون رو انتخاب کنید.
- اضافه کردن Drop Shadow: توی بخش Effects، روی “+” بزنید و Drop Shadow رو انتخاب کنید.
- تنظیمات سایه:
- رنگ: روی مربع رنگی کلیک کنید و رنگ سایه رو انتخاب کنید (مثلاً خاکستری).
- موقعیت: با اسلایدرهای X و Y، جای سایه رو تنظیم کنید (مثلاً X=5 و Y=5 برای سایه پایین و راست).
- میزان تاری (Blur): اسلایدر Blur رو جابه‌جا کنید تا سایه تارتر بشه و طبیعی‌تر به نظر بیاد.
- میزان پخش شدگی(Spread): این تنظیم باعث میزان پخش سایه می شود.
- شفافیت (Opacity): با اسلایدر Opacity، شفافیت سایه رو کم یا زیاد کنید.
با این تنظیمات، سایه‌تون زیر شئ ظاهر می‌شه و می‌تونید هر جور که دوست دارید تغییرش بدید.
چطور سایه‌ها را در فیگما نرم کنیم؟
برای اینکه سایه‌ها نرم و ملایم‌تر بشن:
- توی تنظیمات Drop Shadow، اسلایدر Blur رو بیشتر کنید (مثلاً 10 یا 20).
- هر چی Blur بیشتر باشه، سایه پخش‌تر و طبیعی‌تر می‌شه و حس عمق بیشتری به طراحی‌تون می‌ده.
به همین سادگی سایه‌تون نرم و قشنگ‌تر می‌شه!
چطور در فیگما یک سایه به داخل شی بدهیم؟
برای اضافه کردن سایه داخلی (Inner Shadow):
- انتخاب شی: شئ‌تون رو انتخاب کنید.
- اضافه کردن Inner Shadow: توی بخش Effects، روی “+” بزنید و Inner Shadow رو انتخاب کنید.
- تنظیمات سایه داخلی:
- رنگ: رنگ سایه رو انتخاب کنید.
- موقعیت: با اسلایدرهای X و Y، جهت سایه رو تنظیم کنید.
- Blur: میزان تاری سایه رو کم یا زیاد کنید.
- Opacity: شفافیت سایه رو تنظیم کنید.
سایه داخلی برای دادن حس عمق به داخل شئ (مثل دکمه‌ها یا کادرهای برجسته) خیلی مناسبه.
چطور یک لایه را در فیگما Blur یا تار کنیم؟
برای تار کردن یه لایه:
- انتخاب لایه: لایه‌ای که می‌خواید تار بشه رو انتخاب کنید.
- اضافه کردن Layer Blur: توی بخش Effects، روی “+” بزنید و Layer Blur رو انتخاب کنید.
- تنظیم میزان Blur: اسلایدر Blur رو جابه‌جا کنید تا لایه به اندازه دلخواهتون تار بشه.
این افکت برای محو کردن بخش‌هایی از طراحی یا ایجاد حس عمق خیلی کاربرد داره.
چطور در فیگما یک پس‌زمینه تار یا شیشه‌ای تار داشته باشیم؟
برای ساخت پس‌زمینه تار (مثل افکت شیشه‌ای):
- ساخت لایه جدید: یه مستطیل بسازید که کل صفحه رو بپوشونه.
- اضافه کردن Background Blur: توی بخش Effects، روی “+” بزنید و Background Blur رو انتخاب کنید.
- تنظیم Blur: اسلایدر Blur رو تنظیم کنید تا پس‌زمینه تار بشه.
- نکته مهم این است که Opacity رنگ باید کمتر از مقدار 100 درصد باشد تا تاری لایه ایجاد شود؛ حتما آموزش ویدیویی را برای اعمال این افکت ببینید.
با این کار، هر چیزی که زیر این لایه باشه تار دیده می‌شه و حس یه شیشه مات یا طراحی مدرن رو بهتون می‌ده.
تو این آموزش، همه چیز درباره کار با افکت‌ها در فیگما رو با هم مرور کردیم. از پیدا کردن بخش Effects و اضافه کردن سایه زیر اشیا، تا نرم کردن سایه‌ها، سایه داخلی، و تار کردن لایه‌ها و پس‌زمینه‌ها رو قدم‌به‌قدم توضیح دادم. امیدوارم این نکات به کارتون بیاد و بتونید طراحی‌هاتون رو حرفه‌ای‌تر کنید. اگه سوالی دارید، حتماً بپرسید!
اگه دوست داشتید، این مطلب رو با بقیه به اشتراک بذارید و حتماً ویدیوی کاملش رو توی [کانال یوتیوبم] ببینید!
آموزش‌های تخصصی طراحی 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
