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

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

🎯 نکتهٔ عملی
برای متن‌های اصلی (Body Text)، سعی کن نسبت کنتراست حداقل مطابق WCAG زیر باشد:

• متن معمولی (small text): حداقل 4.5:1
• متن بزرگ (حداقل 18pt یا bold 14pt): حداقل 3:1

این استاندارد توی خیلی از Design Systemها مثل Material Design رعایت می‌شود و روی خستگی چشم و فهم سریع محتوا تاثیر مستقیم دارد. 👀

🧪 مثال ساده (Pseudo Code رنگ)

// رنگ پس‌زمینه روشن
bgColor = #FFFFFF

// رنگ متن خاکستری کمرنگ (کنتراست بد)
textColorBad = #BDBDBD   // تقریبی: 2.5:1 ❌

// رنگ متن خاکستری تیره (کنتراست خوب)
textColorGood = #424242  // تقریبی: 7:1 ✅

تفاوت ظاهری ممکنه خیلی کم به‌نظر برسد، اما روی صفحه موبایل، مخصوصاً در نور کم یا زیاد، خوانایی textColorGood خیلی بهتر است.

📌 چند نکتهٔ سریع در UI
• برای متن روی پس‌زمینه رنگی (مثلاً دکمه‌ها)، همیشه کنتراست را چک کن، مخصوصاً روی حالت Disabled.
• روی پس‌زمینه‌های عکس‌دار (Hero، Banner)، یا از لایه مشکی/سفید با شفافیت استفاده کن، یا متن را داخل Surface جداگانه بگذار.
• برای Secondary Text و Caption هم حداقل 4.5:1 را حفظ کن؛ خاکستری خیلی روشن معمولاً فقط روی پس‌زمینه کاملاً تیره جواب می‌دهد.

ابزارهای آنلاین مثل Contrast Checker کمک می‌کنند تصمیم‌های رنگی کاملاً آگاهانه و مطابق استاندارد بگیری. دفعه بعد که UI می‌سازی، فقط با یک اصلاح کوچک در کنتراست، می‌شود حس «طراحی حرفه‌ای» به محصول اضافه کرد. ✨

🔗 مرجع:
WCAG 2.1 – Contrast (Minimum)

🔖 #Design #طراحی #UI #UX #UI #UX #color #contrast #accessibility #WCAG #design_system

👤 Developix

💎 Channel: @DevelopixDesign

در طراحی UI خیلی وقت‌ها فقط با یک تغییر ساده در رنگ می‌شود رفتار و وضعیت یک کامپوننت را برای کاربر کاملاً شفاف کرد. یکی از مهم‌ترین جاها، دکمه‌ها (Buttons) و حالت‌های مختلفشان است.

🟢 ایده:
برای هر حالت (State) دکمه، یک رنگ و استایل مشخص و سازگار در کل محصول داشته باش:

• حالت عادی (Default)
• حالت Hover / Pressed
• حالت Disabled
• حالت Error / Destructive

این کار باعث می‌شود کاربر بدون فکر اضافه، فقط با دیدن رنگ و کنتراست، متوجه شود کدام اکشن فعال، غیرفعال یا خطرناک است.

✅ مثال عملی (بر اساس Material Design):
• Action اصلی: رنگ پر (Filled) با کنتراست بالا نسبت به پس‌زمینه
• Secondary: حاشیه‌دار (Outlined) با رنگ ملایم‌تر
• دکمه خطرناک (Delete): قرمز با کنتراست بالا
• Disabled: کاهش Opacity تا جایی که هنوز خوانا باشد ولی واضحاً غیرقابل‌کلیک به‌نظر برسد

نمونه توصیفی ساده برای یک Button System:

Primary:    #2962FF  (Default)
Primary:    #0039CB  (Pressed)
Primary:    rgba(41,98,255,0.12)  (Disabled bg)
Danger:     #D32F2F  (Default)
Danger:     #9A0007  (Pressed)
Text on Btn: #FFFFFF

