آموزش جامع کار با ابزار متن و تنظیمات آن در Figma

آموزش جامع فیگما - کار با ابزار متن و تنظیمات آن در Figma - قسمت 12 — آموزش جامع فیگما – کار با ابزار متن و تنظیمات آن در Figma – قسمت 12

تو این پست قراره با هم به دنیای ابزار متن و تنظیماتش تو فیگما بریم و همه‌چیز رو قدم‌به‌قدم در مورد تایپوگرافی یاد بگیریم.

در این آموزش چه چیزهایی یاد میگیرید؟

بیا یه نگاه سریع به مباحثی در این آموزش بندازیم و بعد بریم سراغ جزئیات:

نحوه انتخاب و فعال کردن ابزار متن (Text) در فیگما
آشنایی با پنل تنظیمات متن در فیگما و بخش‌های مختلف آن
نحوه انتخاب و تغییر فونت در فیگما
استفاده از فونت‌های گوگل به صورت مستقیم در فیگما
نمایش و جستجو در بین فونت‌های آنلاین و سیستم
آشنایی با فونت‌های وریبل و ویژگی‌های آن‌ها
انتخاب وزن‌های مختلف فونت
تغییر سایز فونت و متن
تنظیم فاصله بین خطوط (Line Height)
تغییر فاصله بین حروف (Letter Spacing)
تراز کردن متن (Align) به صورت افقی و عمودی
استفاده از تنظیمات پیشرفته متن در فیگما
چیدمان Justify برای پر کردن خطوط با متن
خط کشیدن زیر و روی کلمات (Underline و Strikethrough)
تنظیم بزرگی و کوچکی حروف (Case Sensitive)
حذف فاصله بالا و پایین کلمات
ایجاد و تنظیم لیست متنی (Bulleted و Numbered Lists)
تنظیم فاصله بین پاراگراف‌ها (Paragraph Spacing)
حالت‌های Fixed و Auto-width برای فریم متن
نمایش سرریز متن با Ellipsis
تنظیمات خیلی پیشرفته‌تر متن در فیگما
ایجاد فاصله در اول خط پاراگراف (Indent)
تغییر شکل اعداد به حالت Monospace
قرار دادن کلمه یا عدد به عنوان توان (Superscript)

(برای دیدن این ویدیو باید VPN شما روشن باشد. بعد از روشن کردن VPN یا فیلترشکن، بر روی لینک زیر بزنید و در یوتیوب ویدیو را تماشا کنید)

مشاهده کامل این آموزش در یوتیوب

چرا باید ابزار متن تو فیگما رو بلد باشیم؟

متن تو طراحی UI/UX مثل یه ستون فقراته؛ از عنوان‌ها و توضیحات گرفته تا دکمه‌ها و لیبل‌ها، همه‌جا حضور داره. فیگما ابزار متن و تنظیماتش رو انقدر قوی و منعطف طراحی کرده که هر ایده‌ای که تو ذهنتون باشه رو می‌تونید پیاده کنید. تو این آموزش، از ساده‌ترین کارها مثل انتخاب ابزار متن تا تنظیمات پیشرفته‌تر مثل فونت‌های وریبل و فاصله‌گذاری رو با هم مرور می‌کنیم.

چطور ابزار متن یا Text را در فیگما انتخاب و فعال کنیم؟

برای شروع کار با متن تو فیگما، باید ابزار متن رو فعال کنید:

از نوار ابزار: پایین صفحه، روی آیکون T کلیک کنید.
با میانبر کیبورد: فقط کافیه کلید T رو فشار بدید.

بعدش هر جای صفحه که کلیک کنید، می‌تونید تایپ رو شروع کنید. به همین راحتی!

نکته کاربردی: میانبرها رو یاد بگیرید چون سرعت کارتون رو حسابی بالا می‌برن.

پنل تنظیمات متن در فیگما کجاست؟

قتی یه متن رو انتخاب می‌کنید، همه تنظیماتش تو یه پنل جمع‌وجور براتون باز می‌شه:

پنل Properties: سمت راست صفحه، توی بخش Text، همه‌چیز از فونت و سایز گرفته تا فاصله‌گذاری‌ها رو می‌بینید.

از اینجا می‌تونید هر چیزی که نیاز دارید رو تغییر بدید.

چطور یک فونت را در فیگما انتخاب یا تغییر بدهیم؟

برای عوض کردن فونت متن:

اول متن رو انتخاب کنید.
تو پنل Text، روی اسم فونت کلیک کنید تا لیست فونت‌ها باز بشه.
از تو لیست، فونت موردنظرتون رو انتخاب کنید.

فیگما هم فونت‌های نصب‌شده رو سیستم شما رو نشون می‌ده و هم فونت‌های آنلاین.

چطور از فونت‌های گوگل به‌صورت مستقیم در فیگما استفاده کنیم؟

یکی از قابلیت‌های باحال فیگما اینه که می‌تونید مستقیم از فونت‌های گوگل استفاده کنید:

