آموزش Variants در فیگما برای طراحی المان‌های چندحالته

آموزش Variants در فیگما و ساخت Component Set — آموزش Variants در Figma برای طراحی کامپوننت‌های چندحالته

Variants در Figma برای زمانی هستند که یک Component چند نسخه مشخص و قابل‌پیش‌بینی دارد؛ مثلا یک دکمه با Stateهای Default، Hover، Pressed و Disabled یا با Sizeهای Small، Medium و Large. به‌جای نگه‌داشتن چند کامپوننت پراکنده، آن‌ها را داخل یک Component Set قرار می‌دهید و تفاوت‌ها را با Property و Value مدیریت می‌کنید.

این راهنما محتوای آموزش قبلی Variants را حفظ کرده و آن را با ساختار فعلی Figma، Component Properties و روش‌های جدیدتر مدیریت Design System کامل‌تر می‌کند؛ مخصوصا اینکه چه زمانی Variant انتخاب درستی است و چه زمانی بهتر است از Boolean، Instance Swap، Text یا Slot استفاده کنیم.

در این آموزش چه چیزهایی یاد می‌گیرید؟

Variant و Component Set دقیقا چه هستند
چطور چند Component را با Combine as variants یکی کنیم
Property و Valueهایی مثل State، Size و Type بسازیم
چطور Variant جدید اضافه و Default Variant را کنترل کنیم
چطور Variantها را در Instance تغییر دهیم
چه زمانی از Variant و چه زمانی از Component Properties استفاده کنیم
چطور از Variant Explosion و افت Performance جلوگیری کنیم
یک Button Component واقعی را با State و Size طراحی کنیم

ویدیوی آموزش Variants در Figma

برای تماشای این آموزش، ویدیو را همین‌جا از YouTube ببینید. اگر پخش مستقیم برای شما در دسترس نیست، از دکمه زیر وارد YouTube شوید.

تماشای کیفیت اصلی در یوتیوب

Variant در Figma چیست؟

Variant یک نسخه مشخص از یک Component است که در ویژگی‌هایی قابل‌پیش‌بینی با نسخه‌های دیگر فرق دارد. مثلا یک Button می‌تواند Variantهایی برای Primary و Secondary یا Stateهای Default، Hover و Disabled داشته باشد. همه این نسخه‌ها داخل یک Component Set قرار می‌گیرند.

مزیت اصلی این است که کاربران Library به‌جای پیدا کردن چند Component جدا، یک Instance وارد می‌کنند و بعد از Properties مقدار مناسب را انتخاب می‌کنند. این کار پیدا کردن، استفاده و نگهداری اجزای Design System را ساده‌تر می‌کند.

مزایای Variants در طراحی UI و Design System

سازمان‌دهی حالت‌ها و اندازه‌های مرتبط داخل یک Component Set
تغییر سریع State، Size یا Type از پنل Properties
کاهش تعداد کامپوننت‌های پراکنده در Assets
حفظ یکپارچگی بصری و رفتاری بین حالت‌های مختلف
ساخت پایه مناسب برای Interactive Components و Prototype
تعریف نام‌گذاری و ساختار روشن‌تر برای تیم طراحی و توسعه

پیش‌نیاز: اول Component را درست بسازید

Variants روی Componentها ساخته می‌شوند. اگر هنوز با Main Component، Instance و Component Properties آشنا نیستید، ابتدا آموزش کامل Components در Figma را بخوانید. ساخت Component Set روی کامپوننتی که ساختار لایه‌ها و Auto Layout آن درست نیست، فقط پیچیدگی را بیشتر می‌کند.

چطور در Figma یک Component Set و Variant بسازیم؟

روش اول: Combine as variants

دو یا چند Main Component مرتبط را انتخاب کنید.
در پنل سمت راست روی Combine as variants کلیک کنید.
Figma آن‌ها را داخل یک Component Set قرار می‌دهد.
Propertyهای عمومی مثل Variant، Property 2 و … را به نام‌های معنادار مثل State، Size یا Type تغییر دهید.
برای هر Variant مقدار مناسب تعریف کنید.

هر Variant داخل یک Component Set باید ترکیب یکتایی از Property و Valueها داشته باشد؛ دو Variant با ترکیب کاملا یکسان Conflict ایجاد می‌کنند.

روش دوم: Add variant

اگر یک Main Component دارید، می‌توانید از منوی Main component گزینه Add variant را انتخاب کنید یا از بخش Properties یک Variant Property بسازید. Figma نسخه جدید را داخل Component Set قرار می‌دهد و بعد می‌توانید ظاهر و Valueهای آن را تنظیم کنید.

Property و Value در Variants چه هستند؟

Property مشخص می‌کند چه ویژگی‌ای تغییر می‌کند و Value گزینه‌های همان ویژگی است. برای مثال در یک Button:

Type: Primary / Secondary / Tertiary
Size: Small / Medium / Large
State: Default / Hover / Pressed / Disabled

بهتر است هر Property فقط یک مفهوم را کنترل کند. به‌جای Valueهای ترکیبی مثل «Primary Large»، Type و Size را جدا کنید تا استفاده از Component انعطاف‌پذیرتر و قابل‌فهم‌تر باشد.

مثال عملی: ساخت Variants برای یک Button

