آموزش فیگما؛ چهار مفهومی که بقیه اش را می سازند

فیگما دقیقا چه چیزی است و چرا در مرورگر است؟

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

تفاوت ساختاری اش با فتوشاپ و ایلاستریتور جای فایل است. فایل روی سرور خودشان می ماند و شما در مرورگر رویش کار می کنید. سه نتیجه مستقیم دارد و هر سه مهم اند. اول، چند نفر هم زمان داخل یک فایل اند و مکان نمای هم را می بینند، پس بازبینی طراحی از فرستادن عکس به تلگرام در می آید و به گذاشتن کامنت روی خود عنصر تبدیل می شود. دوم، «نسخه نهایی ۳» دیگر وجود ندارد چون نسخه ها تاریخچه اند نه فایل. سوم که کمتر گفته می شود: فایل شما در حساب کسی زندگی می کند و شرایط آن حساب هم مال شما نیست.

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

چهار مفهومی که یاد گرفتنشان کافی است

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

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

استایل و متغیر یعنی به رنگ و فونت و فاصله اسم بدهید. «آبی اصلی» یک تصمیم است؛ کد رنگ فقط یک عدد است. وقتی چیزی اسم دارد، می شود جای دیگری عوضش کرد و همه جا اثر بگذارد، و مهم تر اینکه اسمی که شما گذاشته اید همان اسمی می شود که برنامه نویس در کد می نویسد.

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

هر چیز دیگری که در فیگما هست، تقریبا بدون استثنا، روی همین چهار مفهوم سوار است.

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

عددها را از صفحه های خود فیگما می خوانیم و نه از مقایسه های دست دوم.

صفحه قیمت گذاری برای پلن Starter می نویسد: درفت نامحدود، کیت ها و قالب های رابط، و ۱۵۰ اعتبار هوش مصنوعی در روز تا سقف ۵۰۰ در ماه. صفحه راهنمای پلن ها محدودیتی را روشن می کند که در صفحه قیمت به این صراحت نیست: یک تیم با یک پوشه و سه فایل، و تاریخچه نسخه ۳۰ روز. پلن Professional برای هر صندلی کامل ۱۶ دلار در ماه است.

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

تاریخچه ۳۰ روزه هم یک محدودیت واقعی است که در تبلیغ دیده نمی شود. اگر پروژه ای شش ماه طول بکشد، نسخه ای که سه ماه پیش داشتید در پلن رایگان دیگر برگشت پذیر نیست. راه حل ساده و رایگانش این است: در نقطه های مهم پروژه، یک خروجی از صفحه های اصلی بگیرید و کنار فایل های پروژه نگه دارید.

تحویل به برنامه نویس؛ جایی که فایل زیبا به کد بد می رسد

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

یک مثال از همین سایت. کل لایه رنگ و شکل rgb.ir در یک بلوک root تعریف شده: ۲۸ توکن که ۱۹ تای آن رنگ یا گرادیان است و چهار پله گردی دارد، ۱۲ و ۱۸ و ۲۶ و ۳۴ پیکسل. برنامه نویس این سایت هیچ وقت کد رنگ نمی نویسد؛ اسم می نویسد. نتیجه اش این است که وقتی تصمیم گرفتیم شکل کپسولی از سایت برود، شعاع دکمه در یک جا شد ۱۵ و چیپ در یک جا شد ۱۲ و کل سایت عوض شد. اگر همان تصمیم داخل چهل فریم فیگما دستی تکرار شده بود، یک روز کار بود.

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

یک عادت که بحث را تمام می کند: نام گذاری فیگما را به همان چیزی نزدیک کنید که در کد وجود دارد. اگر کد --blue دارد، استایل هم blue باشد و نه «آبی روشن دوم». مسیر سریع پایین همین درس، دقیقا همین کار را از روی سایت زنده انجام می دهد.

متن فارسی و راست به چپ در فیگما

صفحه راهنمای خود فیگما می نویسد متن راست به چپ پشتیبانی می شود، از جمله عربی و عبری و فارسی و اردو، و جهت متن به صورت خودکار از روی تشخیص زبان تعیین می شود و می توانید دستی هم عوضش کنید. کنترل هایش سه جا هستند: نوار کناری، منوی کارهای سریع با Cmd و اسلش یا Ctrl و اسلش، و منوی اصلی زیر Text و Text direction. همان صفحه می نویسد این قابلیت روی هر پلنی کار می کند و در فایل های Figma Design و FigJam در دسترس است.

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

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

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

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

هر درسی که فقط بگوید این ابزار خوب است، نصف کار را نکرده. چهار جا فیگما انتخاب اشتباهی است.

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

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