| کانال طراحی و رابط‌کاربری |
🎯 توی این پست می‌ریم سراغ یه کار کاملاً عملی: ساختن سیستم رنگ (Color System) برای UI یه اپ موبایل داخل Figma؛ دقیقاً همون چیزی که بعداً تو Design System و Design Tokenها استفاده می‌شه.
ایده کلی اینه که به‌جای انتخاب تصادفی رنگ برای هر دکمه و متن، یه ساختار ثابت و قابل‌مدیریت بسازیم؛ چیزی که با رشد پروژه و تغییر برند، به‌هم نریزه.
🧩 قدم ۱: انتخاب رنگ پایه طبق Material Design
طبق راهنمای رسمی Material 3 Color اول یه رنگ برند انتخاب کن:
- رنگ Primary (مثلاً آبی برای اپ فین‌تک)
- رنگ Secondary برای المان‌های کم‌اهمیت‌تر
- رنگ Tertiary برای Accentها
برای شروع می‌تونی از ابزار Color Tool در همون سایت Material استفاده کنی تا یه پالت کامل (با تیره‌روشن‌ها) بگیری.
🎛 قدم ۲: ساخت Styleهای رنگ در Figma
۱️⃣ تو Figma یه فایل مخصوص Design System بساز.
۲️⃣ از پنل Assets → Local styles → Color، برای هر رنگ یه Style بساز، مثلاً:
- Primary / 40
- Primary / 80
- Neutral / 10
- Error / 40
نام‌گذاری لِولی (۱۰، ۲۰، ۳۰...) کمک می‌کنه بعداً راحت Expand یا Refactor کنی.
📐 قدم ۳: تعریف Semantic Colorها
به‌جای این‌که توی UI از اسم «آبی ۴۰» استفاده کنی، یه لایه معنایی بساز:
- Bg / Primary
- Text / Primary
- Text / Secondary
- Border / Subtle
- State / Hover
اینا تو Figma همون Color Style هستن، فقط اسمشون معناییه. وقتی برند عوض شد، فقط Style رو آپدیت می‌کنی، نه تک‌تک فریم‌ها رو.
🧪 قدم ۴: چک کردن Contrast طبق WCAG
برای خوندنی بودن متن، حداقل کنتراست مهمه. طبق WCAG 2.1 برای متن نرمال نسبت ۴٫۵:۱ لازمه.
برای تست، می‌تونی از پلاگین Figma مثل Contrast یا سایت WebAIM Contrast Checker استفاده کنی.
مثلاً فرض کن:
- رنگ متن: #0F172A
- رنگ پس‌زمینه: #F9FAFB
با WebAIM چک می‌کنی که نسبتشون بالاتر از ۴٫۵ باشه.
🔧 نمونه Design Token ساده (برای Dev)
وقتی با تیم Dev کار می‌کنی، می‌تونی همین Styleها رو به Design Token تبدیل کنی. یه نمونه JSON که تو Android یا Web قابل استفاده‌ست:
{
"color": {
"bg": {
"primary": "#FFFFFF",
"surface": "#F9FAFB"
},
"text": {
"primary": "#0F172A",
"secondary": "#6B7280"
},
"accent": {
"primary": "#2563EB"
},
"state": {
"error": "#DC2626"
}
}
}
همین ساختار می‌تونه دقیقاً با Color Styleهای Figma Sync بشه (مثلاً با پلاگین‌هایی مثل Figma Tokens / Tokens Studio).
⚠️ چند نکته کاربردی
- برای Dark Mode از همون Semantic Name استفاده کن و فقط Map رنگ‌ها رو عوض کن.
- تعداد رنگ‌هات رو محدود نگه دار؛ نویز بصری رو کم می‌کنه و Consistency رو زیاد.
- برای Stateها (Hover, Pressed, Disabled) حتماً Variation رنگ جدا بساز؛ مثلاً Primary / 40 برای Default و Primary / 50 برای Pressed.
✨ این سیستم رنگ رو یه بار خوب بساز، بعدش تقریباً تو هر صفحه جدید فقط Drag & Drop می‌کنی و تمرکزت می‌ره روی UX، نه انتخاب رنگ. اگر مفید بود برای هم‌تیمی‌هات هم بفرست تا تو یه زبان مشترک رنگی طراحی کنین.
🔖 #Design #طراحی #UI #UX #Figma #Design_System #Color_System #Material_Design #WCAG #UI #UX
👤 Developix
💎 Channel: @DevelopixDesign
11 · 1.5K ·