تو پنل فونت، روی گزینه Google Fonts کلیک کنید.
فونت موردنظرتون رو سرچ کنید و انتخابش کنید.
فیگما خودش فونت رو بارگذاری می‌کنه و آماده استفاده‌ست.

دیگه نیازی به دانلود و نصب دستی فونت‌ها ندارید!

فونت‌های وریبل چی هستند و چه ویژگی و کاربردی دارند؟

فونت‌های وریبل (Variable Fonts) یه جور فونت هوشمندن که خیلی منعطفن:

وزن (Weight): از خیلی نازک تا خیلی ضخیم رو می‌تونید تنظیم کنید.
عرض (Width): از باریک تا پهن رو تغییر بدید.
شیب (Slant): از صاف تا کج رو به دلخواه تنظیم کنید.

تو فیگما، وقتی یه فونت وریبل رو انتخاب می‌کنید، یه سری اسلایدر می‌بینید که این ویژگی‌ها رو باهاشون تنظیم می‌کنید. این فونت‌ها برای طراحی‌های خلاقانه و مدرن عالی‌ان.

چطور وزن‌های مختلف یک فونت را در فیگما انتخاب کنیم؟

برای تغییر وزن فونت (مثل Light، Regular یا Bold):

متن رو انتخاب کنید.
تو پنل Text، کنار اسم فونت، روی منوی وزن کلیک کنید.
از تو لیست، وزن دلخواهتون رو انتخاب کنید.

اگه فونتتون وریبل باشه، می‌تونید با اسلایدر وزن رو به‌صورت پیوسته تنظیم کنید.

تغییر سایز فونت و متن در فیگما

برای بزرگ یا کوچک کردن متن:

متن رو انتخاب کنید.
تو پنل Text، تو بخش Size، یه عدد وارد کنید یا از اسلایدر استفاده کنید.

تغییر فاصله بین خطوط در فیگما

برای تنظیم فاصله بین خطوط (Line Height):

متن رو انتخاب کنید.
تو بخش Line Height تو پنل Text، عدد دلخواهتون رو وارد کنید.
اگه بخواید فیگما خودش تنظیم کنه، هر مقدار عددی که داخل فیلد نوشتید را پاک کنید تا گزینه Auto اتوماتیک انتخاب بشه.

فاصله خطوط درست باعث می‌شه متن خواناتر و قشنگ‌تر بشه.

چطور فاصله بین حروف در فیگما را تغییر دهیم؟

برای تنظیم فاصله بین حروف (Letter Spacing):

متن رو انتخاب کنید.
تو بخش Letter Spacing، یه عدد وارد کنید:
- عدد مثبت فاصله رو بیشتر می‌کنه.
- عدد منفی فاصله رو کمتر می‌کنه.

این تنظیم برای استایل‌های خاص یا بهتر کردن خوانایی خیلی کاربرد داره.

چطور متن‌ها در فیگما تراز یا Align کنیم؟

برای تراز افقی متن:

متن رو انتخاب کنید.
تو پنل Text، یکی از گزینه‌های تراز رو انتخاب کنید:
- چپ، وسط، راست یا Justify.

این تنظیمات باعث می‌شه متن‌ها منظم و حرفه‌ای به نظر بیان.

چطور متن را به‌صورت عمودی تراز یا Align کنیم؟

برای تراز عمودی متن تو فریمش:

فریم متن رو انتخاب کنید.
تو پنل Properties، بخش Alignment، یکی از گزینه‌ها رو بزنید:
- بالا، وسط، پایین.

اینجوری متن دقیقاً اونجا که می‌خواید قرار می‌گیره.

تنظیمات پیشرفته متن در فیگما کجاست؟

برای دسترسی به تنظیمات پیشرفته‌تر متن:

متن رو انتخاب کنید.
تو پنل Text، روی آیکون Type Settings کلیک کنید. (پایین ترین دکمه سمت راست)
یه منوی جدید باز می‌شه که گزینه‌های بیشتری مثل لیست‌ها و فاصله‌گذاری پیشرفته داره.

این بخش برای وقتاییه که می‌خواید دقیق‌تر کار کنید.

چطور از چیدمان Justify برای پر کردن خطوط با متن و کلمات استفاده کنیم؟

برای Justify کردن متن:

متن رو انتخاب کنید.
تو بخش تراز، گزینه Justify رو بزنید.
اینجوری کلمات طوری پخش می‌شن که کل خط پر بشه (به‌جز خط آخر).

برای متن‌های طولانی و رسمی خیلی مناسبه. با این وجود در UI/UX دیزاین بعضا ممکنه کاربر دچار مشکل بشه و بهتره تا جای ممکن در صورتی که دلیل منطقی ندارید استفاده نکنید

چطور زیر یا روی کلمات در فیگما خط بکشیم؟

برای خط کشیدن زیر یا روی کلمات:

متن رو انتخاب کنید.
تو پنل پیشرفته (سه‌نقطه)، گزینه Underline (زیرخط) یا Strikethrough (خط روی متن) رو فعال کنید.

این گزینه‌ها برای جلب توجه یا نشون دادن لینک‌ها خوبه.

