تو این پست قراره با هم به دنیای ابزار متن و تنظیماتش تو فیگما بریم و همه‌چیز رو قدم‌به‌قدم در مورد تایپوگرافی یاد بگیریم.
در این آموزش چه چیزهایی یاد میگیرید؟
بیا یه نگاه سریع به مباحثی در این آموزش بندازیم و بعد بریم سراغ جزئیات:
- کامپوننت‌ها در فیگما چی هستند و چه کاربردی دارند
- نحوه ساخت کامپوننت در فیگما
- مفهوم کامپوننت و کاربردهای پیشرفته آن
- نحوه خارج کردن یک کامپوننت از حالت Component
- نحوه ساخت Component Set با قابلیت تغییر محتوا
- ساخت کامپوننت دکمه پیشرفته به عنوان مثال عملی
- معرفی Property های مختلف کامپوننت در فیگما
- نحوه ساخت و کاربرد پراپرتی Variant
- نحوه ساخت و کاربرد پراپرتی Boolean
- نحوه ساخت و کاربرد پراپرتی Swap
- نحوه استفاده و کاربرد پراپرتی Text
(برای دیدن این ویدیو باید VPN شما روشن باشد. بعد از روشن کردن VPN یا فیلترشکن، بر روی لینک زیر بزنید و در یوتیوب ویدیو را تماشا کنید)
کامپوننت‌ها در فیگما چی هستند و چه کاربردی دارند؟
کامپوننت‌ها تو فیگما مثل بلوک‌های ساختمانی هستن که می‌تونید بارها و بارها ازشون استفاده کنید. مثلاً یه دکمه، یه کارت یا هر المان تکرارشونده‌ای تو پروژه‌تون. کاربردهاشون ایناست:
- صرفه‌جویی در زمان: یه بار طراحی می‌کنید و همه‌جا کپی می‌کنید.
- یکسان‌سازی طراحی: اگه بخواید چیزی رو تغییر بدید (مثلاً رنگ دکمه)، فقط تو کامپوننت اصلی ویرایش می‌کنید و همه نمونه‌ها به‌روز می‌شن.
- کار تیمی بهتر: تیم‌ها می‌تونن از یه کتابخونه مشترک از کامپوننت‌ها استفاده کنن و همه‌چیز هماهنگ بمونه.
خلاصه، کامپوننت‌ها ابزارهایی هستن که طراحی رو مقیاس‌پذیر و مدیریتش رو آسون‌تر می‌کنن.
چطور در فیگما یک کامپوننت بسازیم؟
ساختن کامپوننت تو فیگما خیلی راحته
- طراحی المان: اول یه المان بسازید، مثلاً یه دکمه با شکل و استایل دلخواهتون.
- اون رو انتخاب کنید.
- تبدیل به کامپوننت:
- در پنل Properties، دکمه ساخت کامپوننت که شبیه 4 لوزی کوچک کنار همدیگه هستند را میبینید، بر روی Create Component کلیک کنید.
- یا از میانبر Ctrl + Alt + K (تو ویندوز) یا Cmd + Opt + K (تو مک) استفاده کنید.
به همین سادگی! حالا یه کامپوننت دارید که می‌تونید هرجا خواستید ازش کپی بگیرید
مفهوم کامپوننت و کاربرد آن در فیگما
کامپوننت‌ها تو فیگما المان‌های قابل‌استفاده‌ی مجدد هستن که بهتون اجازه می‌دن یه بار یه چیز رو طراحی کنید و بعد تو کل پروژه‌تون ازش استفاده کنید. کاربردهاشون:
- مدیریت آسون تغییرات: اگه بخواید یه تغییر بدید (مثلاً فونت یا رنگ)، فقط تو کامپوننت اصلی ویرایش می‌کنید و همه‌جا آپدیت می‌شه.
- هماهنگی در طراحی: همه المان‌ها تو پروژه‌تون یکدست می‌مونن.
- بهبود همکاری تیمی: می‌تونید کامپوننت‌ها رو تو یه کتابخونه اشتراکی ذخیره کنید تا همه اعضای تیم بهشون دسترسی داشته باشن.
به‌طور خلاصه، کامپوننت‌ها قلب طراحی مقیاس‌پذیر تو فیگما هستن.
چطور یک کامپوننت را در فیگما از حالت کامپوننت خارج کنیم؟
اگه بخواید یه نمونه از کامپوننت رو جدا کنید و دیگه به کامپوننت اصلی وابسته نباشه:
- انتخاب نمونه: روی نمونه‌ای که از کامپوننت اصلی کپی کرده‌اید یا ساخته‌اید و می‌خواید تغییر بدید کلیک کنید.
- جدا کردن از کامپوننت:
- کلیک راست کنید و گزینه Detach Instance رو انتخاب کنید.
- یا از منوی بالا، Object > Detach Instance رو بزنید.
حالا اون المان مستقل شده و می‌تونید هر تغییری که خواستید روش اعمال کنید، بدون اینکه بقیه نمونه‌ها تغییر کنن.
معرفی Propertyهای مختلف کامپوننت در فیگما
فیگما چند نوع پراپرتی برای کامپوننت‌ها داره که هر کدوم یه کار خاص انجام می‌دن:
- Variant: برای ساخت نسخه‌های مختلف یه کامپوننت (مثل دکمه‌های Primary و Secondary).
- Boolean: برای روشن یا خاموش کردن یه ویژگی (مثل فعال یا غیرفعال بودن دکمه).
- Swap: برای تعویض یه المان با المان دیگه (مثل تغییر آیکون).
- Text: برای تغییر متن داخل کامپوننت.
این پراپرتی‌ها بهتون اجازه می‌دن کامپوننت‌هاتون رو پویا و قابل‌تنظیم کنید.
آموزش ساخت هر کدام از حالت های بالا در آموزش کامل شرح داده شده است و در متن معنی و کاربرد آن بدرستی قابل درک نیست.
تو این آموزش همه‌چیز درباره کامپوننت‌ها و پراپرتی‌هاشون تو فیگما رو با هم مرور کردیم. از ساخت یه کامپوننت ساده گرفته تا اضافه کردن پراپرتی‌های پیشرفته مثل Variant، Boolean، Swap و Text. امیدوارم با این نکات بتونید طراحی‌هاتون رو سریع‌تر و حرفه‌ای‌تر انجام بدید. اگه سوالی دارید، حتماً بپرسید!
اگه دوست داشتید، این مطلب رو با بقیه به اشتراک بذارید و حتماً ویدیوی کاملش رو توی [کانال یوتیوبم] ببینید!
آموزش‌های تخصصی طراحی 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
آموزش جامع کار با ابزار Pen و کاربردهای آن در Figma – قسمت 11
