طراحی دیزاین سیستم منظم و کاربردی در فیگما

شما هم ممکن است در روند ایجاد یک دیزاین سیستم کاربردی برای تیم خود به ابهاماتی برخورده باشید که در این مقاله کوتاه، به چند نکته مفیدی که به من در مراحل ایجاد یک دیزاین سیستم منظم و کارآمد برای تیم دیزاین و توسعه کمک کرد اشاره می‌کنم:1 - Tokenizing the typescale and color rolesشما برای ایجاد یک دیزاین سیستم که از کامپوننت‌های زیادی تشکیل شده، به یک تایپوگرافی واحد به همراه استایل‌های زیاد هستید که هر کدام کاربرد متفاوتی دارند. برای مثال متریال 3 از ترکیب 15 استایل که کاربرد متفاوتی دارند استفاده می‌کنه که براساس کاربرد (مانند headline یا display) و اندازه (مانند large یا small) به زیر مجموعه‌های متفاوتی تقسیم می‌شن. حالا با در نظر گرفتن این نکته که محصول ما به چند استایل نیاز داره، با توجه به خصوصیات دقیق‌شون، استایل‌هامون رو تعیین و به Token تبدیل می‌کنیم.همچنین در رابطه با رنگ‌هایی که برای دیزاین سیستم در نظر می‌گیریم، نقش‌هایی تعریف کنیم که به عنوان Token، زبان مشترکی بین تیم دیزاین و توسعه خواهند شد. Design token باعث انعطاف و یکنواختی در محصول میشه. Token ها مانند پل ارتباطی بین نقشی که برای استایل (رنگ یا فونت) در نظر گرفتیم، و مقداری (Value) که برای اون نقش معین کردیم عمل می‌کنند.How to tokenizing a styleکاملا مشابه Create style داخل Figma هست ولی با این تفاوت که نیاز به نام گذاری اصولی و یکپارچه و دقیق داره که در واقع به زبان مشترک بین تیم دیزاین و توسعه تبدیل بشه و وقتی صحبت از یک توکن (Token) شد، هر دو تیم متوجه استایل (به طور دقیق) مورد بحث بشوند. وحتی موقعی که نیاز شد مقدار (Value) متصل به یک استایل تغییر کنه، تیم توسعه گیج نمیشه، چون هنوز توکن‌های تعیین شده برای استایل‌هارو خطاب قرار میدن و مهم نیست براشون که چه مقداری پشت اون توکن قرار گرفته.برای مثال استایل رنگی با توکن P 40 (Primary) یک مقدار (Value) داره که دیگه تیم توسعه نیازی به دونستن اون نداره. وقتی راجب استایل P 40 صحبت می‌کنیم، هر دو تیم متوجه هستن، فارغ از اینکه اون توکن چه مقداری داره.2 - Version history of Figmaیکی دیگه از قابلیت‌های مهم و مفید Figma، بخش Show version history هست که به طور معمول، هر چند وقت یکبار، فایل شمارو ذخیره می‌کنه و هر موقع که نیاز داشته باشین میتونین ورژن‌های گذشته رو بررسی کنید و حتی پروژه رو به تاریخ مورد نظرتون در گذشته برگردونید.حالا میخوام به نکته‌ای از این ویژگی اشاره کنم که واقعا کارآمد هست، مخصوصا برای طراحی دیزاین سیستم که کار بسیار حساس و مهمی هست و مطمئنا طراح دیزاین سیستم دوست نداره که حتی بخشی از کارش رو بخاطر بک‌آپ نداشتن یا مفهوم نبودن ورژن بک‌آپ از دست بده و وقت و هزینه تلف بشه. برای منظم و مفهوم‌تر شدن Version history، میتونیم با استفاده از Add to version history و مشخص کردن Title و Description، برای ورژن فعلی و Stable دیزاین سیستم خود یک فایل بک‌آپ ایجاد کنیم.روی دراپ داون اسم Design file کلیک کرده و گزینه Show version history را انتخاب می‌کنیم. و بعد گزینه Add to version history که با رنگ زرد هایلایت شده (عکس سمت راست) را انتخاب می‌کنیم.در این قسمت هم با وارد کردن جزئیات توصیفی برای فایل بک‌آپ خود، این Version history را از بقیه ورژن‌ها متمایز می‌کنیم.3 - Update library with detailed descriptionشما به عنوان یک طراح، همیشه در حال ایجاد تغییر و آپدیت در دیزاین سیستم هستید و هم‌تیمی‌هاتون هم درگیر این آپدیت‌ها می‌شن و اغلب اوقات آپدیت شما نیازمند توضیحات خاصی هست که هم‌تیمی‌هاتون هم باید در جریان جزئیات اون قرار بگیرند تا فایل‌های (Design files) متصل به دیزاین سیستم و طراح‌های مرتبط با اون فایل‌ها دچار سردرگمی نشن. برای مفهوم کردن جزئیات آپدیت، می‌تونیم از فیلد Optional description of changes استفاده کنیم و توضیحات مربوط به آپدیت رو بهش بپردازیم.بعد از انتخاب گزینه Publish (عکس سمت چپ)، در کادر قرمز رنگ Optional description of changes (عکس سمت راست) می‌توان توضیحات مرتبط را اضافه کرد.4 - Arranging the design system contentsاکثر ادیتورهایی که با فیگما سرو کار دارن با قابلیت ساخت Page آشنایی دارن ولی نحوه دسته بندی اطلاعات بین صفحات مختلف و همینطور نام‌گذاری مناسب و قابل فهم برای همه اعضای تیم دیزاین و توسعه نکاتی هست که قراره بهش اشاره کنیم.برای منظم سازی محتوای دیزاین سیستم، جهت مفهوم‌تر شدن برای تیم دیزاین و Maintenance راحت‌تر و کم‌هزینه‌تر، می‌تونیم با استفاده از ساختن Page های مختلف براساس محتوای تشکیل دهنده دیزاین سیستم، محتوای اون رو به چند بخش (مثلا به بخش‌های Cover, Styles, Components, Icons و...) تقسیم کنیم.در قسمت پنل سمت چپ فیگما، Layers tab، با گزینه Add new page می‌شه صفحه جدید اضافه و حتی Reorder کرد.5 - Create thumbnail for design systemبرای منظم شدن فایل‌های دیزاین (Design files) حاضر در یک پروژه می‌تونیم با استفاده از یک Thumbnail واضح و مفهوم، اونارو از هم تفکیک کنیم تا راحت‌تر پیدا بشن. رعایت همین نکته به ظاهر ساده کمک شایانی به تیم‌های دیزاین و توسعه می‌کنه تا فایل مورد نظرشون رو به راحتی پیدا کنن و دچار اشتباه نشن.برای این منظور ابتدا باید طرح Thumbnail مورد نظر خودمون رو داخل یک Frame قرار بدیم، و بعد روی فریم راست کلیک کرده و گزینه Set as thumbnail رو انتخاب کنیم. سپس بصورت خودکار، این تصویر روی فایل دیزاین سیستم نمایان می‌شه.مزیت داشتن یک Thumbnail مفهوم و خوانا موقعی معلوم میشه که بدون باز کردن یک فایل سنگین فیگما و بررسی اینکه فایل مدنظرمون هست یا نه، می‌تونیم محتویات فایل رو با دیدن Thumbnail به خاطر بیاریم و با اطمینان خاطر اقدام به باز کردن اون فایل‌ها بکنیم.به عنوان مثال کادر قرمز رنگ Thumbnail فایل دیزاین سیستم هست و کادر آبی رنگ، نمونه‌ای از یک فایل بدون Thumbnail می‌باشد.امیدوارم این مطلب براتون مفید بوده باشه و با فیدبک‌هاتون بتونم مطالب بعدی رو بهتر بنویسم و بهتون منتقل کنم. از وقتی که گذاشتید سپاسگزارم✌