🎯 توی این پست می‌ریم سراغ یه کار کاملاً عملی: ساختن سیستم رنگ (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

در اکثر پروژه‌ها رنگ‌ها اولین جایی هستن که طراحی رو به‌هم می‌ریزن: هر صفحه یه رنگ، هر کامپوننت یه سایه! 😅 این‌جا 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

یه کار کوچیک ولی خیلی حرفه‌ای که تو همه‌ی تیم‌های طراحی جدی می‌بینی، درست‌کردن 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

تو اکثر پروژه‌ها مشکل از همون اول شروع می‌شه: هر طراح یا برنامه‌نویس یه رنگ برای خودش انتخاب می‌کنه، بعد از چند ماه می‌بینیم ده‌تا آبی، پنج‌تا خاکستری و کلی 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

تو خیلی از پروژه‌های UI/UX مشکل از همون اول از «رنگ‌ها» شروع می‌شه؛ هر کسی یه رنگ می‌ذاره، بعد از چند هفته دیگه کسی نمی‌دونه رنگ اصلی برند کدومه 😅

امروز یه ورک‌فلو خیلی عملی برای ساختن Color Design Tokens تو Figma رو مرور می‌کنیم؛ دقیقاً چیزی که تو داکیومنت رسمی Figma Color Styles و گایدلاین‌های Material Design 3 هم روش تأکید شده ✅

۱️⃣ اول: نقش رنگ‌هاتو بر اساس UI تعریف کن
به‌جای این‌که بگی "آبی تیره" یا "قرمز روشن"، از semantic tokens استفاده کن:

• primary / primary-container
• secondary
• error
• background / surface
• on-primary / on-surface (رنگ متن روی عنصرها)

این همون چیزیه که Material Design 3 پیشنهاد می‌کنه: رنگ‌هات رو بر اساس معنا و نقش اسم‌گذاری کن، نه بر اساس خودِ رنگ.

۲️⃣ ساختن Color Styleها در Figma 🎯
۱) تو Figma یک فایل جدا فقط برای Design System بساز.
۲) ابزار Fill رو انتخاب کن و رنگ برندت رو وارد کن.
۳) روی نقطه‌ی رنگ تو پنل راست کلیک کن و "Create style…" رو بزن.
۴) اسمش رو چیزی مثل:
color / primary / base
بذار.
۵) همین رو برای سایه‌ها و حالت‌ها ادامه بده:
color / primary / hover
color / primary / disabled

اسم‌گذاری سلسله‌مراتبی باعث می‌شه تو Asset Panel همه‌چیز منظم و سریعی پیدا بشه.

۳️⃣ تراز کردن با Contrast و WCAG ♿
برای متن‌هات باید کنتراست رو با گایدلاین WCAG چک کنی. می‌تونی از افزونه‌های Figma مثل:
Able – Frictionless Accessibility
استفاده کنی تا ببینی کدوم ترکیب رنگ‌هات به حداقل کنتراست ۴.۵:۱ برای متن‌های معمولی می‌رسه.

نمونه نام‌گذاری توی Design Tokenها (مثلاً برای Web)
این یه مثال ساده از خروجی تو فایل tokens.json یا Style Dictionary هست که مستقیم از Styleهای Figma الهام می‌گیره:

{
  "color": {
    "primary": {
      "base": "#6750A4",
      "hover": "#5B4794",
      "disabled": "#E6E0F8"
    },
    "background": {
      "base": "#FFFBFE"
    },
    "on": {
      "primary": "#FFFFFF",
      "background": "#1C1B1F"
    },
    "error": {
      "base": "#B3261E"
    }
  }
}

تو پروژه‌های Multi-platform (Android, iOS, Web) همین Tokenها می‌تونن به XML، Color Set یا CSS Var تبدیل بشن؛ بدون این‌که معنای رنگ‌ها عوض بشه.

۴️⃣ چند نکته ریز ولی مهم 💡
• برای حالت Dark Mode، همون ساختار اسم‌ها رو نگه‌دار، فقط فایل یا Collection جدا داشته باش.
• از رنگ‌های خاکستری خوب برای surface و border استفاده کن تا کل UI بهم نریزه.
• تو Figma از Styles حتماً استفاده کن؛ هیچ رنگی نباید "Loose" و بدون Style روی کامپوننت باشه.

امتحان این روش تو یه پروژه کوچیک (مثلاً یه Landing Page ساده) خیلی کمک می‌کنه قبل از رفتن سراغ پروژه‌های سنگین، روی Design Tokenها مسلط بشی 🙌

🔖 #Design #طراحی #UI #UX #Figma #Design_Tokens #Color_System #Material_Design #UI #UX #Color #Accessibility

👤 Developix

💎 Channel: @DevelopixDesign

🎨 ساخت سیستم رنگ حرفه‌ای با Design Token در Figma

خیلی وقت‌ها طراحی‌هامون از یه پروژه به پروژه‌ی دیگه شبیه هم‌دیگه‌ست، ولی هر بار رنگ‌ها رو دستی کپی می‌کنیم، اسم‌گذاری نداریم، یا وقتی برند عوض می‌شه، نصف فایل‌ها خراب می‌شن. راه‌حل تمیز و حرفه‌ای این داستان: ساختن 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