✨ چند نکته UX مهم:
• برای حالت Disabled فقط به Opacity تکیه نکن؛ کنتراست متن را هم چک کن که با WCAG حداقل > 3.0 در حالت خوانا باشد.
• رنگ‌های Action اصلی و خطرناک را خیلی به هم نزدیک انتخاب نکن تا کاربر در لحظه اشتباه کلیک نکند.
• در تمام صفحات از یک System ثابت استفاده کن؛ Primary امروز آبی و فردا بنفش نشود.

🔍 منبع پیشنهادی برای دیدن مثال‌های خوب:
راهنمای Buttons در Material Design 3

امروز اگر در Figma یک Style کوچک برای رنگ‌های State بسازی، فردا در کل Design System وقت و انرژی زیادی ذخیره می‌شود و رفتار UI برای کاربر قابل‌پیش‌بینی و قابل‌اعتماد می‌ماند.

🔖 #Design #طراحی #UI #UX #UI #UX #Color #Design_System #Buttons

👤 Developix

💎 Channel: @DevelopixDesign

در اکثر پروژه‌ها مشکل از همین‌جا شروع می‌شود: المان‌ها «تقریباً» تراز هستند، فاصله‌ها «تقریباً» یکی است و آخر سر UI شلخته به نظر می‌رسد.

امروز می‌رویم سراغ یک مهارت خیلی عملی: طراحی Layout Grid سیستمی در Figma برای صفحات وب / Desktop (بر اساس توصیه‌های Material Design و الگوهای رایج 12-Column Grid).

🧩 ایده‌ی اصلی
وقتی برای هر صفحه یک Grid ثابت و قابل تکرار داشته باشی:

• فاصله‌ها و ستون‌ها استاندارد می‌شوند 🧱
• تیم راحت‌تر Design را به Frontend تحویل می‌دهد 🔁
• تغییر Layout در آینده خیلی کم‌هزینه‌تر می‌شود

⚙️ ساخت یک 12-Column Grid در Figma
این مثال برای یک صفحه Desktop با عرض 1440px است (یکی از رایج‌ترین Breakpoint ها):

۱️⃣ یک Frame جدید بساز:
• ابزار Frame را انتخاب کن و از بالا Desktop → 1440 را بزن.

۲️⃣ Grid را فعال کن:
• Frame را انتخاب کن.
• در پنل راست، بخش Layout grid روی + کلیک کن.
• روی آیکن چهارخونه کلیک کن و نوع را از Grid به Columns تغییر بده.

۳️⃣ تنظیمات پیشنهادی Columns 🧮
• Count: 12
• Type: Stretch
• Margin: 80 (راست)، 80 (چپ) → مجموعاً 160px فضای اطراف
• Gutter: 24px (فاصله‌ی بین ستون‌ها)

این ترکیب، یک Grid تمیز و استاندارد برای وب‌اپ‌ها و داشبوردها می‌دهد که با خیلی از Design System ها هم‌خوان است.

📏 تنظیم 8pt System برای Spacing
هم‌زمان با Grid، فاصله‌های داخلی و خارجی را هم روی مضرب‌های 8 تنظیم کن (8, 16, 24, 32...). این کار هم در Design و هم در پیاده‌سازی CSS کمک زیادی می‌کند.

یک مثال ساده از فواصل در بخش کارت‌ها:

Card Padding: 24px
Gap بین آیکن و متن: 8px
Gap بین تیتر و توضیح: 4 یا 8px
Gap بین کارت‌ها در لیست: 16 یا 24px

📌 نکته‌ی مهم برای Responsive
وقتی Grid Type روی Stretch است، ستون‌ها متناسب با عرض Frame کش می‌آیند، ولی Margin و Gutter ثابت می‌مانند. برای Breakpoint های دیگر (مثلاً 1024 و 768)، حتماً Frame جدا با Grid تنظیم‌شده‌ی خودش بساز.

🔍 منابع واقعی برای مطالعه‌ی بیشتر
• Material 3 Layout:
m3.material.io/foundations/layout/understanding-layout/overview
• مقاله مفید درباره 8pt Grid از واحد طراحی iOS/Android:
builttoadapt.io/intro-to-the-8-point-grid-system

