Variables در Figma مقادیر قابل‌استفاده مجددی هستند که می‌توانند بسته به Context طراحی تغییر کنند. مثلا یک Color Variable می‌تواند در Light Mode سفید و در Dark Mode مشکی باشد، یا یک Number Variable می‌تواند Padding یک Component را در Mobile و Desktop تغییر دهد.
در نسخه قدیمی این آموزش، Variable را با مثال یک «ظرف» توضیح داده بودیم: ظرف ثابت است، اما مقدار داخل آن می‌تواند تغییر کند. این تشبیه هنوز مفید است؛ تفاوت اینجاست که Variables امروز بسیار فراتر از چهار نوع اولیه رفته‌اند و به یکی از پایه‌های Design Tokens، Themes، Responsive Design و Advanced Prototyping در Figma تبدیل شده‌اند.
در این آموزش چه چیزهایی یاد می‌گیرید؟
- Variable در Figma چیست و چه مسئله‌ای را حل می‌کند
- شش نوع Variable فعلی در Figma کدام‌اند
- Collection و Group چه تفاوتی دارند
- Modes چطور Light/Dark، Mobile/Desktop یا زبان‌های مختلف را مدیریت می‌کنند
- Scope چیست و چرا انتخاب Variable مناسب را ساده‌تر می‌کند
- Alias چیست و چطور Design Token hierarchy می‌سازد
- چطور Variable را روی Color، Spacing، Typography و Component Properties اعمال کنیم
- Variables و Styles چه تفاوتی دارند
- چطور Variables را در Prototype و Interactive Components استفاده کنیم
- اشتباهات رایج در معماری Variables و Design Tokens
ویدیوی آموزش Variables در Figma
نسخه منطبق این آموزش در آپارات پیدا نشد؛ بنابراین ویدیوی اصلی YouTube را همین‌جا قرار داده‌ایم. ویدیو مربوط به نسخه اولیه Variables است و متن این مقاله با قابلیت‌های فعلی Figma به‌روزرسانی شده است.
Variable در Figma چیست؟
Variable یک Raw Value قابل‌استفاده مجدد است. به‌جای اینکه مقدارهایی مثل رنگ، فاصله، متن یا وضعیت را در چند نقطه به‌صورت دستی وارد کنید، آن مقدار را در Variable تعریف می‌کنید و سپس Propertyهای سازگار را به آن متصل می‌کنید.
مزیت اصلی وقتی مشخص می‌شود که مقدار Variable بر اساس Mode یا Context تغییر کند. مثلا Color/Background می‌تواند در Light Mode مقدار روشن و در Dark Mode مقدار تیره داشته باشد، بدون اینکه لازم باشد تمام Layerها را جداگانه ویرایش کنید.
شش نوع Variable در Figma
در نسخه فعلی Figma شش نوع Variable وجود دارد: Color، Number، String، Boolean، Timing و Easing. ویدیوی قدیمی این صفحه مربوط به زمانی است که فقط چهار نوع اولیه وجود داشت؛ بنابراین برای کار امروز باید ساختار جدید را مبنا قرار دهید.
1. Color Variable
برای Color Valueها و Themeها استفاده می‌شود. Color Variable می‌تواند روی Fill، Stroke، Gradient Stop، Shadow Color، Color Style و Variableهای رنگی دیگر اعمال شود. برای Light/Dark Mode و Semantic Color Tokens یکی از مهم‌ترین انواع Variable است.
2. Number Variable
برای مقدارهای عددی مثل Padding، Gap، Stroke Weight، Radius-related properties، Shadow/Blur values و بعضی Propertyهای Typography و Motion استفاده می‌شود. Number Variables پایه خوبی برای Spacing Scale و Responsive Design هستند.
3. String Variable
String Variable متن یا رشته را نگه می‌دارد. می‌توانید از آن برای Text Content، Localization، بعضی Font Propertyها و حتی کنترل Variant Instance در Prototype استفاده کنید؛ به شرطی که مقدار String با Valueهای Variant هماهنگ باشد.
4. Boolean Variable
Boolean فقط دو مقدار True/False دارد. برای Visibility، Conditionها و بعضی Component/Prototype logicها بسیار مناسب است. مثلا می‌توانید نمایش یک Badge یا Icon را به Boolean Variable متصل کنید.
5. Timing Variable
Timing Variable برای Durationهای Motion استفاده می‌شود و زمان را به میلی‌ثانیه نگه می‌دارد. این نوع Variable کمک می‌کند Motion System به‌جای Durationهای پراکنده، از Timing Tokenهای یکپارچه استفاده کند.
6. Easing Variable
Easing Variable منحنی Easing یا Spring Animation را نگه می‌دارد و برای ساخت Motion System منسجم کاربرد دارد. ترکیب Timing و Easing Variables باعث می‌شود Transitionهای محصول هم مثل Color و Spacing قابل Tokenize شدن باشند.
Collections در Figma چیست؟
Variables داخل Collectionها سازمان‌دهی می‌شوند. Collection معمولا مجموعه‌ای از Variableهای مرتبط است؛ مثلا Primitive Colors، Semantic Colors، Spacing یا Typography Tokens. هر Collection می‌تواند Modeهای خودش را داشته باشد.
بهتر است Collection را بر اساس Domain و نحوه تغییر Context طراحی کنید. اگر دو گروه Variable باید Modeهای متفاوتی داشته باشند، جدا کردن آن‌ها در Collectionهای مختلف معمولا ساختار تمیزتری ایجاد می‌کند.
Modes چه کاری انجام می‌دهند؟
Mode به یک Variable اجازه می‌دهد در Contextهای مختلف Value متفاوت داشته باشد. چند کاربرد رایج:
- Light / Dark Theme
- Mobile / Tablet / Desktop spacing
- Brand A / Brand B
- English / Persian copy
- Compact / Comfortable density
تعداد Modeهایی که می‌توانید در هر Collection بسازید به Plan Figma بستگی دارد؛ بنابراین بهتر است در مستندات Design System روی معماری Modeها تمرکز کنید، نه یک عدد ثابت که ممکن است با Plan تغییر کند.
Groups و Naming
برای مدیریت تعداد زیاد Variable می‌توانید آن‌ها را با Naming Hierarchy و Groupها سازمان‌دهی کنید. مثلا:
- color/primitive/blue/500
- color/semantic/text/primary
- space/100
- space/200
- motion/duration/fast
هدف این است که اسم Variable علاوه بر قابل‌جست‌وجو بودن، نقش آن در سیستم را هم توضیح دهد.
Scope در Variables چیست؟
Scope مشخص می‌کند یک Variable برای چه نوع Propertyهایی پیشنهاد شود. مثلا Number Variable ممکن است برای Gap و Padding تعریف شده باشد. Scope مقدار Variable را تغییر نمی‌دهد، اما انتخاب Variable مناسب را در Picker برای اعضای تیم سریع‌تر و کم‌خطاتر می‌کند.
Alias و Design Token hierarchy
Alias یعنی Value یک Variable را به Variable دیگری متصل کنید. این قابلیت یکی از مهم‌ترین پایه‌های Design Token architecture است. مثلا:
- Primitive: blue/600 = #2563EB
- Semantic: action/primary = alias → blue/600
- Component: button/primary/background = alias → action/primary
اگر Brand Color تغییر کند، به‌جای ویرایش Componentها می‌توانید Source Token را تغییر دهید و Alias chain به‌روزرسانی شود. این ساختار وابستگی بین «مقدار» و «معنا» را شفاف‌تر می‌کند.
مثال عملی: ساخت Light و Dark Mode
- یک Collection برای Semantic Colors بسازید.
- دو Mode با نام Light و Dark تعریف کنید.
- Variableهایی مثل bg/default، text/primary و border/default بسازید.
- برای هر Variable در هر Mode Value مناسب تعریف کنید.
- Variableها را به Fill، Stroke یا Color Styleهای مربوط متصل کنید.
- Mode را روی Frame یا Parent مناسب تغییر دهید و نتیجه را بررسی کنید.
این روش از Duplicate کردن کل Styleها یا Frameها برای Themeهای مختلف جلوگیری می‌کند و تغییر Theme را به یک Context Switch تبدیل می‌کند.
Variables و Styles؛ کدام را استفاده کنیم؟
Variable و Style جایگزین کامل یکدیگر نیستند. Variable برای Raw Value، Mode، Alias و Token hierarchy مناسب است؛ Style برای ذخیره ترکیبی از چند Property به‌عنوان یک Preset بسیار قدرتمند است.
- Variables: Color token، Spacing token، Theme، Localization، Motion token و Prototype state
- Styles: Typography preset، Gradient، Composite Effect، Layout Guide و Animation Style
- ترکیب: استفاده از Variable داخل Style برای ساخت سیستم منعطف‌تر
برای مقایسه کامل‌تر، آموزش Styles در Figma را هم بخوانید.
Variables در Prototype
Variables فقط برای Design System نیستند. در Prototype می‌توانید مقدار Variable را با Interaction تغییر دهید، Condition بسازید و Stateهای پیچیده‌تر ایجاد کنید. از String، Number و Boolean Variables همچنین می‌توان برای کنترل بعضی Variant Propertyها استفاده کرد.
این قابلیت برای مثال‌هایی مثل Shopping Cart، Quiz، Theme Switcher یا Componentهایی که State آن‌ها باید بر اساس Interaction تغییر کند مفید است. برای بخش Component-level interaction، Interactive Components در Figma را ببینید.
اشتباهات رایج در معماری Variables
- استفاده از نام مقدار به‌جای معنا: Semantic Token را با نقش آن نام‌گذاری کنید، نه فقط رنگ فعلی.
- ساخت Collectionهای بسیار بزرگ بدون منطق Mode: Collection باید Context مشترک داشته باشد.
- Alias نکردن Tokenها: اتصال مستقیم همه Componentها به Primitiveها انعطاف Semantic layer را کم می‌کند.
- استفاده از Variable برای هر چیز: بعضی Presetهای ترکیبی هنوز با Styles بهتر مدیریت می‌شوند.
- نادیده گرفتن Scope: Scope مناسب انتخاب Variable را برای تیم ساده‌تر می‌کند.
- Hard-code کردن تعداد Modeها در Documentation: محدودیت Mode به Plan وابسته است.
جمع‌بندی
Variables امروز یکی از ستون‌های اصلی Design System در Figma هستند. شش نوع Color، Number، String، Boolean، Timing و Easing، در کنار Collections، Modes، Scopes و Aliasing، به شما اجازه می‌دهند Color، Spacing، Typography، Motion و Prototype state را به شکل سیستماتیک مدیریت کنید.
- مرحله قبل: Styles در Figma
- مرتبط: Interactive Components
- برای معماری حرفه‌ای‌تر: دوره Design System
- همه آموزش‌ها: هاب Figma در LearnUIX