فرض کنید Button ما سه Size و چهار State دارد. یک ساختار مناسب می‌تواند این باشد:

Size = Small / Medium / Large
State = Default / Hover / Pressed / Disabled

در این مدل، هر Variant یک ترکیب مشخص دارد؛ مثلا Size=Medium + State=Hover. اگر Type هم اضافه شود، آن را به‌عنوان Property جدا تعریف کنید. این نام‌گذاری به مصرف‌کننده Component اجازه می‌دهد بدون جست‌وجو میان ده‌ها اسم مشابه، فقط گزینه‌های موردنیاز را از Dropdown انتخاب کند.

Default Variant کدام است؟

Variant قرارگرفته در گوشه بالا-چپ Component Set به‌عنوان Default در Assets نمایش داده می‌شود. بنابراین بهتر است رایج‌ترین حالت، مثلا Primary / Medium / Default، در آن موقعیت باشد تا کاربر هنگام Drag کردن Component با منطقی‌ترین نسخه شروع کند.

چطور Variant یک Instance را تغییر دهیم؟

وقتی Component Set را از Assets روی Canvas می‌آورید، یک Instance از Default Variant ساخته می‌شود. با انتخاب Instance، Propertyهای Variant در پنل سمت راست دیده می‌شوند و می‌توانید Value مناسب State، Size، Type یا Color را انتخاب کنید.

Variants یا Component Properties؛ کدام را استفاده کنیم؟

یکی از مهم‌ترین تصمیم‌ها در ساخت کامپوننت حرفه‌ای این است که برای هر تفاوت Variant نسازیم. Variants برای تفاوت‌های مشخص و معنادار مثل State، Size و Type عالی هستند، اما تغییرات محتوایی معمولا با Component Properties بهتر مدیریت می‌شوند.

Variant: وقتی ساختار یا حالت مشخصی مثل Default، Hover یا Large دارید.
Boolean: وقتی فقط می‌خواهید یک لایه نمایش داده شود یا نه.
Instance Swap: وقتی یک nested component مثل آیکون باید تعویض شود.
Text: وقتی متن باید مستقیما قابل‌ویرایش باشد.
Slot: وقتی یک ناحیه باید محتوای آزادتر و قابل‌چیدمان بپذیرد.

مثلا برای Button لازم نیست «با آیکون Search»، «با آیکون Download» و «بدون آیکون» سه Variant جدا بسازید. نمایش آیکون را می‌توان با Boolean و نوع آیکون را با Instance Swap کنترل کرد.

Variant Explosion چیست و چرا مشکل‌ساز می‌شود؟

اگر برای هر ترکیب کوچک Variant بسازید، تعداد حالت‌ها به‌سرعت زیاد می‌شود. مثلا ۳ Size × ۴ State × ۳ Type × ۲ وضعیت آیکون یعنی ۷۲ Variant. بخشی از این ترکیب‌ها را می‌توان با Component Properties حذف کرد.

Component Setهای بسیار بزرگ فقط نگهداری را سخت نمی‌کنند؛ واردکردن Instance از یک Component Set باعث Import شدن Variantهای آن مجموعه می‌شود و مجموعه‌های خیلی بزرگ می‌توانند روی Performance اثر بگذارند.

نام‌گذاری درست Variantها و Propertyها

از نام‌های واضح مثل State، Size و Type استفاده کنید؛ Property 2 یا Variant 3 را باقی نگذارید.
Valueها را کوتاه و ثابت نگه دارید؛ مثلا Default / Hover / Disabled.
یک مفهوم را داخل چند Property تکرار نکنید.
برای تیم، ترتیب Propertyها را بر اساس اهمیت و دفعات استفاده مشخص کنید.
در Component Set توضیح و لینک Documentation اضافه کنید تا قواعد استفاده روشن باشد.

Variants و Interactive Components چه ارتباطی دارند؟

Variants می‌توانند پایه Interactive Components باشند. در Prototype می‌توانید با اکشن Change to یک Variant را به Variant دیگر متصل کنید؛ مثلا Default را در Hover به حالت Hover ببرید یا Toggle خاموش را به روشن تغییر دهید. برای این بخش، آموزش Interactive Components در Figma را ببینید.

اشتباهات رایج هنگام کار با Variants

ساخت Variant برای تغییراتی که با Boolean یا Instance Swap ساده‌تر حل می‌شوند.
استفاده از Propertyهای ترکیبی مثل «Primary Large Hover» به‌جای جداکردن Type، Size و State.
داشتن دو Variant با ترکیب Property/Value یکسان.
انتخاب یک حالت نامناسب به‌عنوان Default Variant.
ساخت Component Set بسیار بزرگ بدون بررسی نیاز واقعی.
نداشتن الگوی نام‌گذاری و Documentation برای Library تیم.

جمع‌بندی

Variants زمانی بیشترین ارزش را دارند که نسخه‌های مشخص یک Component را در یک سیستم قابل‌فهم سازمان‌دهی کنند. Component Set، Property و Value باعث می‌شوند به‌جای چند کامپوننت پراکنده، یک جزء منظم داشته باشید که State، Size یا Type آن از پنل Properties تغییر می‌کند. برای انعطاف محتوایی هم بهتر است از Component Properties استفاده کنید تا تعداد Variantها بی‌دلیل رشد نکند.