✅ نکات ریز اما مهم
• Text و Component های اصلی را روی ستون‌ها تراز کن، نه «وسطِ چشمی» بین‌شان.
• برای عناصر تمام‌عرض (مثلاً Background Section)، اجازه بده از کل Frame استفاده کنند، ولی محتوا را محدود به Grid نگه دار.
• در Figma می‌توانی این Frame را به عنوان Template نگه داری و همه‌ی صفحه‌ها را از روی آن Duplicate کنی.

یک‌بار درست Grid بسازی، تا آخر پروژه از شلختگی Layout نجاتت می‌دهد.

امروز روی یک صفحه‌ی واقعی پروژه‌ات این Grid را تست کن و تفاوت نظم و سرعت کار را حس کن 🚀

🔖 #Design #طراحی #UI #UX #UI #UX #Figma #Grid #Layout #Design_System #Desktop

👤 Developix

💎 Channel: @DevelopixDesign

‏🎯 ساخت یک کامپوننت دکمه حرفه‌ای در Figma (قابل‌استفاده‌مجدد)

یکی از کارهای خیلی روزمره توی UI Design، ساختن دکمه‌ست. ولی اگر هر بار برای هر صفحه دکمه رو از صفر بسازی، خیلی زود همه‌چیز شُلخته و مدیریت‌ناپذیر می‌شه 😅

توی این پست با هم یک Button Component تمیز و مقیاس‌پذیر توی Figma می‌سازیم؛ چیزی شبیه الگوهای Material Design Buttons که به‌راحتی بشه برای حالت‌های مختلف (Primary, Secondary, Disabled, Icon) ازش استفاده کرد.

۱️⃣ طراحی پایه دکمه

• یک Frame جدید بساز و اندازه رو مثلاً بذار 48×120.

• گوشه‌ها رو 8px گرد کن (Corner Radius = 8).

