شما هم ممکن است در روند ایجاد یک دیزاین سیستم کاربردی برای تیم خود به ابهاماتی برخورده باشید که در این مقاله کوتاه، به چند نکته مفیدی که به من در مراحل ایجاد یک دیزاین سیستم منظم و کارآمد برای تیم دیزاین و توسعه کمک کرد اشاره می‌کنم:
شما برای ایجاد یک دیزاین سیستم که از کامپوننت‌های زیادی تشکیل شده، به یک تایپوگرافی واحد به همراه استایل‌های زیاد هستید که هر کدام کاربرد متفاوتی دارند. برای مثال متریال 3 از ترکیب 15 استایل که کاربرد متفاوتی دارند استفاده می‌کنه که براساس کاربرد (مانند headline یا display) و اندازه (مانند large یا small) به زیر مجموعه‌های متفاوتی تقسیم می‌شن. حالا با در نظر گرفتن این نکته که محصول ما به چند استایل نیاز داره، با توجه به خصوصیات دقیق‌شون، استایل‌هامون رو تعیین و به Token تبدیل می‌کنیم.
همچنین در رابطه با رنگ‌هایی که برای دیزاین سیستم در نظر می‌گیریم، نقش‌هایی تعریف کنیم که به عنوان Token، زبان مشترکی بین تیم دیزاین و توسعه خواهند شد. Design token باعث انعطاف و یکنواختی در محصول میشه. Token ها مانند پل ارتباطی بین نقشی که برای استایل (رنگ یا فونت) در نظر گرفتیم، و مقداری (Value) که برای اون نقش معین کردیم عمل می‌کنند.
کاملا مشابه Create style داخل Figma هست ولی با این تفاوت که نیاز به نام گذاری اصولی و یکپارچه و دقیق داره که در واقع به زبان مشترک بین تیم دیزاین و توسعه تبدیل بشه و وقتی صحبت از یک توکن (Token) شد، هر دو تیم متوجه استایل (به طور دقیق) مورد بحث بشوند. وحتی موقعی که نیاز شد مقدار (Value) متصل به یک استایل تغییر کنه، تیم توسعه گیج نمیشه، چون هنوز توکن‌های تعیین شده برای استایل‌هارو خطاب قرار میدن و مهم نیست براشون که چه مقداری پشت اون توکن قرار گرفته.
یکی دیگه از قابلیت‌های مهم و مفید Figma، بخش Show version history هست که به طور معمول، هر چند وقت یکبار، فایل شمارو ذخیره می‌کنه و هر موقع که نیاز داشته باشین میتونین ورژن‌های گذشته رو بررسی کنید و حتی پروژه رو به تاریخ مورد نظرتون در گذشته برگردونید.
حالا میخوام به نکته‌ای از این ویژگی اشاره کنم که واقعا کارآمد هست، مخصوصا برای طراحی دیزاین سیستم که کار بسیار حساس و مهمی هست و مطمئنا طراح دیزاین سیستم دوست نداره که حتی بخشی از کارش رو بخاطر بک‌آپ نداشتن یا مفهوم نبودن ورژن بک‌آپ از دست بده و وقت و هزینه تلف بشه. برای منظم و مفهوم‌تر شدن Version history، میتونیم با استفاده از Add to version history و مشخص کردن Title و Description، برای ورژن فعلی و Stable دیزاین سیستم خود یک فایل بک‌آپ ایجاد کنیم.
شما به عنوان یک طراح، همیشه در حال ایجاد تغییر و آپدیت در دیزاین سیستم هستید و هم‌تیمی‌هاتون هم درگیر این آپدیت‌ها می‌شن و اغلب اوقات آپدیت شما نیازمند توضیحات خاصی هست که هم‌تیمی‌هاتون هم باید در جریان جزئیات اون قرار بگیرند تا فایل‌های (Design files) متصل به دیزاین سیستم و طراح‌های مرتبط با اون فایل‌ها دچار سردرگمی نشن. برای مفهوم کردن جزئیات آپدیت، میتونیم از فیلد Optional description of changes استفاده کنیم و توضیحات مربوط به آپدیت رو بهش بپردازیم.
اکثر ادیتورهایی که با فیگما سرو کار دارن با قابلیت ساخت Page آشنایی دارن ولی نحوه دسته بندی اطلاعات بین صفحات مختلف و همینطور نام‌گذاری مناسب و قابل فهم برای همه اعضای تیم دیزاین و توسعه نکاتی هست که قراره بهش اشاره کنیم.
برای منظم سازی محتوای دیزاین سیستم، جهت مفهوم‌تر شدن برای تیم دیزاین و Maintenance راحت‌تر و کم‌هزینه‌تر، میتونیم با استفاده از ساختن Page های مختلف براساس محتوای تشکیل دهنده دیزاین سیستم، محتوای اون رو به چند بخش (مثلا به بخش‌های Cover, Styles, Components, Icons و...) تقسیم کنیم.
برای منظم شدن فایل‌های دیزاین (Design files) حاضر در یک پروژه میتونیم با استفاده از یک Thumbnail واضح و مفهوم، اونارو از هم تفکیک کنیم تا راحت‌تر پیدا بشن. رعایت همین نکته به ظاهر ساده کمک شایانی به تیم‌های دیزاین و توسعه می‌کنه تا فایل مورد نظرشون رو به راحتی پیدا کنن و دچار اشتباه نشن.
برای این منظور ابتدا باید طرح Thumbnail مورد نظر خودمون رو داخل یک Frame قرار بدیم، و بعد روی فریم راست کلیک کرده و گزینه Set as thumbnail رو انتخاب کنیم. سپس بصورت خودکار، این تصویر روی فایل دیزاین سیستم نمایان میشه.
مزیت داشتن یک Thumbnail مفهوم و خوانا موقعی معلوم میشه که بدون باز کردن یک فایل سنگین فیگما و بررسی اینکه فایل مدنظرمون هست یا نه، میتونیم محتویات فایل رو با دیدن Thumbnail به خاطر بیاریم و با اطمینان خاطر اقدام به باز کردن اون فایل‌ها بکنیم.
امیدوارم این مطلب براتون مفید بوده باشه و با فیدبک‌هاتون بتونم مطالب بعدی رو بهتر بنویسم و بهتون منتقل کنم. از وقتی که گذاشتید سپاسگزارم✌
