Variables در فیگما؛ آموزش متغیرها از رنگ تا حالت‌های مختلف

Variable در فیگما مقداری قابل‌استفاده‌ی مجدد است، مثل یک رنگ، یک عدد برای فاصله، یک متن یا یک مقدار درست و غلط، که یک بار تعریف می‌کنید و بعد به هر لایه‌ای که لازم است وصل می‌کنید. تفاوت اصلی‌اش با استایل این است که یک متغیر می‌تواند در «مودهای» مختلف مقدار متفاوتی داشته باشد؛ مثلاً یک رنگ در حالت روشن سفید و در حالت تیره خاکستری تیره باشد.

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

متغیر در فیگما چیست و چه انواعی دارد؟

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

• رنگ (Color): برای پرکردن لایه‌ها، رنگ متن و حاشیه. مقدارش یک رنگ تخت با شفافیت اختیاری است.
• عدد (Number): برای فاصله‌گذاری، پدینگ، شعاع گوشه، ضخامت حاشیه، ابعاد و حتی اندازه‌ی فونت و ارتفاع خط.
• متن (String): برای محتوای لایه‌های متنی یا نام خانواده‌ی فونت؛ کاربرد مهمش ساخت نسخه‌ی چندزبانه است.
• بولین (Boolean): مقدار درست یا غلط؛ برای نمایش یا پنهان کردن لایه‌ها و منطق پروتوتایپ.

در مستندات فعلی فیگما دو نوع دیگر هم برای حرکت دیده می‌شود: زمان‌بندی (Timing) و منحنی حرکت (Easing). این دو برای یکدست کردن انیمیشن‌های پروتوتایپ کاربرد دارند و چون جدیدتر هستند، پیش از استفاده‌ی گسترده در تیم، در نسخه‌ی فیگمای خودتان امتحانشان کنید.

کالکشن، گروه و مود؛ سه مفهوم کلیدی متغیرهای فیگما

کالکشن (Collection)

کالکشن ظرف اصلی متغیرهاست. معمولاً هر لایه از دیزاین توکن‌ها یک کالکشن جدا دارد؛ مثلاً یک کالکشن «Primitives» برای همه‌ی رنگ‌ها و پله‌های عددی و یک کالکشن «Semantic» برای نقش‌ها. طبق مستندات فیگما، هر کالکشن می‌تواند تا ۵٬۰۰۰ متغیر داشته باشد.

گروه (Group)

گروه‌ها داخل کالکشن هستند و فقط برای نظم به کار می‌روند. اگر نام متغیر را با اسلش بنویسید، مثلاً text/primary، فیگما خودش آن را در گروه text قرار می‌دهد. این نام‌گذاری بعداً در خروجی کد هم به ساختار تودرتو تبدیل می‌شود.

مود (Mode)

مود ستون‌های اضافه‌ی یک کالکشن است. هر متغیر برای هر مود یک مقدار جدا دارد. رایج‌ترین مثال، مود روشن و تیره است، ولی مود برای برندهای مختلف، تراکم (فشرده و راحت)، اندازه‌ی صفحه یا زبان هم کاربرد دارد. تعداد مود مجاز به پلن بستگی دارد: طبق جدول پلن‌های فیگما، پلن Professional تا ۱۰ مود و Organization تا ۲۰ مود در هر کالکشن دارند و در Enterprise با کالکشن‌های گسترش‌یافته محدودیت مود برداشته شده است. در پلن رایگان امکان‌ها محدودتر است، پس قبل از طراحی ساختار، جدول به‌روز پلن‌ها را در مرکز راهنمای فیگما ببینید.

الیاس و اسکوپ؛ دو قابلیتی که متغیر را به توکن تبدیل می‌کند

الیاس (Alias) یعنی یک متغیر به‌جای مقدار خام به متغیر دیگری اشاره کند. مثلاً متغیر bg/surface در مود روشن به gray/50 و در مود تیره به gray/900 اشاره می‌کند. این همان ساختار لایه‌ای است که در مقاله‌ی دیزاین توکن چیست توضیح دادیم و فقط بین متغیرهای هم‌نوع ممکن است.

اسکوپ (Scope) تعیین می‌کند هر متغیر در کدام فیلدها پیشنهاد داده شود. اگر متغیرهای رنگ متن را فقط به Text fill محدود کنید، وقتی طراح رنگ پس‌زمینه را انتخاب می‌کند، آن‌ها را در فهرست نمی‌بیند. این کار جلوی خطاهای رایج را می‌گیرد و فهرست انتخاب را کوتاه می‌کند. پیشنهاد عملی: متغیرهای کالکشن پایه را از همه‌ی فیلدها پنهان کنید تا طراحان فقط از لایه‌ی معنایی استفاده کنند.

در تنظیمات هر متغیر می‌توانید «نحو کد» (Code syntax) را هم برای وب، اندروید و iOS بنویسید. این نام در حالت توسعه‌دهنده (Dev Mode) به برنامه‌نویس نشان داده می‌شود تا به‌جای کد رنگ، نام توکن واقعی را در کد ببیند.

