نصب و استفاده از فونت فارسی در فیگما؛ حل مشکل راست‌چین

برای استفاده از فونت فارسی در فیگما دو راه دارید: فونت‌هایی مثل وزیرمتن (Vazirmatn) را که در فهرست فونت‌های فیگما موجودند مستقیم انتخاب کنید، یا فایل فونت را روی ویندوز یا مک نصب کنید تا اپ دسکتاپ فیگما آن را ببیند. فیگما از متن راست‌به‌چپ و ترکیب فارسی و انگلیسی پشتیبانی بومی دارد؛ پس اگر متن شما هنوز به‌هم‌ریخته یا چپ‌چین است، مشکل معمولاً در تنظیم جهت، چینش متن یا نسخه‌ی فونت است، نه در خود فیگما.

در ادامه از انتخاب فونت مناسب تا نصب، تنظیم راست‌چین، اعداد فارسی و هماهنگ کردن فونت‌ها در فایل تیمی را قدم‌به‌قدم می‌بینید.

کدام فونت فارسی برای فیگما مناسب است؟

پیش از نصب، تصمیم بگیرید فونت قرار است کجا استفاده شود. فونتی که در فیگما زیباست ولی برنامه‌نویس حق یا امکان استفاده از آن را در سایت یا اپ ندارد، فقط مشکل را به عقب می‌اندازد.

فونت‌های رایگان و متن‌باز

• وزیرمتن (Vazirmatn): متن‌باز، با وزن‌های متنوع و موجود در Google Fonts؛ بنابراین بدون نصب در فهرست فونت‌های فیگما پیدا می‌شود.
• Noto Sans Arabic و Noto Naskh Arabic: خانواده‌ی گسترده‌ی گوگل که از حروف فارسی پشتیبانی می‌کند و برای متن‌های چندزبانه مناسب است.
• IBM Plex Sans Arabic: ظاهری فنی و منظم که کنار IBM Plex لاتین هماهنگ است.

فونت‌های تجاری ایرانی

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

معیار انتخاب ساده است: خوانایی در اندازه‌های کوچک (۱۲ تا ۱۴ پیکسل)، تعداد وزن‌ها (دست‌کم Regular، Medium و Bold)، هماهنگی با فونت لاتین محصول و وجود نسخه‌ای با اعداد فارسی. درباره‌ی انتخاب و ترکیب فونت در یک سیستم طراحی، مقاله‌ی ساخت سیستم تایپوگرافی را ببینید.

نصب فونت فارسی در فیگما، قدم‌به‌قدم

روی ویندوز و مک

• فایل‌های فونت با پسوند TTF یا OTF را دانلود و از حالت فشرده خارج کنید.
• در ویندوز روی فایل راست‌کلیک کنید و Install for all users را بزنید؛ در مک فایل را باز کنید و در Font Book گزینه‌ی Install را انتخاب کنید.
• همه‌ی وزن‌ها را نصب کنید، نه فقط Regular؛ وگرنه در فیگما Bold شبیه‌سازی نمی‌شود و گزینه‌اش را نمی‌بینید.
• فیگما را کامل ببندید و دوباره باز کنید تا فهرست فونت‌ها تازه شود.

اپ دسکتاپ یا مرورگر؟

اپ دسکتاپ فیگما ابزار دسترسی به فونت‌های محلی را در خود دارد و معمولاً بعد از نصب و راه‌اندازی دوباره، فونت را می‌بیند. اگر در مرورگر کار می‌کنید، باید برنامه‌ی کمکی فونت فیگما (Font installer) را جداگانه نصب کنید؛ بدون آن مرورگر به فونت‌های سیستم دسترسی ندارد. اگر فونت با وجود نصب دیده نمی‌شود، نسخه‌های تکراری همان فونت را از سیستم حذف کنید، فقط یک نسخه را دوباره نصب کنید و سیستم را راه‌اندازی مجدد کنید.

حل مشکل راست‌چین در فیگما

فیگما به‌طور پیش‌فرض جهت متن را با تشخیص زبان تعیین می‌کند، اما چینش (Alignment) لایه‌ی متن به‌طور پیش‌فرض چپ است. یعنی متن فارسی درست از راست به چپ نوشته می‌شود ولی به لبه‌ی چپ جعبه می‌چسبد. این دو تنظیم جدا هستند و هر دو را باید درست کنید.

• چینش: در بخش Typography پنل راست، چینش راست را انتخاب کنید.
• جهت متن: وقتی فیگما خط راست‌به‌چپ را در لایه تشخیص دهد، کلید تغییر جهت RTL و LTR در پنل راست ظاهر می‌شود. از منوی اصلی، بخش Text و گزینه‌ی Text direction هم می‌توانید جهت را دستی تعیین کنید.
• عرض لایه: برای پاراگراف‌ها عرض را ثابت یا Fill بگذارید؛ در حالت Auto width چینش راست عملاً اثری ندارد چون جعبه هم‌اندازه‌ی متن است.

یک نکته‌ی کاربردی: فیگما چینش آخرین لایه‌ی متنی را که ویرایش کرده‌اید به خاطر می‌سپارد. پس بعد از ساختن اولین متن راست‌چین، متن‌های بعدی هم معمولاً راست‌چین ساخته می‌شوند؛ اما بهترین راه، تعریف استایل متن (Text style) با چینش و ارتفاع خط درست است تا هر بار از صفر تنظیم نکنید.

متن ترکیبی فارسی و انگلیسی

