Postیه کار کوچیک ولی خیلی حرفه‌ای که تو همه‌ی تیم‌های طراحی جدی می‌بینی، درست‌کردن Design Token‌های رنگ توی Figma ـه. این کا…

یه کار کوچیک ولی خیلی حرفه‌ای که تو همه‌ی تیم‌های طراحی جدی می‌بینی، درست‌کردن Design Token‌های رنگ توی Figma ـه. این کار باعث می‌شه رنگ‌هات تمیز، قابل‌مدیریت و آماده برای Design System باشن؛ مخصوصاً وقتی بعداً می‌خوای Dark Mode یا چند برند مختلف رو هندل کنی. این روال بر اساس 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