امروز قراره یکی دیگه از قابلیت‌های کلیدی فیگما رو با هم بررسی کنیم: حاشیه‌ها یا Stroke. حاشیه‌ها نقش مهمی در مشخص کردن مرز عناصر، ایجاد جذابیت بصری و راهنمایی چشم کاربر در طراحی رابط کاربری دارن. اگه می‌خواید بدونید چطور از این ابزار قدرتمند فیگما به بهترین شکل استفاده کنید و به طرح‌هاتون جلوه‌ای خاص ببخشید، این آموزش ویدیویی را کامل مشاهده کنید.
چرا رنگ و گرادینت انقدر مهمن؟
استفاده از Stroke یا Border یا حاشیه به ما امکان میده که مثلا بتوانیم یک تضاد بین شکل و پس زمینه آن ایجاد کنیم و یا باعث ایجاد جلوه های خاصی اطراف یک شکل شویم. همچنین از Stroke برای تنظیم ضخامت نوع خاصی از آیکان ها نیز استفاده می شود.
بیا یه نگاه سریع به مباحثی در این آموزش بندازیم و بعد بریم سراغ جزئیات:
- نحوه دادن حاشیه یا Stroke به اشیا در فیگما و تنظیمات اولیه آن
- روش ایجاد حاشیه یا Stroke فقط در یک طرف یا چند طرف شی
- نحوه ایجاد حاشیه خط چین در فیگما
- نحوه ایجاد حاشیه نقطه چین در فیگما
- کاربرد Join در حاشیه یا Stroke فیگما و تاثیر آن بر گوشه‌ها
(برای دیدن این ویدیو باید VPN شما روشن باشد. بعد از روشن کردن VPN یا فیلترشکن، بر روی لینک زیر بزنید و در یوتیوب ویدیو را تماشا کنید)
چطور یک حاشیه یا Stroke به یک شی در فیگما بدهیم و آن را تنظیم کنیم؟
برای اینکه به یه شی (مثل مستطیل، دایره یا هرچیز دیگه) توی فیگما حاشیه بدید، کار خیلی ساده‌ست. این مراحل رو دنبال کنید:
- انتخاب شی: اول شئ موردنظرتون رو انتخاب کنید.
- فعال کردن Stroke: توی پنل سمت راست (Properties Panel)، بخش Stroke رو پیدا کنید. یه مربع کوچیک کنارش هست که با کلیک روش، حاشیه فعال می‌شه.
- تنظیمات اولیه:
- ضخامت: با تغییر عدد کنار Stroke (مثلاً 1، 2 یا بیشتر)، می‌تونید حاشیه رو نازک یا کلفت کنید.
- رنگ: روی مربع رنگی کلیک کنید و رنگ دلخواهتون رو انتخاب کنید.
- موقعیت: از منوی کشویی کنارش می‌تونید مشخص کنید حاشیه داخل (Inside)، وسط (Center) یا بیرون (Outside) شی باشه.
با این تنظیمات ساده، حاشیه‌تون آماده‌ست و می‌تونید ظاهرش رو هرجور که دوست دارید تغییر بدید!
چطور فقط به یک طرف یا چند طرف یک شی در فیگما حاشیه یا Stroke بدهیم؟
گه بخواید به همه طرف‌های یه شی حاشیه ندید و فقط یه طرف یا چند طرف خاص رو حاشیه‌دار کنید، فیگما این امکان رو بهتون میده. اینجوری پیش برید:
- انتخاب شی: شئ‌تون رو انتخاب کنید.
- باز کردن Advanced Stroke: توی پنل Stroke، روی آیکون Advanced Stroke (که شبیه یه مربع با خطوط متقاطعه) کلیک کنید.
- تنظیم جداگانه: حالا برای هر طرف شی (بالا، پایین، چپ، راست) یه گزینه جدا می‌بینید. می‌تونید:
- حاشیه رو فقط برای یه طرف فعال کنید.
- و ضخامت یا رنگ طرف هایی که فعال است رو جداگانه تنظیم کنید.
این قابلیت برای وقتی که نیاز به طراحی‌های خاص دارید خیلی کاربردیه، مثلاً وقتی فقط بالای یه مستطیل خط می‌خواید.
چطور یک حاشیه خط‌چین در فیگما درست کنیم؟
حاشیه‌های خط‌چین برای طراحی‌های مینیمال و جذاب خیلی پرطرفدارن. برای ساختش این مراحل رو انجام بدید:
- فعال کردن Stroke: مثل قبل، شی رو انتخاب کنید و Stroke رو فعال کنید.
- انتخاب حالت خط‌چین: توی پنل Stroke، روی گزینه Dashed کلیک کنید.
- تنظیم طول و فاصله:
- طول خط‌چین (Dash): عدد اول مشخص می‌کنه هر خط چقدر بلند باشه (مثلاً 5 پیکسل).
- فاصله (Gap): عدد دوم فاصله بین خط‌چین‌ها رو تعیین می‌کنه (مثلاً 3 پیکسل).
با تغییر این دو عدد، می‌تونید خط‌چین‌هایی با اندازه‌ها و فاصله‌های مختلف بسازید. امتحان کنید تا استایل موردنظرتون رو پیدا کنید!
چطور یک حاشیه نقطه‌چین در فیگما درست کنیم؟
حاشیه نقطه‌چین هم شبیه خط‌چینه، ولی به‌جای خط، نقطه‌های کوچیک داره. برای ساختش:
- فعال کردن Stroke: شی رو انتخاب کنید و Stroke رو روشن کنید.
- انتخاب حالت Dashed: توی پنل Stroke، گزینه Dashed رو بزنید.
- تنظیم برای نقطه‌چین:
- طول (Dash): یه عدد خیلی کوچیک مثل 0/5 بذارید تا خط‌ها به نقطه تبدیل بشن.
- فاصله (Gap): فاصله بین نقطه‌ها رو با عدد دوم تنظیم کنید.
این ترفند ساده باعث می‌شه حاشیه‌تون به‌جای خط‌چین، نقطه‌چین بشه و به طراحی‌تون یه حس متفاوت بده.
کاربرد Join در حاشیه یا Stroke فیگما چیست؟
قتی با اشیایی مثل مستطیل کار می‌کنید که گوشه دارن، نوع اتصال گوشه‌های حاشیه خیلی مهم می‌شه. توی فیگما این تنظیمات تحت عنوان Join در پنل Stroke هست و سه گزینه داره:
- Miter: گوشه‌ها تیز و زاویه‌دار می‌مونن؛ برای طراحی‌های دقیق و خطی خوبه.
- Round: گوشه‌ها گرد می‌شن؛ برای استایل‌های نرم و مدرن عالیه.
- Bevel: گوشه‌ها صاف و بریده می‌شن؛ یه حس مینیمال و خاص میده.
هر کدوم از این گزینه‌ها رو می‌تونید امتحان کنید تا ببینید کدومش به پروژه‌تون بیشتر میاد. این تنظیمات روی حس کلی طراحی‌تون تاثیر زیادی داره!
خب، توی این آموزش سعی کردم همه چیز درباره کار با Stroke در فیگما رو به زبون ساده براتون توضیح بدم. از اضافه کردن حاشیه و تنظیمش گرفته تا ساخت خط‌چین و نقطه‌چین و کاربرد Join، همه رو با جزئیات گفتم. امیدوارم این نکات به کارتون بیاد و توی طراحی‌هاتون ازشون استفاده کنید. اگه سوالی دارید یا چیزی رو بیشتر توضیح بدم، حتماً توی نظرات بگید!
اگه دوست داشتید، این مطلب رو با بقیه به اشتراک بذارید و حتماً ویدیوی کاملش رو توی [کانال یوتیوبم] ببینید!
آموزش‌های تخصصی طراحی 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
