خیلی وقتها طراحیهامون از یه پروژه به پروژهی دیگه شبیه همدیگهست، ولی هر بار رنگها رو دستی کپی میکنیم، اسمگذاری نداریم، یا وقتی برند عوض میشه، نصف فایلها خراب میشن. راهحل تمیز و حرفهای این داستان: ساختن Color Design Token توی Figma 💡
اینجا یه ورکفلو واقعاً قابلاستفاده بر اساس داکیومنت رسمی Figma و Material Design داریم:
Figma – Create color styles
Material Design 3 – Color
۱. تعریف لایه اول: نقش رنگ، نه اسم رنگ 🎯
بهجای اینکه اسم بدی «آبی پررنگ» یا «سبز لجنی»، از اسمهای بر پایهی نقش استفاده کن:
•
primary / primary-container•
secondary / secondary-container•
surface / surface-variant•
errorاین دقیقاً همون رویکردیه که Material Design پیشنهاد میده. رنگ واقعی (مثلاً #6750A4) بعداً عوض میشه، ولی نقش
primary همیشه همونه.۲. ساخت Color Style توی Figma 🎛
۱) یه Rectangle بکش.
۲) رنگی که برای
primary میخوای رو انتخاب کن.۳) توی پنل Fill روی آیکن Style (چهار نقطه) بزن و + رو انتخاب کن.
۴) اسمش رو چیزی مثل این بذار:
color / light / primary
همین الگو رو برای حالتهای دیگه ادامه بده:
color / light / on-primary
color / light / surface
color / light / on-surface
color / dark / primary
color / dark / on-primary
...
این ساختار پوشهای توی Figma کمکت میکنه بعداً راحت سوئیچ کنی بین Light و Dark.
۳. Sync با Design Token ذهنی 🧠
کاری که داری میکنی در عمل همون Design Token ساختنه؛ فقط بهجای JSON داری از Styleهای Figma استفاده میکنی. اگر بعداً تیمتون رفت به سمت Design Token واقعی (مثلاً با Style Dictionary)، همین نامگذاری مستقیماً قابل مپی شدنه.
یه نمونه ساختار توکِن (فقط برای درک ذهنی، نه کدنویسی):
{
"color": {
"light": {
"primary": "#6750A4",
"on-primary": "#FFFFFF"
},
"dark": {
"primary": "#D0BCFF",
"on-primary": "#381E72"
}
}
}توی Figma همونها رو بهصورت Style تعریف میکنی، ولی منبع فکری یکیه.
۴. از HSL و Contrast هم غافل نشو 🔍
برای ساختن سایهها (tone) و روشنیهای مختلف، از منطق HSL استفاده کن: Hue ثابت، Lightness رو کموزیاد کن. بعد حتماً با ابزارهایی مثل:
WebAIM Contrast Checker
کنتراست
text روی surface و primary رو چک کن تا با WCAG همخوان باشه.۵. روتین استفاده در طراحی روزمره ✅
هر وقت دکمهای طراحی میکنی:
• پسزمینه:
color / light / primary• متن:
color / light / on-primaryاگر برند عوض شد، فقط Styleها رو آپدیت میکنی؛ همهی Buttonها، Cardها و… خودشون آپدیت میشن. این هم تمیزی فایل رو حفظ میکنه هم از Memory Leak بصری توی سیستم رنگ جلوگیری میکنه 🙂
امتحانش کن روی یه صفحه ساده (مثلاً یه Login Screen)، همهی رنگها رو فقط از Styleها بردار. وقتی اولین بار برند رو با عوضکردن چند Style ریدیزاین میکنی، تازه میفهمی قدرت Design Token توی Figma چقدره 🔁
🔖 #Design #طراحی #UI #UX #Figma #UI_Design #Design_Tokens #Color_System #Material_Design #WCAG #UX
👤 Developix
💎 Channel: @DevelopixDesign
