| کانال طراحی و رابط‌کاربری |
تو اکثر پروژه‌ها مشکل از همون اول شروع می‌شه: هر طراح یا برنامه‌نویس یه رنگ برای خودش انتخاب می‌کنه، بعد از چند ماه می‌بینیم ده‌تا آبی، پنج‌تا خاکستری و کلی Style تکراری توی فایل داریم 😅
یکی از تمیزترین راه‌حل‌ها استفاده از Design Token برای رنگ‌هاست؛ دقیقاً همون کاری که تو Material Design 3 و سیستم‌های حرفه‌ای انجام می‌شه.
تو این پست می‌ریم سراغ یه ورک‌فلو ساده و واقعی برای ساخت Color Token ها تو Figma که مستقیم بشه تو Design System و بعدش تو Frontend استفاده‌شون کرد. 👇
۱️⃣ ساخت ساختار اسم‌گذاری درست
به‌جای اسم‌های حسی مثل:
blue-light یا green-button
از ساختار «نقش + سطح» استفاده کن:
color/primary/40
color/primary/80
color/neutral/10
color/error/60
این مدل، با ساختار Material Design 3 و خیلی از Design System های مدرن هم‌سوئه و اجازه می‌ده بعداً راحت Theme عوض بشه بدون این‌که اسم‌ها بی‌معنی بشن.
۲️⃣ ساخت Color Style ها در Figma
۱) تو Figma یه Frame برای "🟦 Colors" بساز.
۲) برای هر نقش (Role) مثل Primary, Secondary, Neutral, Error چند دایره/مستطیل کنار هم بذار و درجات مختلف روشنایی رو توش بذار (مثلاً 10، 20، 40، 80).
۳) هر رنگ رو به یه Style تبدیل کن:
- رنگ رو انتخاب کن.
- تو پنل Fill روی چهارخونه‌ی Style کلیک کن.
- روی + بزن و اسمش رو چیزی مثل این بذار:
color/primary/40
color/primary/80
حالا هر کامپوننتی این Style ها رو مصرف کنه، بعداً با یه تغییر Style کل UI آپدیت می‌شه ✨
۳️⃣ اتصال Token ها به Semantic Role ها
یه مرحله حرفه‌ای‌تر اینه که از Semantic Name استفاده کنی؛ یعنی چیزی که معنی استفاده رو بگه، نه فقط رنگ رو:
bg/surface/main
bg/surface/on-primary
text/primary
text/on-primary
border/subtle
داخل Style واقعاً از همون color/primary/40 و بقیه استفاده می‌کنی، ولی اسم Style ها رو Semantic می‌ذاری. این‌طوری اگر بعدها بخوای Theme Dark بسازی، فقط مپ کردن بین Semantic و Color عوض می‌شه.
۴️⃣ یک نمونه واقعی: دکمه Primary
برای یک Button Primary این مپ ساده خیلی جواب می‌ده:
- bg/surface/main => color/primary/40
- text/on-primary => color/neutral/0
- border/subtle => color/primary/60
کافیه Button Component فقط این Style ها رو استفاده کنه؛ حالا اگر اقتصادی‌تر یا تندتر بخوای Theme رو عوض کنی، مستقیم می‌ری سراغ Style ها، نه هر Artboard و هر صفحه.
۵️⃣ خروجی گرفتن برای Dev ها
اگر تو تیم‌تون از Token ها تو کد هم استفاده می‌شه، می‌شه با Plugin هایی مثل Figma Tokens یا Design Tokens رنگ‌ها رو به JSON تبدیل کرد و تو Frontend خوند.
یه ساختار JSON خیلی رایج (مثل Style Dictionary) چیزی شبیه اینه:
{
"color": {
"primary": {
"40": { "value": "#6750A4" },
"80": { "value": "#D0BCFF" }
},
"neutral": {
"0": { "value": "#FFFFFF" },
"10": { "value": "#1C1B1F" }
}
}
}
نکته‌های ریز ولی مهم 🎯
- قبل شروع پروژه، پالت رنگ رو بر اساس Contrast (طبق WCAG) چک کن؛ ابزار رسمی: WebAIM Contrast Checker
- برای Light و Dark Theme جداگانه Style نساز؛ همون Structure رو نگه دار و فقط Value ها رو عوض کن.
- از اول برای Error, Warning, Success هم Token داشته باش؛ وقتی State ها زیاد می‌شن خیلی کمک می‌کنه.
اگر تا الان رنگ‌ها تو فایلت پخش و پلا بودن، از همین امروز یه صفحه 🧱 Foundations / Colors بساز و اولین سری Design Token هات رو تعریف کن؛ دو سه ساعت وقت بذاری، تو کل عمر پروژه پس می‌گیری 💪
🔖 #Design #طراحی #UI #UX #Figma #Design_Tokens #Color_System #Material_Design #UI #UX #Design_System
👤 Developix
💎 Channel: @DevelopixDesign
6 · 1.3K ·