اگه داری اینو می‌خونی، احتمالاً یا عاشق طراحی با فیگما هستی یا تازه می‌خوای شروع کنی و دنبال یه راهنمایی ساده و کاربردی می‌گردی. من توی ویدیوم تو یوتیوب (اینجا کلیک کن)، یه آموزش کامل درباره کار با رنگ و گرادینت تو فیگما گذاشتم. حالا می‌خوام اونجا رو با جزئیات برات باز کنم که هم یاد بگیری، هم لذت ببری!
چرا رنگ و گرادینت انقدر مهمن؟
وقتی داریم توی فیگما طراحی می‌کنیم، رنگها و گرادینت‌ها نقش خیلی مهمی تو جذابیت و حرفه‌ای شدن کارمون دارن. توی این آموزش، من همه چیز رو از صفر تا صد توضیح دادم؛ از اینکه پنل رنگها کجاست و چطور یه رنگ به یه شی بدیم، تا کار با گرادینت‌های پیچیده و حتی اضافه کردن عکس و ویدیو به اشیا.
بیا یه نگاه سریع به موضوع بندازیم و بعد بریم سراغ جزئیات:
- پنل رنگها در فیگما و نحوه رنگ دادن به اشیا
- کدهای رنگ Hex و کاربرد آنها
- انتخاب رنگ‌های مختلف از پنل Fill
- نوار رنگ Hue و تغییر رنگها
- Color Picker و برداشتن رنگ از هر نقطه
- شفافیت رنگ (Opacity) و تفاوت آن با Opacity لایه
- غیرفعال و حذف کردن رنگها
- روش‌های مختلف تعیین رنگ اشیا
- اعمال چندین رنگ به یک لایه
- مدل‌های رنگی مختلف در فیگما (RGB، HSB و …)
- رنگ‌های ذخیره شده و Design Systems
- روش‌های پر کردن داخل شی (Fill، Gradient، Image و Video)
- ایجاد و تنظیم گرادیانت (طیف رنگی)
- حالت‌های مختلف گرادیانت (Linear، Radial، Angular و Diamond)
- معکوس کردن سریع گرادیانت
- چرخاندن 90 درجه گرادیانت
- قرار دادن عکس داخل شی
- قرار دادن ویدیو یا GIF داخل شی
- روش‌های سریع وارد کردن عکس از کامپیوتر و وب
(برای دیدن این ویدیو باید VPN شما روشن باشد. بعد از روشن کردن VPN یا فیلترشکن، بر روی لینک زیر بزنید و در یوتیوب ویدیو را تماشا کنید)
پنل رنگها در فیگما کجاست و چطور رنگ بدیم؟
اولین چیزی که باید بدونید اینه که پنل رنگها تو فیگما سمت راست صفحه‌تون قرار داره. وقتی یه شی رو انتخاب می‌کنید، بخش Fill رو می‌بینید که از اونجا می‌تونید رنگ موردنظرتون رو انتخاب کنید. کافیه روی مربع رنگی کنار Fill کلیک کنید تا یه پنجره باز بشه و بتونید رنگتون رو انتخاب کنید. به همین سادگی!
کدهای رنگ Hex چیه و چطور ازشون استفاده کنیم؟
شاید براتون سوال باشه که این کدهای Hex که همه جا می‌بینیم چی هستن. این کدها یه روش استاندارد برای تعریف رنگها هستن که با یه کد 6 رقمی (مثل #FF5733) نشون داده می‌شن. توی فیگما می‌تونید این کدها رو مستقیم توی پنل رنگها وارد کنید و رنگ دلخواهتون رو سریع اعمال کنید. این روش خیلی برای کسایی که با پالت‌های رنگی خاص کار می‌کنن عالیه.
نوار رنگ Hue و Color Picker رو چطور پیدا کنیم؟
نوار رنگ Hue توی پنجره انتخاب رنگ فیگما هست و بهتون کمک می‌کنه که تناژ رنگی که می‌خواید رو سریع پیدا کنید. فقط کافیه اسلایدرش رو جابه‌جا کنید تا رنگها تغییر کنن. یه ابزار دیگه هم داریم به اسم Color Picker. این ابزار یه قطره‌چکون باحاله که می‌تونید باهاش رنگ هر چیزی که توی صفحه‌تون هست رو بردارید و به شی دیگه بدید. کافیه روش کلیک کنید و بعد رو هر رنگی که می‌خواید ببریدش!
شفافیت یا Opacity رو چطور تنظیم کنیم؟
یکی از سوالای پرتکرار اینه که شفافیت رنگ چطور کار می‌کنه؟ توی فیگما، کنار پنل Fill یه اسلایدر برای Opacity هست که با درصد نشون داده می‌شه. مثلاً اگه بذاریدش رو 50٪، رنگتون نیمه‌شفاف می‌شه. یه نکته مهم: Opacity رنگ با Opacity لایه فرق داره. اولی فقط روی رنگ اثر می‌ذاره، ولی دومی کل لایه رو شفاف می‌کنه. این تفاوت رو توی ویدیو با مثال عملی نشون دادم!
چطور رنگ رو غیرفعال یا حذف کنیم؟
اگه بخواید یه رنگ رو موقتاً غیرفعال کنید، فقط کافیه رو علامت چشم کنارش توی پنل Fill کلیک کنید. برای حذف کاملش هم می‌تونید رو علامت منفی یا – کلیک کنید. این کار خیلی به درد می‌خوره وقتی دارید چندتا رنگ رو تست می‌کنید و نمی‌خواید همه‌شون همزمان فعال باشن.
اعمال چندین رنگ به یه لایه و مدل‌های رنگی
یه قابلیت باحال فیگما اینه که می‌تونید به یه لایه چندتا رنگ مختلف بدید. مثلاً با اضافه کردن Fill جدید از پنل، می‌تونید ترکیب رنگ‌های خلاقانه بسازید. فیگما مدل‌های رنگی مختلفی مثل RGB، HSL و Hex هم پشتیبانی می‌کنه که می‌تونید از منوی کشویی پنل رنگ انتخابشون کنید.
کار با گرادینت در فیگما
حالا می‌رسیم به بخش هیجان‌انگیز گرادینت! برای اضافه کردن گرادینت، توی پنل Fill از منوی کشویی گزینه Linear Gradient رو انتخاب کنید. بعد می‌تونید رنگ‌های شروع و پایان رو تنظیم کنید. چندتا نکته باحال:
- حالت‌های گرادینت: فیگما حالت‌های مختلفی مثل Linear، Radial، Angular و Diamond داره که هر کدوم یه جلوه خاص به کارتون می‌دن.
- معکوس کردن رنگها: با زدن دکمه‌ی فلش دوطرفه کنار گرادینت، می‌تونید جای رنگها رو سریع عوض کنید.
- چرخاندن گرادینت: با دستگیره‌ای که وسط گرادینت ظاهر می‌شه، می‌تونید زاویه‌ش رو عوض کنید (مثلاً 90 درجه بچرخونید).
اضافه کردن عکس، ویدیو یا GIF به اشیا
یکی از چیزایی که توی این آموزش خیلی بهش پرداختم، اینه که چطور یه شی رو با عکس یا ویدیو پر کنیم. کافیه توی پنل Fill گزینه Image رو انتخاب کنید و بعد فایلتون رو از کامپیوتر بکشید تو فیگما یا از وب وارد کنید. برای ویدیو و GIF هم همین روش کار می‌کنه و می‌تونید خیلی سریع یه طراحی پویا بسازید.
خب دوستان، توی این مطلب سعی کردم همه نکات مهم قسمت هفتم آموزش فیگما رو براتون جمع‌بندی کنم. از کار با پنل رنگها و کدهای Hex گرفته تا تنظیم گرادینت و اضافه کردن عکس و ویدیو، همه‌ش رو با جزئیات توضیح دادم. امیدوارم که براتون مفید باشه و توی طراحی‌هاتون ازش استفاده کنید. اگه دوست داشتید، این مطلب رو با بقیه به اشتراک بذارید و حتماً ویدیوی کاملش رو توی [کانال یوتیوبم] ببینید!
آموزش‌های تخصصی طراحی 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
