این روال بر اساس Tutorial رسمی Figma درباره Color styles و Tokens و همینطور توصیههای Material Design برای رنگهای Semantic ـه:
Figma – Create and use color styles
Material 3 – Color
۱️⃣ اول: رنگهات رو Semantic ببین، نه بصری
بهجای اسمهایی مثل blue-light و blue-dark از اسمهای معنیدار استفاده کن:
• primary / primary-container برای رنگ اصلی برند
• success / warning / error برای وضعیتها
• bg / surface / overlay برای پسزمینهها
• text-primary / text-secondary / text-inverse برای متن
اینطوری اگه فردا Brand Color عوض شد، فقط مقدار Primary رو تغییر میدی، نه تکتک Frameها رو 😅
۲️⃣ ساخت Color Styleها در Figma
۱. یه Frame خالی بساز، اسمش رو بذار مثلاً 🎨 Tokens / Colors.
۲. چندتا Rectangle بکش برای دستههای مختلف رنگ: Brand، Background، Text، State.
۳. روی Rectangle مربوط به رنگ اصلی برند کلیک کن، از پنل راست:
• Fill رو تنظیم کن (مثلاً
#6750A4 مثل Primary در Material 3).• روی آیکن چهار نقطه کنار Fill بزن.
• Style > + > اسم بده:
brand/primary.۴. همین کار رو برای بقیه انجام بده؛ مثلاً:
•
brand/primary-container•
text/primary•
bg/surface•
state/error۳️⃣ ساخت ساختار منظم مثل Design Tokenها
اسمگذاری رو شبیه Tokenهای برنامهنویسی کن. یه الگوی ساده که روی خیلی پروژهها جواب میده:
semantic/role/state/variant
مثالها:
semantic/bg/default
semantic/bg/elevated
semantic/text/primary
semantic/text/secondary
semantic/border/subtle
semantic/status/error
semantic/status/error-container
تو Figma هر جا از / استفاده کنی، Styleها بهصورت گروهی نشون داده میشن و پیدا کردنشون خیلی راحتتره.
۴️⃣ اتصال این Styleها به کامپوننتهات
وقتی Button، Card یا Navigation Bar طراحی میکنی:
• برای Background از Styleهایی مثل semantic/bg/default استفاده کن.
• برای متن از semantic/text/primary.
• برای Border از semantic/border/subtle.
حالا اگه بخوای مثلاً تم Light رو کمی روشنتر کنی یا یه نسخه Dark Mode بسازی، فقط Styleها رو Update میکنی و کل UI باهات Sync میشه. این همون کاریه که تو Design Systemهای بزرگ مثل Material Design و iOS Human Interface Guidelines اتفاق میافته.
۵️⃣ چند نکتهی ریز ولی مهم
• طبق WCAG سعی کن کنتراست متن و پسزمینهت حداقل 4.5:1 باشه؛ میتونی با ابزارهایی مثل
WebAIM Contrast Checker
چکش کنی.
• برای هر Token حداقل یک Use Case تو ذهنت داشته باش؛ مثلاً:
• semantic/status/error = پیام خطای فرم
• semantic/bg/surface = Cardها و Sheetها
• توی توضیحات Style (Description) بنویس کجا استفاده بشه؛ این کار برای Devها و بقیه دیزاینرها نجاتبخشه.
اگه تا الان رنگهات رو مستقیم روی Frameها ست میکردی، یه بار این ساختار رو پیاده کن؛ چند روز بعد که اولین تغییر رنگ برند یا Dark Mode رو زدی، تفاوت رو واقعاً حس میکنی 🌙✨
امتحانش کن روی یه پروژه کوچیک Figma و اگه جواب داد، کمکم ببرش تو کل Design System تیمت.
🔖 #Design #طراحی #UI #UX #Figma #Design_Tokens #Color_System #UX #UI #Material_Design #WCAG
👤 Developix
💎 Channel: @DevelopixDesign