قدم‌به‌قدم: ساخت اولین متغیرها در فیگما

• بدون انتخاب هیچ لایه‌ای، در پنل سمت راست بخش Variables را باز کنید و یک کالکشن جدید بسازید.
• کالکشن اول را Primitives بنامید و رنگ‌های پایه را با نام‌هایی مثل blue/600 و gray/100 اضافه کنید. همین‌جا پله‌های عددی مثل space/8 و space/16 را هم تعریف کنید.
• کالکشن دوم را Semantic بنامید و متغیرهایی مثل bg/surface، text/primary و border/default بسازید. مقدار هر کدام را با الیاس به Primitives وصل کنید.
• در Semantic روی علامت افزودن مود بزنید و دو مود Light و Dark بسازید. فقط مقصد الیاس‌ها را در مود Dark عوض کنید.
• اسکوپ هر متغیر را تنظیم کنید و متغیرهای Primitives را از انتخاب‌گرها پنهان کنید.
• یک فریم بسازید، رنگ پس‌زمینه را روی bg/surface بگذارید و در پنل سمت راست مود فریم را عوض کنید تا تغییر را ببینید.

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

متغیرهای عددی در اتولی‌اوت و تایپوگرافی

قدرت واقعی متغیرهای عددی وقتی معلوم می‌شود که با اتولی‌اوت در فیگما ترکیب شوند. فاصله‌ی بین آیتم‌ها (Gap)، پدینگ و شعاع گوشه‌ی هر فریم اتولی‌اوت را می‌شود به متغیر وصل کرد. اگر روزی تصمیم بگیرید فاصله‌ی داخلی کارت‌ها از ۱۶ به ۲۰ برسد، یک مقدار را عوض می‌کنید و همه‌ی کارت‌ها به‌روز می‌شوند.

یک کاربرد پیشرفته‌تر، کالکشن تراکم (Density) است: مود «فشرده» برای پنل‌های مدیریتی و مود «راحت» برای اپ موبایل. کامپوننت‌ها یکی هستند و فقط مود فریم بیرونی عوض می‌شود. همین منطق برای ابعاد صفحه هم کار می‌کند؛ مثلاً اندازه‌ی تیترها در مود موبایل کوچک‌تر از دسکتاپ تعریف شود.

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

متغیر متنی و بولین؛ چندزبانه کردن طرح و منطق پروتوتایپ

فرض کنید اپ شما نسخه‌ی فارسی و انگلیسی دارد. یک کالکشن Content بسازید با دو مود «فارسی» و «English». متغیر متنی cta/checkout در مود فارسی «ادامه‌ی خرید» و در مود انگلیسی Checkout است. حالا با عوض کردن مود صفحه، همه‌ی متن‌ها جابه‌جا می‌شوند و راحت می‌بینید کدام دکمه با متن طولانی‌تر می‌شکند. جهت راست‌چین و چپ‌چین را هنوز باید جداگانه بررسی کنید، ولی تست طول متن بسیار سریع‌تر می‌شود.

در پروتوتایپ، متغیرها حافظه‌ی طرح شما هستند. با اکشن Set variable می‌توانید مثلاً یک متغیر عددی cartCount را با هر کلیک روی «افزودن به سبد» یکی زیاد کنید و آن را در نشان سبد نمایش دهید. با شرط‌ها (Conditional) هم می‌شود گفت اگر cartCount صفر بود، حالت خالی سبد نمایش داده شود. متغیر بولین isLoggedIn هم برای نشان دادن دو نسخه‌ی یک صفحه به کاربر واردشده و مهمان کافی است. اکشن Set variable mode هم امکان می‌دهد در پروتوتایپ یک دکمه‌ی تغییر تم بسازید.

توجه کنید که انتشار متغیرها در کتابخانه‌ی تیمی و استفاده از آن‌ها در پروتوتایپ، طبق راهنمای فیگما به پلن‌های پولی (Professional و بالاتر یا Education) نیاز دارد.

اشتباه‌های رایج در کار با متغیرهای فیگما

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

متغیرها یا استایل‌ها؛ کدام را کجا استفاده کنیم؟

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

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

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

آیا متغیرهای فیگما در پلن رایگان کار می‌کنند؟

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

می‌شود از متغیرهای فیگما خروجی کد گرفت؟

بله. فیگما امکان خروجی گرفتن از مودها به‌صورت فایل JSON در قالب DTCG را اضافه کرده است و API فیگما هم دسترسی به متغیرها را می‌دهد. ابزارهایی مثل Style Dictionary این فایل را به CSS یا کد موبایل تبدیل می‌کنند.

فرق مود با واریانت چیست؟

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

برای تایپوگرافی هم باید متغیر بسازم؟

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

جمع‌بندی: متغیرها ستون فقرات فایل فیگمای شما هستند

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

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