Styles در Figma مجموعه‌ای قابل‌استفاده مجدد از Propertyها هستند که کمک می‌کنند ظاهر و رفتار بصری طراحی را منسجم نگه دارید. به‌جای اینکه رنگ، Typography، Effect یا Grid را در هر صفحه جداگانه تنظیم کنید، می‌توانید آن‌ها را به‌صورت Style تعریف کنید و در بخش‌های مختلف فایل یا Library تیم دوباره استفاده کنید.
مطلب قبلی این صفحه مفهوم اصلی Styles و مزیت یکپارچگی را توضیح می‌داد. در این نسخه همان هدف حفظ شده، اما ساختار با Figma فعلی به‌روز شده است؛ از پنج نوع Style فعلی تا تفاوت Styles و Variables، مدیریت Local Styles، Library و کاربرد آن‌ها در Design System.
در این آموزش چه چیزهایی یاد می‌گیرید؟
- Style در Figma چیست و چرا استفاده می‌شود
- پنج نوع Style فعلی در Figma کدام‌اند
- چطور Style بسازیم، اعمال کنیم و ویرایش کنیم
- Color Style، Text Style، Effect Style و Layout Guide Style چه تفاوتی دارند
- Animation Style در Figma Motion چیست
- Local Styles و Library Styles چگونه مدیریت می‌شوند
- Styles و Variables چه تفاوتی دارند و چه زمانی باید از هرکدام استفاده کنیم
- چطور Variables را داخل بعضی Styleها به کار ببریم
- روش نام‌گذاری و سازمان‌دهی Styles در Design System
ویدیوی آموزش Styles در Figma
نسخه منطبق این آموزش در آپارات پیدا نشد؛ بنابراین ویدیوی اصلی YouTube را همین‌جا قرار داده‌ایم. اگر پخش مستقیم برای شما در دسترس نیست، از دکمه زیر وارد YouTube شوید.
Style در Figma چیست؟
Style مجموعه‌ای از Propertyهای ذخیره‌شده است که می‌تواند روی چند Object اعمال شود. مثلا یک Text Style می‌تواند Font Family، Font Size، Line Height و Letter Spacing را با هم نگه دارد. وقتی Style را تغییر می‌دهید، Objectهایی که از آن استفاده می‌کنند می‌توانند تغییر را دریافت کنند و همین موضوع نگهداری یک طراحی بزرگ را ساده‌تر می‌کند.
Styles فقط برای سرعت نیستند؛ آن‌ها یک Source of Truth برای تصمیم‌های بصری محسوب می‌شوند و می‌توانند از طریق Library بین فایل‌ها و اعضای تیم به اشتراک گذاشته شوند.
پنج نوع Style در Figma
در نسخه فعلی Figma پنج دسته Style وجود دارد: Color، Text، Effect، Layout Guide و Animation. Animation Styles مربوط به Figma Motion هستند و در محیط Motion روی Objectها استفاده می‌شوند.
1. Color Styles
Color Style برای ذخیره و استفاده مجدد از Fill، Stroke، Image Fill، Gradient، Pattern و Shader Fill کاربرد دارد. برخلاف یک Variable که معمولا یک مقدار خام را نگه می‌دارد، Color Style می‌تواند تنظیمات ترکیبی‌تری مثل Gradient و زاویه آن را هم در یک Style ذخیره کند.
2. Text Styles
Text Style برای Typography است و می‌تواند ویژگی‌هایی مثل Font Family، Size، Line Height و Letter Spacing را ذخیره کند. برای مثال می‌توانید Heading/Large، Heading/Small، Body/Regular و Caption را به‌صورت Style تعریف کنید تا Typography محصول در کل فایل یکدست بماند.
3. Effect Styles
Effect Style برای Drop Shadow، Inner Shadow، Layer Blur، Background Blur و Effectهای جدیدتر مثل Texture، Noise و Shader Effect استفاده می‌شود. یک Effect Style می‌تواند بیش از یک Effect را همزمان نگه دارد.
4. Layout Guide Styles
Layout Guide Style برای Rows، Columns و Uniform Grid است. اگر چند صفحه یا Breakpoint باید Grid مشترک داشته باشند، ذخیره آن به‌عنوان Style باعث می‌شود ساختار Grid سریع‌تر و منسجم‌تر تکرار شود.
5. Animation Styles
Animation Styles در Figma Motion برای ذخیره Animationهای مربوط به Position، Scale، Rotation، Size، Opacity و Path استفاده می‌شوند. چند Animation هم می‌توانند داخل یک Animation Style ترکیب شوند. Timing و Easing Variables نیز می‌توانند برای ساخت Motion System منسجم استفاده شوند.
چطور یک Style بسازیم؟
- Object یا Text موردنظر را انتخاب کنید و Property مناسب را تنظیم کنید.
- از Style picker کنار همان Property، گزینه ساخت Style جدید را انتخاب کنید.
- یک نام روشن و سیستماتیک برای Style بنویسید.
- در صورت نیاز Description اضافه کنید تا کاربرد Style برای اعضای تیم واضح باشد.
- Style را روی چند Object واقعی تست کنید و سپس در صورت نیاز آن را در Library منتشر کنید.
Local Styles و Library Styles
Local Style در همان فایل تعریف شده و از Sidebar یا Style picker قابل مدیریت است. اگر Styleها بخشی از Design System تیم باشند، می‌توانید آن‌ها را در یک Library منتشر کنید تا فایل‌های دیگر نیز بتوانند از همان Source of Truth استفاده کنند. امکان انتشار Style به Library به نوع Plan و سطح دسترسی بستگی دارد.
Styles و Variables چه تفاوتی دارند؟
Styles و Variables هر دو برای Consistency و Reuse مفیدند، اما یکسان نیستند. Styles می‌توانند مجموعه‌ای از Propertyها را با هم ذخیره کنند؛ مثلا یک Text Style شامل Font Family، Size، Weight و Line Height است. Variables بیشتر برای Raw Valueها و Contextهایی مثل Light/Dark، Mobile/Desktop یا Design Token hierarchy مناسب‌اند.
- Style: وقتی چند Property باید به‌عنوان یک Preset واحد استفاده شوند.
- Variable: وقتی یک مقدار باید قابل Alias، Mode و تغییر Context باشد.
- ترکیب هر دو: وقتی مثلا Color Variable یا Number Variable را داخل Style به‌کار می‌برید و همزمان مزیت Mode/Token و Preset را می‌خواهید.
بنابراین Variables باعث منسوخ شدن Styles نشده‌اند. در Design Systemهای بالغ معمولا هر دو در کنار هم استفاده می‌شوند.
چطور Variables را داخل Styles استفاده کنیم؟
Figma اجازه می‌دهد Variableهای سازگار را به Propertyهای Style متصل کنید. مثلا Color Variable می‌تواند در Color Style یا رنگ Shadow استفاده شود و Number/String Variables می‌توانند در بعضی Propertyهای Text Style به کار بروند. این ساختار برای Theme، Typography Tokens و سیستم‌های Responsive مفید است.
نام‌گذاری Styles در Design System
نام‌گذاری باید هدف Style را مشخص کند، نه فقط مقدار فعلی را. به‌جای نام‌هایی مثل Gray 700 یا 16px در لایه Semantic، نام‌هایی مثل Text/Primary، Surface/Brand یا Typography/Body/Medium معمولا نگهداری بهتری دارند. برای Primitiveها می‌توانید لایه Value-based جدا داشته باشید و Semantic layer را روی آن بسازید.
- نام‌ها را کوتاه، قابل‌جست‌وجو و ساختاری نگه دارید.
- از Slash برای Hierarchy منطقی استفاده کنید.
- Styleهای بلااستفاده و تکراری را قبل از انتشار Library شناسایی کنید.
- Description را برای مواردی که کاربرد خاص یا محدودیت دارند بنویسید.
- برای Colorهای Themeable از Variables و Modes کمک بگیرید.
اشتباهات رایج در استفاده از Styles
- ساخت Style برای هر مقدار تصادفی: Style باید بخشی از سیستم باشد، نه انبار همه تنظیمات.
- نام‌گذاری بر اساس ظاهر موقت: Semantic naming معمولا در تغییر Brand مقاوم‌تر است.
- نادیده گرفتن Variables: برای Mode و Token hierarchy، Variables اغلب انتخاب مناسب‌تری هستند.
- تکرار چند Style مشابه: قبل از ساخت Style جدید، وجود گزینه نزدیک را بررسی کنید.
- انتشار بدون Documentation: Styleهای Library باید قابل‌فهم و قابل‌استفاده برای کل تیم باشند.
Styles چه نقشی در Design System دارند؟
Styles کمک می‌کنند تصمیم‌های بصری قابل‌استفاده مجدد شوند. Components ساختار UI را استاندارد می‌کنند، Variables Raw Valueها و Context را مدیریت می‌کنند و Styles مجموعه Propertyهای بصری را به Presetهای قابل‌استفاده تبدیل می‌کنند. کنار هم قرار گرفتن این سه لایه، نگهداری Design System را بسیار ساده‌تر می‌کند.
جمع‌بندی و ادامه مسیر
Styles هنوز یکی از بخش‌های اصلی Figma برای ساخت Design System هستند. Color، Text، Effect، Layout Guide و Animation Style هرکدام نوع خاصی از تنظیمات را قابل‌استفاده مجدد می‌کنند. Variables هم در کنار Styles، Modeها، Tokenها و Contextهای متغیر را مدیریت می‌کنند.
- مرحله قبل: Interactive Components در Figma
- مرحله بعد: Variables در Figma
- برای معماری کامل‌تر: دوره Design System
- همه آموزش‌ها: هاب Figma در LearnUIX