• رنگ پس‌زمینه رو روی یه رنگ Primary از سیستم رنگت بذار (مثلاً #1E88E5).

• یک متن وسطش بذار: «Button» با وزن Medium و سایز 14 یا 16.

اینجا مهمه که Text رو وسط‌چین و Auto Width یا Auto Layout رو درست تنظیم کنی تا بعداً با تغییر متن، دکمه به‌هم نریزه.

۲️⃣ فعال‌کردن Auto Layout برای کنترل Padding

روی Frame اصلی دکمه، از پنل راست Auto Layout رو فعال کن:

• جهت: Horizontal
• Alignment: Center & Center
• Padding افقی: مثلاً 16–24px
• Padding عمودی: 10–12px
• Spacing between items: 8 (اگر آیکن اضافه شد، به‌درد می‌خوره)

حالا اگر متن رو عوض کنی، دکمه خودش به‌صورت Responsive رشد می‌کنه. این همون چیزیه که تو راهنماهای رسمی Figma برای Button پیشنهاد می‌شه (می‌تونی نمونه رو تو Figma Auto Layout ببینی).

۳️⃣ تبدیل به Component + Variant

• Frame دکمه رو انتخاب کن و از بالا روی Create component بزن.
• حالا از پنل راست روی + کنار Variants کلیک کن تا چند Variant بسازی:

– primary / enabled
– primary / hover
– primary / disabled
– primary / with-icon

به هر Variant یک Property بده؛ مثلاً:

Type = Primary
State = Enabled | Hover | Disabled
Icon  = True | False

این دقیقاً همون مدلیه که تو Figma Variants پیشنهاد شده و کمک می‌کنه طراح و دولوپر یک زبان مشترک داشته باشن.

۴️⃣ تنظیم حالت‌ها (States)

📌 چند پیشنهاد براساس Material Design:

• Hover: همون رنگ Primary با یک Overlay ملایم (مثلاً +8% Opacity سیاه).
• Pressed: کمی تیره‌تر یا با Shadow کمتر.
• Disabled: پس‌زمینه خاکستری روشن، متن با Opacity حدود 38%.

فقط حواست باشه کنتراست رنگ متن و پس‌زمینه با WCAG اوکی باشه؛ برای متن روی دکمه حداقل کنتراست 4.5:1 خوبه. می‌تونی تو WebAIM Contrast Checker تست کنی.

۵️⃣ افزودن Icon به دکمه

برای Variant با آیکن:

• یک آیکن 20×20 (یا 16×16 بسته‌به Guideline) سمت چپ متن بذار.
• Auto Layout رو طوری تنظیم کن که فاصله Text و Icon ثابت بمونه (Spacing = 8).
• تو Properties، Icon = True/False بذار تا بعداً بتونی با یک کلیک دکمه رو آیکن‌دار یا بدون آیکن کنی.

۶️⃣ استفاده در پروژه‌های واقعی

حالا هر وقت توی یک صفحه جدید دکمه خواستی:

• از Assets، این Button Component رو Drag کن.
• توی پنل راست State و Type و Icon رو عوض کن.
• فقط Text رو Edit کن، بدون این‌که استایل به‌هم بریزه.

این دقیقاً جاییه که Design System شروع می‌شه: یک بار فکر می‌کنی، بارها استفاده می‌کنی 💡

در اولین پروژه بعدی‌ات این Button Component رو بساز و کم‌کم بقیه کامپوننت‌ها (Input, Checkbox, Tabs) رو هم مشابه همین الگو دربیار. بعد از چند صفحه، تفاوت سرعت و نظم رو کاملاً حس می‌کنی 🚀

🔖 #Design #طراحی #UI #UX #Figma #UI_Design #Component #Button #Material_Design #Auto_Layout #Design_System #Persian

👤 Developix

💎 Channel: @DevelopixDesign

در Figma اگر هنوز از Frame‌های ثابت و دستی استفاده می‌کنی، Auto Layout می‌تونه زندگی‌ات رو خیلی راحت‌تر کنه 😄 مخصوصاً برای چیزهایی مثل کارت محصول، کارت خبر یا هر کامپوننتی که قراره روی چند سایز اسکرین جواب بده.

اینجا یه ورک‌فلو واقعی و ساده‌ست بر اساس داک رسمی Figma:
Create dynamic designs with Auto layout

🧩 سناریو: کارت محصول واکنش‌گرا
فرض کن تو یه اپ فروشگاهی کار می‌کنی و یه کارت لازم داری که:
- بالا عکس محصول باشه
- زیرش عنوان
- زیر عنوان، قیمت و دکمه Add to Cart کنار هم
- تو موبایل و دسکتاپ بدون شکستن، خودش رو Adapt کنه

۱️⃣ ساخت اسکلت کارت
- یه Frame بساز (F)
- توش ۳ آیتم بذار: Image، Title، Row پایینی (Price + Button)
- حالا روی Frame اصلی از پنل راست، Auto layout رو فعال کن (یا Shift+A)
- Direction رو بذار روی عمودی (Vertical)
- Spacing بین آیتم‌ها رو مثلاً 8 یا 12 بذار که ریتم خوبی بده 🔁

۲️⃣ کنترل Padding و Radius کارت
- روی همون Frame اصلی:
- Padding افقی/عمودی رو مثلاً 16 بذار
- Corner Radius مثلاً 12 تا کارت نرم و مدرن بشه
- Fill کارت رو یه رنگ خنثی روشن انتخاب کن (مثلاً #FFFFFF روی پس‌زمینه خاکستری روشن)

۳️⃣ ردیف قیمت و دکمه با Auto Layout افقی
- Price و Button رو انتخاب کن
- Shift+A تا یه Auto layout افقی بسازی
- Justify content رو روی "Space between" بذار تا دو سر کارت وایسن
- Alignment عمودی رو وسط تنظیم کن تا Price و Button روی یک خط باشن

۴️⃣ رفتار متن و دکمه روی Resize
- روی کارت اصلی، از قسمت Resizing، عرض رو روی "Fill container" برای متن عنوان بذار
- برای Image می‌تونی "Fixed width" بذاری که پروپورشن ثابت بمونه
- دکمه رو تو Auto layout افقی روی Hug content بذار که با طول متن خودش تنظیم بشه ✅

۵️⃣ تست در چند سایز (واقعا مهم برای UI/UX)
- کارت رو انتخاب کن و از Scale استفاده نکن؛ فقط Width رو با درگ کردن Handleها یا وارد کردن عدد عوض کن
- ببین متن رپ می‌شه؟ فاصله‌ها منطقی می‌مونن؟ چیزی نمی‌چسبه به لبه‌ها؟
این دقیقاً همون چیزیه که تو داک رسمی Figma هم تاکید شده: اول رفتار، بعد سایز.

۶️⃣ نمونه Auto Layout واقعی (کد JSON Frame)
چون اینجا کد برنامه‌نویسی نداریم، یه نمونه JSON از ساختار Auto layout که Figma API تولید می‌کنه رو می‌ذارم که ببینی زیر hood چه اتفاقی می‌افته 👇

{
  "layoutMode": "VERTICAL",
  "itemSpacing": 12,
  "paddingLeft": 16,
  "paddingRight": 16,
  "paddingTop": 16,
  "paddingBottom": 16,
  "primaryAxisAlignItems": "SPACE_BETWEEN",
  "counterAxisAlignItems": "CENTER"
}

Ref: Figma FrameNode layoutMode

با چند تا کارت این‌طوری و تبدیل‌شون به Component، می‌تونی کل لیست محصولات یا مقالات رو خیلی تمیز و قابل نگه‌داری طراحی کنی. دفعه بعد نیاز به تغییر Padding یا Radius داشتی، فقط تو یه جا آپدیت می‌کنی و بقیه Variantها خودشون تنظیم می‌شن ✨

امتحانش کن روی یه پروژه واقعی و ببین چقدر زمانت تو Iterationهای بعدی سیو می‌شه 🙌

🔖 #Design #طراحی #UI #UX #Figma #Auto_Layout #UI_Design #Component #Product_Card #Design_System

👤 Developix

💎 Channel: @DevelopixDesign

🎯 ‏طراحی یک سیستم تایپوگرافی واکنش‌گرا در Figma

تایپوگرافی قوی نصف مسیر یک UI خوبه. اگه فونت، سایز و فاصله‌ها روی هر اسکرین یکنواخت نباشه، حتی بهترین رنگ‌ها و آیکون‌ها هم حس «غیرحرفه‌ای» می‌دن.

توی این پست، خیلی عملی می‌ریم سراغ ساخت یک Type Scale تمیز و قابل‌استفاده برای وب / موبایل، بر اساس راهنمای Material Design 3، و پیاده‌سازیش داخل Figma.

۱️⃣ انتخاب پایه‌ی تایپوگرافی

اول یک Base Size انتخاب کن:

• برای وب: معمولاً 16px
• برای موبایل: می‌تونی 14–16px رو تست کنی

این Base می‌شه نقطه‌ی شروع همه‌ی Styleها؛ یعنی مثلاً Body، بعد از اون Headlineها، Caption و غیره.

۲️⃣ ساخت Type Scale منطقی

Material Design پیشنهاد می‌ده چند سطح مشخص داشته باشی:

• Display (بزرگ‌ترین تیترها)
• Headline
• Title
• Body
• Label

لازم نیست همه‌ی سطح‌ها رو کپی کنی، ولی می‌تونی مثلاً این ترکیب رو بسازی:

• Display / H1
• Headline / H2
• Title
• Body (Regular + Medium)
• Caption / Label

به‌جای انتخاب تصادفی سایز، یک نسبت ثابت در نظر بگیر (مثلاً 1.25):

• Body: 16px
• Title: 20px (16 × 1.25)
• Headline: 25px تقریباً (20 × 1.25)
• Display: حدود 31px (25 × 1.25)

این نسبت باعث می‌شه تایپوگرافی «هماهنگ» دیده بشه، نه وصله‌پینه‌ای 😄

۳️⃣ ساخت Text Styleها در Figma

حالا نوبت پیاده‌سازی توی Figma ست:

• یک Text بنویس، فونت اصلی رو انتخاب کن (مثلاً Vazirmatn یا IranYekan).
• اندازه، وزن و Line height رو تنظیم کن.
• از پنل راست روی چهار نقطه‌ی Style کلیک کن و Create style… رو بزن.
• برای نام‌گذاری، از ساختار سیستمی استفاده کن:

type / display / xl
type / headline / lg
type / title / md
type / body / md
type / label / sm

این مدل نام‌گذاری (Category / Role / Size) هم توی Design System های بزرگ استفاده می‌شه و هم توی تیم، سریع قابل‌فهمه.

۴️⃣ تنظیم Line Height و Letter Spacing

• برای متن‌های طولانی (Body)، Line height بین 140% تا 160% خوانایی خوبی می‌ده.
• برای تیترهای بزرگ، می‌تونی Line height رو کمتر (110–120%) بگیری تا جمع‌وجورتر بشه.
• توی زبان فارسی معمولاً نیازی به Letter spacing زیاد نیست؛ مگر توی Labelهای کوچک.

یک نکته‌ی مهم از طرف WCAG: فاصله‌ی خطوط کافی کمک می‌کنه متن روی اسکرین خسته‌کننده و سخت‌خوان نشه، مخصوصاً روی موبایل.

۵️⃣ Type Style برای حالت‌های مختلف (Responsive)

خیلی وقت‌ها برای Desktop و Mobile اندازه‌ی متفاوت لازم داری. به‌جای ساخت Styleهای کاملاً جدا، می‌تونی این‌طوری نام‌گذاری کنی:

type / body / md / desktop
type / body / md / mobile

بعد توی Design System بخش Usage بنویس که مثلاً:

• توی Desktop از نسخه‌ی desktop استفاده می‌شه.
• توی Mobile frameها، Style مربوط به mobile رو اعمال کن.

۶️⃣ ترفند کوچک برای تست سریع

یک Text Sample بساز (چند پاراگراف فارسی + چند تیتر). روی چند Frame با سایز مختلف (مثلاً 1440، 1024، 390) این Styleها رو تست کن. اگر در هر سه حالت خوانا بود و ریتم خوبی داشت، یعنی Scaleت منطقیه.

در نهایت، وقتی یک بار این سیستم رو تمیز بسازی، هر پروژه‌ی جدید فقط چند دقیقه طول می‌کشه تا تایپوگرافیش سر و شکل حرفه‌ای بگیره ✨

امتحانش کن روی یکی از صفحه‌های قدیمی‌ات در Figma و ببین فقط با تغییر Type Styleها، چقدر UI مرتب‌تر و Mature به‌نظر می‌رسه 🙌

🔖 #Design #طراحی #UI #UX #Figma #Typography #UI #Design_System #Material_Design #WCAG

👤 Developix

💎 Channel: @DevelopixDesign

🎯 ترفند سریع: سیستم فاصله‌گذاری ۴–۸–۱۲ توی UI

یکی از ساده‌ترین راه‌ها برای تمیزتر شدن UI اینه که برای فاصله‌ها (spacing) از یه «سیستم» ثابت استفاده بشه، نه حدس و احساس لحظه‌ای. این کار هم طراحی رو منظم‌تر می‌کنه، هم دستِ دولوپر رو برای پیاده‌سازی راحت‌تر. ✨

ایده‌اش اینه که همه‌ی فاصله‌ها رو از مضرب‌های ۴ یا ۸ انتخاب کنی: مثلاً ۴، ۸، ۱۲، ۱۶، ۲۰، ۲۴ پیکسل. این‌طوری فاصله‌ی بین کارت‌ها، دکمه‌ها، سکشن‌ها و… همه یه ریتم مشخص پیدا می‌کنن و طراحی کمتر شلوغه.

مثال ساده با CSS برای پیاده‌سازی توی Design System:

.spacing-4 { margin: 4px; }
.spacing-8 { margin: 8px; }
.spacing-12 { margin: 12px; }
.spacing-16 { margin: 16px; }

این رویکرد توی Material Design هم پیشنهاد شده و باعث می‌شه در مرور زمان، اضافه کردن کامپوننت‌های جدید بدون به‌هم‌ریختگی بصری انجام بشه. 💡

امروز فقط فاصله‌های صفحه‌ی بعدی رو با این سیستم هماهنگ بشه؛ تفاوت نظم بصریش کاملا قابل حس می‌شه.

منبع: Material Design – Layout

🔖 #Design #طراحی #UI #UX #UI #UX #Spacing #Design_System #Material_Design #Layout

👤 Developix

💎 Channel: @DevelopixDesign