جادوی بیس کامپوننت‌ها در فیگما: چطور با یک تغییر، هزار کامپوننت به‌روز شدند

ماجرا از کجا شروع شد؟

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

حالا تصور کنید مدیر محصول بیاید و بگوید: «گوشه‌های دکمه‌ها را از ۸ پیکسل به ۱۲ پیکسل تغییر دهید.» طراح باید می‌نشست و تک‌تک آن ۶۰ مستطیل را به صورت دستی تغییر اندازه می‌داد و اگر یک جا فراموش می‌کرد، سیستم از هماهنگی خارج می‌شد. فایل‌ها کند می‌شدند و خطاهای انسانی بیداد می‌کرد.

چه تصمیمی گرفتند؟

ناچو آلنده‌سالازار یک متدولوژی معماری به نام _base Components را تدوین کرد که به سرعت تبدیل به استاندارد طلایی طراحان ارشد دنیا شد:

1. خلق یک هسته خصوصی پنهان (Private Core): تمام عناصر ساختاری (پدینگ، بوردر، رنگ پیش‌فرض و استایل تایپوگرافی) درون یک کامپوننت مادر به نام ._base-button ریخته می‌شد. علامت . یا _ در اول نام باعث می‌شد این کامپوننت در کتابخانه برای بقیه اعضای تیم مخفی بماند.
2. ساخت واریانت‌ها از روی نمونه (Instance): واریانت‌های نهایی محصول فقط نمونه‌هایی از همان کامپوننت پایه بودند که برخی بخش‌هایشان (مثل آیکون یا متن) با استفاده از قابلیت لایه‌های اینستنس روشن یا خاموش می‌شدند.
3. تغییر یک‌جا و انتشار همگانی: با تغییر شعاع گوشه در کامپوننت پایه، تمام ۶۰ واریانت در کسری از ثانیه به‌روزرسانی می‌شدند؛ بدون نیاز به دستکاری دستی.

چی شد که جواب داد؟

این رویکرد چنان در میان طراحان دنیا وایرال شد که خود تیم توسعه فیگما بعدها با الهام از آن، قابلیت رسمی Component Properties را در نسخه ۲۰۲۲ معرفی کرد تا نیاز به ساخت صدها واریانت اضافی برای همیشه از بین برود.