| کانال طراحی و رابط‌کاربری |
در اکثر پروژه‌ها رنگ‌ها اولین جایی هستن که طراحی رو به‌هم می‌ریزن: هر صفحه یه رنگ، هر کامپوننت یه سایه! 😅 این‌جا Design Tokenها نجات‌مون می‌دن.
امروز سراغ یه ورک‌فلو خیلی عملی می‌ریم: تعریف Design Token رنگ در Figma بر اساس توصیه‌های Material Design و WCAG، تا هم UI تمیزتری داشته باشیم هم راحت بتونیم Theme عوض کنیم. 🎯
🧩 Design Token رنگ یعنی چی؟
به‌جای استفاده از #3498db تو هر لایه، یه اسم معنی‌دار تعریف می‌کنی، مثلاً:
color/primary
color/on-primary
color/background
بعد همه‌جا فقط از این Tokenها استفاده می‌کنی. اگه رنگ برند عوض شد، فقط Token رو آپدیت می‌کنی، نه تک‌تک فریم‌ها. این همون چیزیه که تو Design Systemهای بزرگ مثل Material Design هم استفاده می‌شه.
🛠 راه‌اندازی رنگ‌ها در Figma
ورک‌فلو زیر دقیقا از مستندات رسمی Figma و Google Material الهام گرفته شده:
۱️⃣ یه فایل مخصوص Design System بساز (مثلاً: Design System – Foundation).
۲️⃣ توی Local styles برید به بخش Color Styles و Styleهای پایه رو بساز:
• theme/light/color/primary
• theme/light/color/on-primary
• theme/light/color/background
• theme/light/color/surface
• theme/light/color/error
اگه Dark Mode هم داری، همین ساختار رو با theme/dark/... تکرار کن.
۳️⃣ از Material Design (نسخه 3) برای انتخاب رنگ اصلی کمک بگیر:
Theme Builder
رنگ برند رو وارد کن، Tool خودش طیف رنگ رو می‌سازه و Contrast رو طبق WCAG بررسی می‌کنه.
۴️⃣ رنگ‌های پیشنهادی رو تو Figma به Styleها نسبت بده. مثلاً:
• theme/light/color/primary ← Primary رنگ M3
• theme/light/color/on-primary ← On Primary برای متن روی دکمه‌ها
📏 تست Contrast برای دسترس‌پذیری
برای این‌که متن روی دکمه و Background خونده بشه، نسبت کنتراست طبق WCAG باید حداقل 4.5:1 برای متن معمولی باشه.
برای تست می‌تونی از این ابزار استفاده کنی:
Contrast Checker
فقط کافیه رنگ Token متن (مثلاً on-primary) و رنگ پس‌زمینه (مثلاً primary) رو وارد کنی.
💡 اتصال رنگ‌ها به کامپوننت‌ها
وقتی Button یا Card طراحی می‌کنی، به‌جای دادن رنگ مستقیم:
• Fill دکمه = theme/light/color/primary
• رنگ متن = theme/light/color/on-primary
اگه بعداً بخوای Dark Mode رو تست کنی، کافیه Styleها رو روی نسخه Dark سوییچ کنی، تمام UI با هم آپدیت می‌شه؛ این دقیقا همون کاریه که تو Design Systemهای حرفه‌ای انجام می‌شه. 🔁
🎁 یه نمونه ساده Token به صورت JSON (برای Devها)
این ساختار الهام‌گرفته از الگوی Design Token در سیستم‌های مدرنه:
{
"theme": {
"light": {
"color": {
"primary": "#6750A4",
"on-primary": "#FFFFFF",
"background": "#FFFBFE"
}
}
}
}
همین ساختار رو می‌شه با Devها شیر کرد تا توی Web, Android یا iOS به‌صورت خودکار Map بشه.
یه فایل کوچیک Design Token می‌تونه کل پروژه رو منظم‌تر، قابل‌تغییرتر و حرفه‌ای‌تر کنه. دفعه بعد که می‌خوای برای یه محصول جدید UI بسازی، از همون اول رنگ‌هات رو Token کن و نتیجه رو با پروژه‌های قبلیت مقایسه کن 😌
🔖 #Design #طراحی #UI #UX #Figma #Design_Token #Color_System #Material_Design #WCAG #UI_Design
👤 Developix
💎 Channel: @DevelopixDesign
13 · 1.3K ·