چطور بزرگی یا کوچکی حروف را در فیگما تنظیم کنیم؟ (Case Sensitive)

برای تغییر حالت حروف:

متن رو انتخاب کنید.
تو پنل پیشرفته، روی آیکون Case کلیک کنید و یکی رو انتخاب کنید:
- Uppercase: همه حروف بزرگ
- Lowercase: همه حروف کوچک
- Title Case: حرف اول هر کلمه بزرگ

اینجوری می‌تونید سریع استایل متن رو عوض کنید.

چطور فاصله بالا و پایین کلمات را در فیگما حذف کنیم؟

برای حذف فاصله‌های اضافی بالا و پایین متن:

فریم متن رو انتخاب کنید.
تو پنل Properties، بخش پیشرفته تنظیم متن را فعال کنید و Vertical Trim را فعال کنید.

این کار باعث می‌شه متن تمیز و بدون فاصله اضافی تو فریم بشینه.

چطور در فیگما لیست متنی را ایجاد و آن را تنظیم کنیم؟

برای ساختن لیست:

متن رو انتخاب کنید.
تو پنل پیشرفته، روی List Style کلیک کنید و نوعش رو انتخاب کنید (شماره‌دار یا بولت).
می‌تونید فاصله بین آیتم‌ها رو هم تنظیم کنید.

لیست‌ها برای مرتب کردن اطلاعات خیلی به کار می‌آن.

چطور فاصله بین پاراگراف‌ها در فیگما تنظیم کنیم؟

برای تنظیم فاصله بین پاراگراف‌ها:

متن رو انتخاب کنید.
تو پنل پیشرفته، تو بخش Paragraph Spacing، عدد دلخواهتون رو وارد کنید.

این کار باعث می‌شه پاراگراف‌ها از هم جدا و خواناتر بشن.

چطور فریم متن را در فیگما ثابت یا منعطف کنیم؟

فریم متن رو می‌تونید دو جور تنظیم کنید:

ثابت (Fixed): اندازه فریم ثابت می‌مونه و متن اضافی سرریز می‌شه.
منعطف (Auto): فریم با توجه به متن بزرگ یا کوچک می‌شه.

برای تغییرش:

فریم رو انتخاب کنید.
تو پنل Properties، بخش Resizing، گزینه Fixed یا Auto رو بزنید.

این تنظیم برای طراحی‌های ریسپانسیو خیلی مهمه.

چطور سرریز متن را در فیگما با … نشان دهیم؟

برای نشون دادن متن اضافی با …:

فریم متن رو ثابت کنید.
تو پنل پیشرفته، گزینه Turncate Text رو فعال کنید.

اینجوری اگه متن از فریم بیرون بزنه، با … نشون داده می‌شه.

چطور یک کلمه یا عدد را به‌عنوان توان یا اندیس در فیگما قرار دهیم؟

برای قرار دادن توان (مثل ²):

کلمه رو انتخاب کنید.
تو پنل Type settings، تو تب Details، و در بخش Number قسمت Position رو بسته به نیاز خود فعال کنید.

اینجوری می‌تونید اعداد یا کلمات رو به‌صورت توان نشون بدید.

تو این پست همه‌چیز درباره ابزار متن تو فیگما رو با هم مرور کردیم؛ از انتخاب فونت و تنظیم سایز گرفته تا کار با فونت‌های وریبل و تنظیمات پیشرفته. امیدوارم این آموزش بهتون کمک کنه تا متن‌هاتون رو تو طراحی‌ها حرفه‌ای‌تر کنید. پیشنهاد می‌کنم حتماً با این ابزارها توی فیگما تمرین کنید تا دستتون راه بیفته. ویدیوی کامل این قسمت رو هم ببینید که همه‌چیز رو با جزئیات بیشتر نشون می‌ده. اگه سوال یا نظری دارید، تو کامنت‌ها بگید. تا آموزش بعدی، موفق باشید!

اگه دوست داشتید، این مطلب رو با بقیه به اشتراک بذارید و حتماً ویدیوی کاملش رو توی [کانال یوتیوبم] ببینید!

آموزش‌های تخصصی طراحی UI/UX و طراحی محصول

اگر می‌خواهید مهارت‌های خود را در زمینه‌های طراحی رابط کاربری و تجربه کاربری افزایش دهید، می‌توانید از طریق سایت Learnuix.com در دوره‌های آموزشی زیر ثبت‌نام کنید:

این دوره‌ها به شیوه‌ای عملی و کاربردی طراحی UI/UX را آموزش می‌دهند تا بتوانید مهارت‌های خود را ارتقا دهید.

در صورتی که این ویدیو برای شما مفید بود, لطفا با دوستانتون در شبکه های اجتماعی به اشتراک بگذارید.

برای مشاهده آموزش های بیشتر دیزاین عضو کانال یوتیوب من بشوید:

Subscribe Now

برای اطلاع از جدیدترین آموزش‌ها با کلیک بر روی این دکمه عضو کانال یوتیوب شوید

کانال تلگرام آموزشی طراحی 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