امروز یه ورکفلو خیلی عملی برای ساختن Color Design Tokens تو Figma رو مرور میکنیم؛ دقیقاً چیزی که تو داکیومنت رسمی Figma Color Styles و گایدلاینهای Material Design 3 هم روش تأکید شده ✅
۱️⃣ اول: نقش رنگهاتو بر اساس UI تعریف کن
بهجای اینکه بگی "آبی تیره" یا "قرمز روشن"، از semantic tokens استفاده کن:
•
primary / primary-container•
secondary•
error•
background / surface•
on-primary / on-surface (رنگ متن روی عنصرها)این همون چیزیه که Material Design 3 پیشنهاد میکنه: رنگهات رو بر اساس معنا و نقش اسمگذاری کن، نه بر اساس خودِ رنگ.
۲️⃣ ساختن Color Styleها در Figma 🎯
۱) تو Figma یک فایل جدا فقط برای Design System بساز.
۲) ابزار Fill رو انتخاب کن و رنگ برندت رو وارد کن.
۳) روی نقطهی رنگ تو پنل راست کلیک کن و "Create style…" رو بزن.
۴) اسمش رو چیزی مثل:
color / primary / baseبذار.
۵) همین رو برای سایهها و حالتها ادامه بده:
color / primary / hovercolor / primary / disabledاسمگذاری سلسلهمراتبی باعث میشه تو Asset Panel همهچیز منظم و سریعی پیدا بشه.
۳️⃣ تراز کردن با Contrast و WCAG ♿
برای متنهات باید کنتراست رو با گایدلاین WCAG چک کنی. میتونی از افزونههای Figma مثل:
Able – Frictionless Accessibility
استفاده کنی تا ببینی کدوم ترکیب رنگهات به حداقل کنتراست ۴.۵:۱ برای متنهای معمولی میرسه.
نمونه نامگذاری توی Design Tokenها (مثلاً برای Web)
این یه مثال ساده از خروجی تو فایل
tokens.json یا Style Dictionary هست که مستقیم از Styleهای Figma الهام میگیره:{
"color": {
"primary": {
"base": "#6750A4",
"hover": "#5B4794",
"disabled": "#E6E0F8"
},
"background": {
"base": "#FFFBFE"
},
"on": {
"primary": "#FFFFFF",
"background": "#1C1B1F"
},
"error": {
"base": "#B3261E"
}
}
}تو پروژههای Multi-platform (Android, iOS, Web) همین Tokenها میتونن به
XML، Color Set یا CSS Var تبدیل بشن؛ بدون اینکه معنای رنگها عوض بشه.۴️⃣ چند نکته ریز ولی مهم 💡
• برای حالت Dark Mode، همون ساختار اسمها رو نگهدار، فقط فایل یا Collection جدا داشته باش.
• از رنگهای خاکستری خوب برای surface و border استفاده کن تا کل UI بهم نریزه.
• تو Figma از Styles حتماً استفاده کن؛ هیچ رنگی نباید "Loose" و بدون Style روی کامپوننت باشه.
امتحان این روش تو یه پروژه کوچیک (مثلاً یه Landing Page ساده) خیلی کمک میکنه قبل از رفتن سراغ پروژههای سنگین، روی Design Tokenها مسلط بشی 🙌
🔖 #Design #طراحی #UI #UX #Figma #Design_Tokens #Color_System #Material_Design #UI #UX #Color #Accessibility
👤 Developix
💎 Channel: @DevelopixDesign
