یادداشت نسخه: ویدیوی این آموزش در سال 2021 ضبط شده و رابط Figma از آن زمان تغییر کرده است. با این حال مفهوم Variants و مدیریت حالت‌های مختلف Component همچنان بخش مهمی از ساخت Design System و رابط‌های قابل نگهداری است.
Variants در Figma چیست؟
Variants به شما اجازه می‌دهد چند حالت مرتبط از یک Component را داخل یک Component Set نگه دارید. مثلا به‌جای داشتن فایل‌های جدا برای حالت‌های مختلف یک Button، می‌توانید Stateها و Typeهای آن را به‌صورت منظم در یک ساختار واحد مدیریت کنید.
مثال: حالت‌های مختلف یک Button
- State: Default، Hover، Pressed و Disabled
- Type: Primary و Secondary
- Theme: Light و Dark، اگر طراحی محصول شما به این حالت نیاز دارد
با ترکیب این Propertyها می‌توانید حالت‌های لازم را بدون پراکندگی در فایل نگه دارید و هنگام استفاده از Instance، مقدار مناسب را انتخاب کنید.
چرا Variants بهتر از Componentهای پراکنده است؟
وقتی Stateها و Typeها در یک ساختار منظم باشند، پیدا کردن حالت درست ساده‌تر می‌شود، نام‌گذاری قابل فهم‌تر است و تغییرات Design System بهتر کنترل می‌شوند. این موضوع به‌خصوص زمانی مهم است که یک Component چندین State و Variation داشته باشد.
نام‌گذاری Propertyها و Valueها
نام‌ها را بر اساس مفهوم طراحی انتخاب کنید، نه ظاهر اتفاقی. مثلا State=Disabled یا Type=Secondary قابل فهم‌تر از نام‌هایی مثل Gray Button یا Button 2 هستند. نام‌گذاری خوب باعث می‌شود طراحان دیگر و توسعه‌دهندگان راحت‌تر ساختار Component را درک کنند.
Variants و Component Properties
در نسخه‌های جدیدتر Figma، Component Properties در کنار Variants برای کنترل ویژگی‌های قابل تغییر Instanceها استفاده می‌شوند. ایده اصلی این است که به‌جای ساخت Variation غیرضروری برای هر تغییر کوچک، ساختار Component را تا جای ممکن ساده و معنادار نگه دارید.