در جمله‌ای مثل «سفارش شما با کد ABC-123 ثبت شد» فیگما به‌خاطر پشتیبانی دوجهته (Bidirectional) ترتیب کلمات را درست نشان می‌دهد، ولی جهت پاراگراف باید راست‌به‌چپ باشد. اگر علامت نقطه یا پرانتز در انتهای خط به سمت اشتباه می‌پرد، تقریباً همیشه جهت پاراگراف روی LTR مانده است. حرکت مکان‌نما و انتخاب متن در جمله‌های ترکیبی هم کمی متفاوت رفتار می‌کند؛ کلیدهای جهت نسبت به جهت متن عمل می‌کنند، نه جهت صفحه‌کلید.

متن‌های قدیمی ساخته‌شده با پلاگین

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

اعداد فارسی، نیم‌فاصله و جزئیات تایپی

بیشتر فونت‌ها رقمی را نشان می‌دهند که تایپ کرده‌اید: اگر با صفحه‌کلید انگلیسی ۱۲۳ بزنید، رقم لاتین می‌بینید. دو راه دارید: اعداد را با صفحه‌کلید فارسی تایپ کنید، یا از نسخه‌ای از فونت استفاده کنید که رقم‌های لاتین را به شکل فارسی نمایش می‌دهد. برخی فونت‌ها چنین نسخه‌ای را با پسوندهایی مثل FaNum یا FD عرضه می‌کنند.

تصمیم درباره‌ی اعداد را با برنامه‌نویس هماهنگ کنید. اگر در طرح از نسخه‌ی FaNum استفاده کنید ولی در کد فونت معمولی بارگذاری شود، قیمت‌ها و تاریخ‌ها در محصول نهایی با رقم لاتین نمایش داده می‌شوند و طرح شما با خروجی یکی نخواهد بود.

• نیم‌فاصله را در فیگما با همان کلید صفحه‌کلید فارسی سیستم تایپ کنید؛ در چیدمان استاندارد فارسی ویندوز معمولاً Shift + Space است.
• اگر متن را از جای دیگری کپی می‌کنید، دنبال «ی» و «ک» با کدگذاری عربی بگردید (نویسه‌هایی که ظاهرشان شبیه است ولی کدشان فرق دارد)؛ برخی فونت‌ها شکل آن‌ها را متفاوت نشان می‌دهند و جست‌وجو در محصول هم خراب می‌شود.
• ارتفاع خط متن فارسی را کمی بیشتر از متن لاتین در نظر بگیرید، چون حروف فارسی دندانه و نقطه‌های بالا و پایین بیشتری دارند.
• اگر نویسه‌ای در فونت نباشد، فیگما آن را با یک فونت Noto جایگزین می‌کند؛ پس اگر یک علامت ظاهر متفاوتی دارد، احتمالاً فونت شما آن را ندارد.

چیدمان راست‌به‌چپ با اتولی‌اوت

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

فونت فارسی در فایل‌های تیمی: مشکل فونت گم‌شده

وقتی فایلی را باز می‌کنید که فونت آن روی سیستم شما نصب نیست، فیگما هشدار فونت گم‌شده (Missing fonts) نشان می‌دهد و متن‌ها را با فونت جایگزین نمایش می‌دهد. می‌توانید فونت را نصب کنید یا از همان هشدار، فونت جایگزین را برای کل فایل انتخاب کنید؛ ولی جایگزینی سراسری را با احتیاط انجام دهید چون ممکن است فاصله‌ها و شکستن خطوط تغییر کند.

• یک فایل یا صفحه‌ی «راهنمای فونت» بسازید: نام دقیق فونت، نسخه، وزن‌های استفاده‌شده و منبع دانلود مجاز.
• همه‌ی اعضای تیم یک نسخه‌ی واحد از فونت را نصب کنند؛ دو نسخه‌ی متفاوت از یک فونت، فاصله‌ها را چند پیکسل جابه‌جا می‌کند.
• در پلن‌های Organization و Enterprise فیگما، مدیر سازمان می‌تواند فونت را برای همه‌ی اعضا بارگذاری کند (فقط TTF و OTF و با رعایت مجوز)؛ در پلن‌های پایین‌تر هر عضو باید فونت را خودش نصب کند.
• در استایل‌های متن به‌جای انتخاب دستی فونت در هر لایه، از Text style استفاده کنید تا تغییر فونت فقط در یک نقطه لازم باشد.

سوالات متداول

چرا فونت فارسی نصب‌شده در فیگما نمایش داده نمی‌شود؟

معمولاً یا فیگما بعد از نصب دوباره باز نشده، یا در مرورگر کار می‌کنید و Font installer نصب نیست، یا چند نسخه‌ی متفاوت از همان فونت روی سیستم هست. نسخه‌های تکراری را حذف کنید و فیگما را از نو اجرا کنید.

آیا برای فارسی‌نویسی در فیگما هنوز پلاگین لازم است؟

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

چرا اعداد در فیگما انگلیسی نمایش داده می‌شوند؟

چون رقم لاتین تایپ شده و فونت شما آن را به شکل فارسی نمایش نمی‌دهد. اعداد را با صفحه‌کلید فارسی بنویسید یا از نسخه‌ی اعداد فارسی فونت استفاده کنید و این انتخاب را با برنامه‌نویس هماهنگ کنید.

بهترین فونت فارسی رایگان برای طراحی رابط کاربری چیست؟

وزیرمتن انتخاب امن و رایجی است چون متن‌باز است، وزن‌های زیادی دارد و در Google Fonts هست. انتخاب نهایی به لحن برند و هماهنگی با فونت لاتین محصول بستگی دارد.

متن فارسی درست، پایه‌ی هر طرح فارسی

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