برای اینکه همکاری خوبی داشته باشیم، لازمه که توانایی‌ها و محدودیت‌های ابزارهای همدیگه رو بفهمیم. واسه همین می‌خوام دنیای طراحی و همه رازهای کوچیک Figma که شاید باهاشون آشنا نباشی رو نشونت بدم.برای اینکه همکاری خوبی داشته باشیم، لازمه که توانایی‌ها و محدودیت‌های ابزارهای همدیگه رو بفهمیم. واسه همین می‌خوام دنیای طراحی و همه رازهای کوچیک Figma که شاید باهاشون آشنا نباشی رو نشونت بدم.
در فیگما، می‌تونیم قطعات رابط کاربری قابل استفاده‌ی مجدد (کامپوننت) بسازیم و ازشون چندین بار استفاده کنیم. علاوه بر این، امکان لانه‌سازی کامپوننت‌ها هم وجود داره. این قابلیت‌ها به ما اجازه می‌دهن الگوی طراحی اتمی رو به خوبی پیاده‌سازی کنیم.
در فیگما، علاوه بر قابلیت‌های قبلی، می‌تونیم مجموعه‌ای از کامپوننت‌ها به‌نام مجموعه کامپوننت (component set) بسازیم که حاوی واریانت‌های مختلفی هستن. این واریانت‌ها رو می‌تونیم از طریق پنل Properties به راحتی تو کل طرحمون عوض کنیم. به این ترتیب، همه حالت‌های مختلف یک کامپوننت رو برای مستندسازی تو یه جا داریم.
واریانت‌های فیگما می‌تونن تک‌بعدی یا چندبعدی باشن و شامل چندین ویژگی همزمان بشن. یعنی فقط به تغییر یه رنگ محدود نمی‌مونیم، بلکه می‌تونیم ترکیبی از ویژگی‌ها رو تغییر بدیم.
نکته: یه راه سریع برای تغییر کلی یه کامپوننت!
اگه تو فیگما نیاز به چیزی دارید که کل ظاهر یه کامپوننت رو دگرگون کنه، مثلاً حالت روشن/تاریک، می‌تونید از ویژگی درست/نادرست (true/false) یا بله/خیر (yes/no) استفاده کنید. با این کار یه کلید یهویی برای کل کامپوننت ایجاد کردید!
این ترفند رو تو کیت رابط کاربری فوق‌العاده‌ی iOS 16 برای فیگما که توسط Joey Banks طراحی شده دیدم. به نظرم بهترین تنظیمات فایلی بود که تا الان دیدم!
فیگما توی مارس ۲۰۲۲ یه آپشن فوق‌العاده به اسم Properties (ویژگی‌ها) اضافه کرد. فکر می‌کنم خیلی از توسعه‌دهنده‌ها هنوز نمی‌دونن میشه از این قابلیت توی طراحی استفاده کرد. فعلاً ویژگی‌های جذابی مثل متن، تعویض و روشن/خاموش داریم. و خب، میشه همه این‌هارو با هم ترکیب کرد تا کارای بیشتری انجام داد.
همونطور که تو کد، می‌تونیم بخش‌های قابل استفاده‌ی مجدد رو به صورت محلی ذخیره کنیم یا کتابخونه‌های خارجی درست کنیم، فیگما هم این امکان رو برای کامپوننت‌ها و استایل‌ها فراهم کرده.
با این کار، می‌تونیم اجزا رو توی چندین فایل فیگما استفاده کنیم، در حالی که یه مرجع اصلی قابل اعتماد و ساختار مرتب رو حفظ می‌کنیم.
با ظهور کامپوننت‌ها، واریانت‌ها و ویژگی‌ها در دنیای طراحی، امکان هماهنگ‌سازی دقیق‌تر کامپوننت‌های رابط کاربری (UI) با کامپوننت‌های کد فراهم شده. اما برای رسیدن به این هماهنگی، نیاز به تبادل اطلاعات داریم. پس بیایید دور هم جمع بشیم، یه قهوه بخوریم و از ساختار، نام‌گذاری، عملکرد و هر جزئیاتی که لازمه، برامون بگید.
خوشبختانه منابع زیادی مثل ویدیو و آموزش برای الهام‌گرفتن از روش‌های هماهنگ‌سازی مختلف تیم‌های دیگه هم وجود داره. من یه راهنمایی اولیه می‌کنم، بقیه‌ی مسیر رو خودتون کشف کنید.
می‌خواین بدون دردسر و نوشتن کلی توضیحات، کامپوننت‌های فیگما رو به یه پایگاه کد متصل کنین؟ می‌تونید از قابلیت مستندات کامپوننت (یه کم مخفی) توی فیگما استفاده کنید. با اضافه کردن یه لینک و توضیحات، یه دکمه توی تب بازرسی (Inspect) درست میشه که مستقیماً به بخش مربوط به اون کامپوننت تو کد (مثلاً صفحه گیت‌هاب) وصل میشه. علاوه بر این، جستجوی کامپوننت‌های فیگما هم اون توضیحات رو نشون می‌ده که تو سیستم‌های بزرگ‌تر خیلی به درد می‌خوره.
می‌خواین کامپوننت‌های فیگما رو به راحتی تو جاهایی مثل Notion، گیت هاب و بقیه برنامه‌ها نشون بدین؟ خیلی ساده می‌تونید لینک فایلتون (یا فریم مورد نظر) رو کپی (Cmd + L) کنید و به طور زنده تو مستنداتتون جاسازیش کنید.
این یه راه فوق‌العاده‌ست واسه اینکه طراحی‌هاتون رو به صورت پویا (و البته همزمان با تغییر فایل فیگما) مستقیماً تو مستندات موجودتون (که احتمالاً بیشتر متنی و کدی هستن) نمایش بدین.
وقتی کامپوننت‌ها و استایل‌ها تو دو کتابخونه‌ی مختلف اسم یکسانی داشته باشن، می‌تونید اون‌ها رو با هم عوض کنید. این یه فرصت عالی برای ساختن محیط‌های تستی در فیگما قبل از انتقال یه استایل یا کامپوننت جدید به فایل اصلی هست. البته این قابلیت بیشتر به درد سیستم‌های پیشرفته‌‌ای می‌خوره که کد و کامپوننت‌ها از قبل با هم هماهنگ شده باشن.
برای هماهنگی بین کامپوننت‌های رابط کاربری (UI) و کامپوننت‌های کد، چندتا پلاگین وجود داره. از بینشون، به نظر میاد Storybook Connect پرامیدوارکننده‌ترین باشه. راستی، اگه از این پلاگین خفن استفاده می‌کنین، چطور کدتون رو باهاش هماهنگ می‌کنین؟ تیم فیگما خیلی علاقه‌منده بدونه و اون رو اضافه کنه!
هماهنگ‌سازی کامپوننت‌ها با کد می‌تونه فوق‌العاده باشه، اما یه نکته رو نباید فراموش کرد: این کار نیاز به تلاش و مهم‌تر از اون، به‌روزرسانی مداوم داره. پس بهتره فقط تو شرایط مناسب ازش استفاده بشه، مثلاً تو یه سیستم جامع طراحی.
اگه دارین یه وبسایت تک‌صفحه‌ای طراحی می‌کنین، می‌تونید بازم از کامپوننت‌ها استفاده کنید. این باعث میشه طراحی تمیز و مقیاس‌پذیر باشه و ساختار مشخصی برای کدنویسی داشته باشین. اما لزوماً نیازی نیست این کامپوننت‌ها با کد کاملاً هماهنگ باشن.
مثلاً فکر نمی‌کنه کسی برای پختن یه کیک تولد برای دوستش، خط تولید کارخونه‌ی کیک‌سازی رو راه بندازه! اما باز هم از همون مواد اولیه‌ی پایه استفاده می‌کنه.
به عبارت دیگه، می‌تونید از مزایای کامپوننت‌ها مثل سازماندهی بهتر و ساختار تمیز بهره ببرید، بدون اینکه نیاز باشه همیشه یه پروسه‌ی هماهنگ‌سازی کامل با کد رو طی کنید. کلید ماجرا اینه که بفهمید کی و کجا استفاده از این قابلیت منطقی و مفیده.
تو فیگما می‌تونیم استایل‌هایی برای رنگ، متن، گرید، سایه، بلور و موارد مشابه بسازیم و اون‌ها رو تو کل طراحی اعمال کنیم. اما متاسفانه امکانات دیگه زیادی نداره.
هیچ راه حل جادویی وجود نداره
فیگما امکان مستندسازی خودکار استایل‌ها رو نداره، اما این باعث نمی‌شه تیم‌های طراحی بی‌خیال مستندسازی بشن. معمولاً تیم‌ها برای حفظ انسجام و هماهنگی، به چند روش اقدام می‌کنن:
مشکل: استایل‌های فیگما تا حدودی محدود هستند و نمی‌تونن با هم تعامل داشته باشن. مثلاً نمی‌تونید یه اندازه‌ی فونت پایه تنظیم کنید که مقیاس‌پذیر باشه و نرخ مقیاس‌گذاری رو به صورت خودکار تغییر بده. فقط می‌تونید یه اندازه‌ی ثابت تنظیم کنید. همچنین، فعلاً استایل‌های سیستم فاصله‌گذاری نداریم.
راه‌حل: پلاگین Figma Tokens به شما امکان می‌ده توکن‌های مختلفی رو در فیگما ایجاد کنید و با اون‌ها کار کنید. حتی می‌تونید این توکن‌ها رو به توکن‌های کد متصل کنید و هماهنگ‌سازی انجام بدین.
طراحی ریسپانسیو یعنی مطمئن شدن از نمایش درست و کارآمد وبسایت یا اپلیکیشن روی هر نوع صفحه نمایش و دستگاهی. فیگما ابزارهای قدرتمندی داره که می‌تونن ما رو تو این مسیر همراهی کنن. بیایم گام به گام باهاشون آشنا بشیم:
ابزارهای فیگما برای طراحی ریسپانسیو:
"یه نکته خیلی مهم که توسعه‌دهنده‌ها باید بدونن اینه که تو فیگما ما نقاط شکست (breakpoints) خودکار نداریم (یه کم جلوتر در مورد چگونگی مقابله با این موضوع صحبت می‌کنم)."
چیدمان خودکار فیگما یه ابزار فوق‌العاده برای طراحی‌های ریسپانسیو هستش، ولی برای عادت کردن بهش به تمرین و کمی صبوری نیاز داره. نگران نشید، به مرور خیلی به درد بخور میشه! چیدمان خودکار تا حدودی شبیه به Flexbox کار می‌کنه که با یه نگاه به پنل Inspect می‌تونید متوجهش بشید.
با چیدمان خودکار می‌تونید:
محدودیت‌ها یه روش دیگه برای چیدن و سازماندهی عناصر تو فیگما هستن که نسبت به چیدمان خودکار، کار باهاشون ساده‌تره. با استفاده از محدودیت‌ها می‌تونید موقعیت یه عنصر رو نسبت به فریم اصلی (والد) اون مشخص کنید. در این صورت، موقعیت عنصر با تغییر سایز فریم تغییر می‌کنه، اما با تغییر محتوای خود عنصر تغییری نمی‌کنه.
یه نکته مهم: توی یه فریم نمی‌تونید همزمان از چیدمان خودکار (Auto Layout) و محدودیت‌ها (Constraints) استفاده کنید. باید یکی رو انتخاب کنید. (یه استثنای کوچیک برای عناصر با موقعیت نسبی داخل چیدمان خودکار وجود داره). بین این دو روش بهتر یا بدتری وجود نداره، همه چیز به نوع طراحی و نیازتون بستگی داره.
با استفاده از سیستم شبکه‌ای یا Grid می‌تونید نظم و ساختار رو به طراحی‌های خودتون تو فیگما اضافه کنید. Grid به شما کمک می‌کنه تا عناصر رو به صورت مرتب و منظم در کنار هم بچینید و فاصله‌های بین اون‌ها رو به طور دقیق کنترل کنید.
یکی از ویژگی‌های باحال استفاده از شبکه (Grid) در یه فریم اینه که وقتی از محدودیت‌ها (Constraints) استفاده می‌کنین، اون‌ها ستون‌های شبکه رو به عنوان فریم والد در نظر می‌گیرن. با ترکیب شبکه و محدودیت‌ها، می‌تونیم به راحتی و به شکل فوق‌العاده‌ای طراحی‌های ریسپانسیو (سازگار با سایزهای مختلف صفحه) پیاده‌سازی کنیم.
نکته: فیگما یه ویژگی فوق‌العاده داره به اسم نستینگ (تو در تو چیدن). می‌تونید فریم‌ها رو داخل هم قرار بدین و با این کار سازماندهی و مدیریت طراحی‌هاتون رو آسون‌تر کنید.
محدودیت:
استفاده از شبکه‌های تودرتو برای تست‌های سریع یا راه‌اندازی‌های ساده عالیه. اما به محض اینکه محتوای بیشتری اضافه کنید، متوجه می‌شین که حاشیه‌ها و فاصله‌گذاری‌ها (padding) با تغییر اندازه صفحه نمایش، سازگار نمی‌شن. این یه محدودیت فیگما هستش. تو کد CSS این مورد به درستی کار می‌کنه.
یادمون باشه که نمی‌تونیم داخل یه فریم به صورت همزمان از چیدمان خودکار (Auto Layout) و محدودیت‌ها (Constraints) استفاده کنیم. اما یه ترفند جذاب وجود داره:
با این کار، چی به دست می‌آریم؟
محدودیت:
هنوز یه محدودیت باقی می‌مونه؛ اونم اینه که با این روش، فاصله‌گذاری افقی (spacing) بین عناصر به صورت خودکار تغییر نمی‌کنه. شاید با خودتون بگید «خب پس اگه همه‌چی رو تبدیل به چیدمان خودکار کنم چی؟» و جواب اینه که بله، می‌تونید این کار رو انجام بدین!
تا اینجا دیدیم که چطور میشه با ترکیب شبکه، محدودیت‌ها و چیدمان خودکار به طراحی‌های ریسپانسیو خوبی رسید. اما اگه دنبال آزادی و انعطاف‌پذیری بیشتری هستید، می‌تونید کل صفحه رو با چیدمان خودکار پیاده‌سازی کنید. دو روش برای این کار وجود داره:
1. تقلید از شبکه کلاسیک:
2. بدون محدودیت شبکه:
محدودیت:
تا اینجا دیدیم که چطور میشه با ترکیب شبکه، محدودیت‌ها و چیدمان خودکار به طراحی‌های ریسپانسیو خوبی رسید. اما اگه دنبال آزادی و انعطاف‌پذیری بیشتری هستید، می‌تونید کل صفحه رو با چیدمان خودکار پیاده‌سازی کنید. دو روش برای این کار وجود داره:
1. تقلید از شبکه کلاسیک:
2. بدون محدودیت شبکه:
محدودیت:
----
خب خب
به پایان امد این دفتر عزیزان
این قسمت اول :)
