تو این پست قراره با هم به دنیای ابزار متن و تنظیماتش تو فیگما بریم و همه‌چیز رو قدم‌به‌قدم در مورد تایپوگرافی یاد بگیریم.
در این آموزش چه چیزهایی یاد می‌گیرید؟
بیا یه نگاه سریع به مباحثی در این آموزش بندازیم و بعد بریم سراغ جزئیات:
- نحوه انتخاب و فعال کردن ابزار متن (Text) در فیگما
- آشنایی با پنل تنظیمات متن در فیگما و بخش‌های مختلف آن
- نحوه انتخاب و تغییر فونت در فیگما
- استفاده از فونت‌های گوگل به صورت مستقیم در فیگما
- نمایش و جستجو در بین فونت‌های آنلاین و سیستم
- آشنایی با فونت‌های وریبل و ویژگی‌های آن‌ها
- انتخاب وزن‌های مختلف فونت
- تغییر سایز فونت و متن
- تنظیم فاصله بین خطوط (Line Height)
- تغییر فاصله بین حروف (Letter Spacing)
- تراز کردن متن (Align) به صورت افقی و عمودی
- استفاده از تنظیمات پیشرفته متن در فیگما
- چیدمان Justify برای پر کردن خطوط با متن
- خط کشیدن زیر و روی کلمات (Underline و Strikethrough)
- تنظیم بزرگی و کوچکی حروف (Case Sensitive)
- حذف فاصله بالا و پایین کلمات
- ایجاد و تنظیم لیست متنی (Bulleted و Numbered Lists)
- تنظیم فاصله بین پاراگراف‌ها (Paragraph Spacing)
- حالت‌های Fixed و Auto-width برای فریم متن
- نمایش سرریز متن با Ellipsis
- تنظیمات خیلی پیشرفته‌تر متن در فیگما
- ایجاد فاصله در اول خط پاراگراف (Indent)
- تغییر شکل اعداد به حالت Monospace
- قرار دادن کلمه یا عدد به عنوان توان (Superscript)
ویدیوی کامل آموزش Text و Typography در Figma
اگر فیلترشکن شما خاموش است، ویدیو را همین‌جا از آپارات تماشا کنید. برای تماشای نسخه یوتیوب با بالاترین کیفیت، از دکمه‌های زیر استفاده کنید.
چرا باید ابزار متن تو فیگما رو بلد باشیم؟
متن تو طراحی UI/UX مثل یه ستون فقراته؛ از عنوان‌ها و توضیحات گرفته تا دکمه‌ها و لیبل‌ها، همه‌جا حضور داره. فیگما ابزار متن و تنظیماتش رو انقدر قوی و منعطف طراحی کرده که هر ایده‌ای که تو ذهنتون باشه رو می‌تونید پیاده کنید. تو این آموزش، از ساده‌ترین کارها مثل انتخاب ابزار متن تا تنظیمات پیشرفته‌تر مثل فونت‌های وریبل و فاصله‌گذاری رو با هم مرور می‌کنیم.
چطور ابزار متن یا Text را در فیگما انتخاب و فعال کنیم؟
برای شروع کار با متن تو فیگما، باید ابزار متن رو فعال کنید:
- از نوار ابزار: پایین صفحه، روی آیکون T کلیک کنید.
- با میانبر کیبورد: فقط کافیه کلید T رو فشار بدید.
بعدش هر جای صفحه که کلیک کنید، می‌تونید تایپ رو شروع کنید. به همین راحتی!
نکته کاربردی: میانبرها رو یاد بگیرید چون سرعت کارتون رو حسابی بالا می‌برن.
پنل تنظیمات متن در فیگما کجاست؟
قتی یه متن رو انتخاب می‌کنید، همه تنظیماتش تو یه پنل جمع‌وجور براتون باز می‌شه:
- پنل Properties: سمت راست صفحه، توی بخش Text، همه‌چیز از فونت و سایز گرفته تا فاصله‌گذاری‌ها رو می‌بینید.
از اینجا می‌تونید هر چیزی که نیاز دارید رو تغییر بدید.
چطور یک فونت را در فیگما انتخاب یا تغییر بدهیم؟
برای عوض کردن فونت متن:
- اول متن رو انتخاب کنید.
- تو پنل Text، روی اسم فونت کلیک کنید تا لیست فونت‌ها باز بشه.
- از تو لیست، فونت موردنظرتون رو انتخاب کنید.
Figma فونت‌های وب ارائه‌شده داخل محصول، فونت‌های نصب‌شده روی سیستم و در پلن‌های سازمانی فونت‌های Shared را در Font Picker در دسترس قرار می‌دهد.
چطور از فونت‌های گوگل به‌صورت مستقیم در فیگما استفاده کنیم؟
Google Fonts به‌عنوان Web Fonts داخل Font Picker فیگما در دسترس‌اند:
- Font Picker را باز کنید و در صورت نیاز فهرست را بر اساس Google Fonts/Web Fonts فیلتر یا نام فونت را جست‌وجو کنید.
- فونت موردنظرتون رو سرچ کنید و انتخابش کنید.
- فیگما خودش فونت رو بارگذاری می‌کنه و آماده استفاده‌ست.
برای Google Fonts موجود در Figma نیازی به نصب دستی ندارید؛ برای فونت‌های محلی، Desktop App مستقیما از فونت‌های نصب‌شده استفاده می‌کند و در Browser باید دسترسی فونت محلی/Font Helper فعال باشد.
فونت‌های وریبل چی هستند و چه ویژگی و کاربردی دارند؟
فونت‌های وریبل (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 (خط روی متن) رو فعال کنید.
این گزینه‌ها برای جلب توجه یا نشون دادن لینک‌ها خوبه.
چطور Letter Case متن را در Figma تغییر دهیم؟
برای تغییر حالت حروف:
- متن رو انتخاب کنید.
- تو پنل پیشرفته، روی آیکون Case کلیک کنید و یکی رو انتخاب کنید:
- Uppercase: همه حروف بزرگ
- Lowercase: همه حروف کوچک
- Title Case: حرف اول هر کلمه بزرگ
اینجوری می‌تونید سریع استایل متن رو عوض کنید.
چطور فاصله بالا و پایین کلمات را در فیگما حذف کنیم؟
برای حذف فاصله‌های اضافی بالا و پایین متن:
- فریم متن رو انتخاب کنید.
- تو پنل Properties، بخش پیشرفته تنظیم متن را فعال کنید و Vertical Trim را فعال کنید.
این کار باعث می‌شه متن تمیز و بدون فاصله اضافی تو فریم بشینه.
چطور در فیگما لیست متنی را ایجاد و آن را تنظیم کنیم؟
برای ساختن لیست:
- متن رو انتخاب کنید.
- تو پنل پیشرفته، روی List Style کلیک کنید و نوعش رو انتخاب کنید (شماره‌دار یا بولت).
- می‌تونید فاصله بین آیتم‌ها رو هم تنظیم کنید.
لیست‌ها برای مرتب کردن اطلاعات خیلی به کار می‌آن.
چطور فاصله بین پاراگراف‌ها در فیگما تنظیم کنیم؟
برای تنظیم فاصله بین پاراگراف‌ها:
- متن رو انتخاب کنید.
- تو پنل پیشرفته، تو بخش Paragraph Spacing، عدد دلخواهتون رو وارد کنید.
این کار باعث می‌شه پاراگراف‌ها از هم جدا و خواناتر بشن.
چطور فریم متن را در فیگما ثابت یا منعطف کنیم؟
Text layer در Figma سه حالت اصلی Resizing دارد:
- Auto width: عرض لایه با تغییر محتوا بزرگ یا کوچک می‌شود.
- Auto height: عرض ثابت می‌ماند و ارتفاع با زیاد یا کم شدن متن تغییر می‌کند.
- Fixed size: عرض و ارتفاع ثابت می‌مانند و متن داخل همان محدوده Wrap می‌شود.
برای تغییرش:
- فریم رو انتخاب کنید.
- تو پنل Properties، بخش Resizing، گزینه Fixed یا Auto رو بزنید.
این تنظیم برای طراحی‌های ریسپانسیو خیلی مهمه.
چطور سرریز متن را در فیگما با … نشان دهیم؟
برای نشون دادن متن اضافی با …:
- فریم متن رو ثابت کنید.
- تو پنل پیشرفته، گزینه Turncate Text رو فعال کنید.
اینجوری اگه متن از فریم بیرون بزنه، با … نشون داده می‌شه.
چطور یک کلمه یا عدد را به‌عنوان توان یا اندیس در فیگما قرار دهیم؟
برای قرار دادن توان (مثل ²):
- کلمه رو انتخاب کنید.
- تو پنل Type settings، تو تب Details، و در بخش Number قسمت Position رو بسته به نیاز خود فعال کنید.
اینجوری می‌تونید اعداد یا کلمات رو به‌صورت توان نشون بدید.
تو این پست همه‌چیز درباره ابزار متن تو فیگما رو با هم مرور کردیم؛ از انتخاب فونت و تنظیم سایز گرفته تا کار با فونت‌های وریبل و تنظیمات پیشرفته. امیدوارم این آموزش بهتون کمک کنه تا متن‌هاتون رو تو طراحی‌ها حرفه‌ای‌تر کنید. پیشنهاد می‌کنم حتماً با این ابزارها توی فیگما تمرین کنید تا دستتون راه بیفته. ویدیوی کامل این قسمت رو هم ببینید که همه‌چیز رو با جزئیات بیشتر نشون می‌ده. اگه سوال یا نظری دارید، تو کامنت‌ها بگید. تا آموزش بعدی، موفق باشید!
تنظیمات جدید Typography در Figma
در UI فعلی Figma، تنظیمات متنی فقط به Font، Size و Line Height محدود نیستند. در Type Settings می‌توانید Wrap style، Truncate و حداکثر تعداد خطوط، Paragraph spacing و Indentation، Letter case، فهرست‌های شماره‌دار و Bulleted و بسیاری از قابلیت‌های OpenType را کنترل کنید.
اگر فونت شما Variable باشد، تب Variable محورهایی مثل Weight، Width، Optical size و Slant را نمایش می‌دهد؛ محورهای دقیق به خود فونت بستگی دارند. Text Styles هم برای ساخت یک مقیاس تایپوگرافی قابل‌استفاده مجدد در فایل‌ها و Libraryها مناسب‌اند.
برای فونت‌های نصب‌شده روی سیستم، نسخه Desktop Figma مستقیما به فونت‌های محلی دسترسی دارد. در Browser برای استفاده از فونت‌های نصب‌شده باید دسترسی Font Helper/Local Fonts برقرار باشد. این تفاوت هنگام کار تیمی مهم است، چون نسخه متفاوت یک فونت می‌تواند باعث تغییر Layout متن شود.
جمع‌بندی و ادامه مسیر
- قسمت قبل: آموزش Pen Tool در Figma – قسمت ۱۱
- قسمت بعد: آموزش Components در Figma – قسمت ۱۳
- کل مسیر: آموزش‌های Figma در LearnUIX
- مسیر عمیق‌تر طراحی رابط: UI Design Plus
