ویرایش متن در فیگما

مدت زیادیه منتظر فرصتم تا یه مجموعه پست و ویدیو آماده کنم برای افزایش سرعت کار در فیگما، مثل معرفی پلاگین، ترفندهای جالب، میونبرهای به درد بخور و ...

اگه نمی‌دونید فیگما چیه، باید بگم که یه ابزار طراحیه که دیر اومده اما زود داره می‌ره جلو.

تو این مطلب قراره به نوشتن در فیگما بپردازیم.

اگه آموزش به صورت ویدیویی رو ترجیح می‌دی می‌تونی این ویدیو رو ببینی.

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

• کلیک روی متن‌هایی که قبلاً نوشتید برای ویرایش یا انتخاب بخشی از اون‌ها برای حذف یا ویرایش.
• کلیک روی هر جای صفحه و ایجاد یه کادر با عرض و ارتفاع آزاد برای نوشتن. این کادر هر چقدر که بنویسید ابعادش بزرگ می‌شه و خطوط رو نمی‌شکنه مگر اینکه خودتون برید به خط بعد.
• کلیک و کشیدن یک کادر، در این حالت ابعاد کادر ثابت خواهد بود و خطوط متن شکسته می‌شه تا در عرض کادر جا بشه، اگر تعداد خطوط هم از ارتفاع کادر زیادتر باشه، از کادر بیرون خواهد‌زد، اگه بخواید این اتفاق نیفته باید از نوار ابزار سمت راست مقدار تنظیم ابعاد رو بگذارید روی Auto Height، مثل تصویری که در ادامه می بینید.

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

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

یه نکته هم اینکه اگه خواستید از نسخهٔ وب فیگما استفاده کنید و فونت‌های روی کامپیوترتون رو هم بتونید استفاده کنید، باید از این صفحه Font Installer رو نصب کنید.
یه راهش هم اینه که پلن Organization بخرید و فونت‌ها رو بگذارید روی سرور فیگما تا همهٔ اعضای تیمتون بهش دسترسی داشته‌باشند که خب خیلی گرون می‌شه?

کلاً فیگما در حال حاضر پشتیبانی خوبی از زبان‌های راست به چپ نداره، قولش رو داده که درستش می‌کنه، اما الان که اردیبهشت ۱۴۰۰ هست هنوز اتفاق جدیدی در این مورد نیفتاده.

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

پلاگین RTL PLZ رو از اینجا می‌تونید نصب کنید

• این پلاگین چهار تا فرمان اصلی در منوی خودش داره:

Editor

این گزینه باعث می‌شه پنجرهٔ ویرایشگر پلاگین باز بشه و بتونید از امکاناتش استفاده‌کنید ه در ادامه توضیح می‌دم.

Reverse

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

Rewrap

این گزینه برای وقتایی مناسبه که یه متنی رو توی کادری با عرض ثابت نوشتید و حالا ابعاد کادر رو تغییر دادید و دیگه نمی‌خواید ویرایشگر رو باز کنید، کافیه یه بار بعد از اینکه ابعاد کادر رو تغییر دادید این گزینه رو اجرا کنید.

Reset

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

خب بریم سراغ پنجرهٔ ویرایشگر پلاگین. داخل پنجرهٔ پلاگین دو تا تب برای ویرایش متن وجود داره:

Editor

توی این تب کافیه یک یا چند لایه رو انتخاب کنید و شروع به نوشتن کنید، متنی که می‌نویسید روی همهٔ لایه‌هایی که انتخاب کردید اعمال می شه.

Batch Editor

این تب برای ویرایش دسته‌جمعیه ولی به صورت جدا جدا، یعنی به جای اینکه هر لایه رو انتخاب کنید و بعد بیاین تو ادیتور، همهٔ لایه‌‌هایی که می‌خواید یا گروهشون رو یا فریمشون رو انتخاب کنید و لیست لایه‌های متنی رو توی Batch Editor ببینید و هر کدوم رو ویرایش کنید. می‌تونید با زدن کلید تب بین ردیف های مختلف پیمایش کنید تا سرعتتون بیشتر بشه. من به شخصه از این تب برای ویرایش متن‌های انگلیسی هم استفاده می‌کنم چون دیگه نیاز نیست هر لایه رو جدا انتخاب کنم.

میونبرها

توی فیگما هر بار که یک پلاگین رو از روش‌هایی که بالاتر گفته‌شد اجرا کنید، در صورت نیاز می‌تونید با زدن کلیدهای ترکیبی ctrl+alt+P در ویندوز و command+option+P در مک اون رو تکرار کنید.

وقتی یک لایه رو با پلاگین RTL PLZ ویرایش کنید به سایدبار سمت راست دو تا میونبر برای Editor و Rewrap داده‌میشه تا دسترسی سریع‌تری داشته‌باشید. نکته‌ٔ جالب اینه که این دو تا میونبر تأثیری روی اون میونبر قبلی ندارن، یعنی اگر از اینا استفاده کردین با ctrl+alt+P نمی‌شه تکرارش کنید.

انتقال به توسعه‌دهنده

یکی از مشکلاتی که فارسی‌نوشتن به این روش داره، اینه که توسعه‌دهنده‌ها و حتی بعضی پلاگین‌ها که از متن لایه استفاده می‌کنن (مثل anima) به مشکل می خورن برای خوندن و استفاده از متن لایه، چون متن‌ها معکوس شدن. فعلاً برای توسعه‌دهنده‌ها یه راهکار وجود داره و اون اینه که طراح قبل از اینکه طرح رو به توسعه‌دهنده تحویل بده، یک بار از پلاگین RTL PLZ Handoff استفاده کنه تا با ترفندی که پلاگین به کار می‌بره باعث بشه توسعه‌دهنده بتونه از پنل inspector متن درست رو کپی کنه. روش کار هم ساده‌هست، بعد از اینکه کار طراحیتون تموم شد، هر تعداد فریم که می‌خواید رو انتخاب کنید و پلاگین رو اجرا کنید و منتظر بمونید تا کارش تموم بشه :)