🎬 ساخت پروتوتایپ اسکرول اینتراکتیو در Figma

خیلی وقت‌ها توی طراحی صفحه موبایل یا وب، فقط دیدن اسکرین‌های ثابت کافی نیست. لازم کارفرما یا دولوپر دقیق ببینه کاربر چطور اسکرول می‌کنه، هدر چطوری Sticky می‌مونه، یا کارت‌ها موقع اسکرول چه حسی می‌دن. این‌جا Prototype توی Figma به‌کمک ما میاد 🎯

این پست بر اساس ورک‌فلو رسمی مستندات Figma برای پروتوتایپ (Figma Help Center – Prototype flows and connections) نوشته شده و یه سناریوی کاملا واقعی رو پوشش می‌ده:
ساخت یک لیست اسکرول‌دار با هدر Sticky و Animation نرم.

۱️⃣ آماده‌سازی Frame اصلی
• یک Frame موبایل بساز (مثلا iPhone 14 Pro).
• داخلش یک Header در بالا طراحی کن (لوگو، Title، آیکون سرچ).
• زیر هدر، چندتا Card تکراری بذار (لیست خبر، محصول، یا هر دیتای واقعی).

۲️⃣ فعال کردن Scroll عمودی
طبق راهنمای رسمی Figma برای Scrolling behavior:
• Frame موبایل رو انتخاب کن.
• توی پنل راست، بخش Prototype رو باز کن.
• از قسمت Overflow behavior گزینه Vertical scrolling رو انتخاب کن.

حالا اگر ارتفاع محتوا بیشتر از ارتفاع Frame باشه، توی Preview می‌تونی اسکرول کنی ✅

۳️⃣ Sticky کردن Header (Position: Fixed)
یکی از چیزهایی که خیلی توی پروژه‌های واقعی می‌بینیم، Sticky Headerـه.
طبق مستند Fixed objects in prototyping توی Figma:
• خود Header رو انتخاب کن.
• در پنل راست، توی بخش Design قسمت Constraints رو پیدا کن.
• گزینه Fix position when scrolling رو تیک بزن.

حالا توی Preview، محتوا اسکرول می‌شه ولی Header همون بالا می‌مونه، مثل یه اپ واقعی 📱

۴️⃣ اضافه کردن Micro Interaction روی کارت‌ها
برای اینکه Prototype فقط اسکرول خشک نباشه، یه اینتراکشن ساده روی Cardها اضافه کن:
• یک Variant دوم برای Card بساز (مثلا با Shadow بیشتر یا Background کمی تیره‌تر).
• Cardها رو به‌صورت Component Set دربیار.
• توی تب Prototype روی Variant اصلی کلیک کن و یک Interaction بساز:

On Tap → Change To → Variant Hover
Animation: Smart Animate
Easing: Ease out
Duration: 150ms

حالا موقع کلیک روی Card توی Preview، یه تغییر نرم و طبیعی می‌بینی که حس Product واقعی می‌ده ✨

۵️⃣ تنظیم Flow و Preview حرفه‌ای
برای اینکه Prototype مرتب و قابل‌ارائه باشه:
• روی Frame اصلی، از تب Prototype گزینه Set as starting frame رو فعال کن.
• از دکمه ▶️ بالا Present رو بزن و Prototype رو در یک پنجره جدا تست کن.
• اگر روی موبایل تست می‌کنی، از اپ رسمی Figma Mirror استفاده کن تا رفتار اسکرول روی دیوایس واقعی رو ببینی.

این مدل پروتوتایپ هم توی Usability Testing به شدت کمک می‌کنه، هم برای هم‌فهمی با Dev تیم عالیه. حس «ماکت» رو به «محصول واقعی» نزدیک‌تر می‌کنه و باعث می‌شه ایرادهای UX قبل از پیاده‌سازی دیده بشن 🔍

اگر تا حالا فقط اسکرین‌های استاتیک نشون می‌دادی، همین امروز یک Flow کوچک با اسکرول و Header ثابت بساز و توی تیم به اشتراک بذار؛ تاثیرش رو خیلی زود روی کیفیت فیedbackها می‌بینی 🚀

🔖 #Design #طراحی #UI #UX #Figma #Prototype #Interaction #UIUX #Scrolling #Mobile_UI

👤 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

با Migration Boost هاست‌ایران، برای مهاجرت به سرور ابری دوباره هزینه ترافیک نده! 🚀

با خرید اولین سرور ابری غیرساعتی از **هاست‌ایران**، بسته ترافیک هدیه مهاجرت به‌صورت خودکار برای سرویس شما فعال می‌شود:

✅ حداقل ۱۰۰ گیگابایت ترافیک هدیه مهاجرت
✅ افزایش حجم هدیه متناسب با ظرفیت دیسک اولیه
✅ ترافیک آپلود رایگان
✅ بدون محدودیت زمانی

سرور ابری هاست‌ایران را راه‌اندازی کنید و بکاپ‌ها، فایل‌ها و پایگاه داده خود را بدون دغدغه هزینه‌های پنهان ترافیک منتقل کنید.

👇 مشاهده پلن‌های سرور ابری هاست‌ایران
hostiran.club/Migration
hostiran.club/Migration

‏🎨 تا حالا صفحه‌ای طراحی شده که وقتی دیتا نیست، عملاً یک صفحه خالی و سرد تحویل کاربر بدهد؟ همینجا فرصت طلایی UX از بین می‌رود.

Empty State یا «حالت خالی»، جایی است که کاربر بیشتر از همیشه به راهنمایی نیاز دارد؛ مثلا اولین باری که لیست نوتیفیکیشن، تسک‌ها یا علاقه‌مندی‌ها خالی است.

✅ چند نکته کاربردی:

• یک پیام واضح بنویس که بگوید چرا اینجا خالی است.
• یک Call to Action روشن بگذار؛ مثلا دکمه «اضافه کردن آیتم جدید».
• از یک آیکن یا تصویر ساده استفاده کن؛ نه خیلی شلوغ، نه خیلی خشک.
• متن را کوتاه، دوستانه و بدون لحن خطاپرست بنویس.

نمونه متن ساده:

# متن پیشنهادی برای Empty State
عنوان: «هنوز کاری اینجا نیست»
توضیح: «اولین تسک‌ات را بساز تا همیشه جلوی چشم‌ات باشد.»
دکمه: «ساخت تسک جدید»

این طراحی ساده، هم حس گم شدن را کم می‌کند، هم کار بعدی کاربر را شفاف می‌کند و نرخ رها کردن صفحه را پایین می‌آورد. 🚀

امتحانش کن روی یک صفحه خالی در محصولت و ببین چقدر تجربه را انسانی‌تر می‌کند.

🔖 #Design #طراحی #UI #UX #Empty_State #UX_Writing #UI_Design #Interaction_Design #Product_Design

👤 Developix

💎 Channel: @DevelopixDesign

🔥 پروژه: مهارت Taste برای سلیقهٔ هوش‌ مصنوعی

وقتی برای متن‌های رابط‌کاربری، میکروکپی یا ایده‌های UX از AI کمک می‌گیری و خروجی فقط یک متن کلیشه‌ای و بی‌روح است، پروژهٔ Taste‑Skill دقیقا همان چیزی است که لازم می‌شود 🎯

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

لینک پروژه:
github.com/Leonxlnx/taste-skill
امتحانش بد نیست؛ مخصوصا اگر زیاد با AI برای کپی UI کار می‌کنی.

⭐️ 79,198 ستاره

🔖 #Design #طراحی #UI #UX #هوش_مصنوعی_در_طراحی

💎 @DevelopixDesign

‏یک صفحه تنظیمات شلوغ، حتی توی بهترین محصول، حس «پیچیدگی بی‌هدف» می‌دهد. با چند تغییر کوچک، تجربه کاربر خیلی نرم‌تر می‌شود. 😊

۱️⃣ تنظیمات را گروه‌بندی کن
به‌جای یک لیست بلند، گزینه‌ها را در گروه‌های معنایی بچین: اعلان‌ها، حریم‌خصوصی، نمایش، حساب کاربری و…
این کار اسکن‌کردن صفحه را سریع‌تر می‌کند و کاربر حس گم‌شدن ندارد.

۲️⃣ فقط مهم‌ها را در لایه اول نشان بده
گزینه‌های پیشرفته را زیر یک لینک «تنظیمات پیشرفته» پنهان کن. این الگو توی Material Design و iOS هم استفاده می‌شود و برای بیشتر کاربران فقط گزینه‌های اصلی کافی است. ✨

۳️⃣ از متن‌های راهنما کوتاه استفاده کن
برای سوییچ‌ها و چک‌باکس‌ها، یک زیرعنوان کوتاه (۲–۳ کلمه اضافی) خیلی کمک می‌کند که کاربر بدون آزمون‌وخطا بفهمد چه چیزی تغییر می‌کند.

# مثال ساختار منطقی تنظیمات (فقط برای ایده‌پردازی)
settings = {
    "نمایش": ["حالت تاریک", "اندازه فونت"],
    "اعلان‌ها": ["پوش نوتیفیکیشن", "ایمیل"],
    "پیشرفته": ["دیتای پس‌زمینه"]
}

در پروژه بعدی، یک‌بار فقط روی صفحه تنظیمات زوم کن و ببین چقدر می‌شود با حذف و گروه‌بندی، UI را سبک‌تر کرد. 💡

منبع: Nielsen Norman Group - Settings

🔖 #Design #طراحی #UI #UX #UI #UX #Settings #Information_Architecture #Design

👤 Developix

💎 Channel: @DevelopixDesign

🔥 پروژه: اسکرینیتی – ضبط‌کننده صفحه برای طراح‌ها

اسکرینیتی یه افزونه‌ رایگان Chrome برای ضبط صفحه‌ست که خیلی به درد طراح‌ و UXerها می‌خوره 🎥

می‌توانی فقط یک تب، کل دسکتاپ یا همراه وبکم ضبط کنی، روی ویدئو حین ضبط هایلایت، فلش ماوس و نوشته اضافه کنی و خروجی رو بدون محدودیت زمانی نگه داری.

برای تست کاربری ریموت، توضیح فلوهای پیچیده به دولوپر، یا گزارش باگ بصری عالیه. پروژه متن‌بازه و روی حریم‌خصوصی حساسه.

لینک گیت‌هاب: Screenity

⭐️ 18,696 ستاره

🔖 #Design #طراحی #UI #UX #UI

💎 @DevelopixDesign

ثبات توی تایپوگرافی، یکی از سریع‌ترین راه‌ها برای حرفه‌ای‌تر شدن UI است؛ مخصوصاً وقتی چند نفر روی یک محصول کار می‌کنند 👀

ایده ساده است: برای تیتر، متن و کپشن فقط چند سبک ثابت تعریف می‌شود و همه‌جا از همان‌ها استفاده می‌شود؛ نه هر صفحه یک سایز و وزن جدید.

🔹 مثال عملی در سیستم طراحی:

Heading / H1: اندازه ثابت، وزن بولد، فاصله‌گذاری مشخص
Body / Default: برای متن‌های اصلی
Caption / Helper: برای توضیحات ریز و Labelها


در ابزارهایی مثل Figma اگر برای هر متن یک Style جدا نسازی، به‌مرور صفحه‌ها شلخته می‌شوند و Hierarchy بصری کاملاً از بین می‌رود. نتیجه‌اش: کاربر نمی‌فهمد کدام متن مهم‌تر است و نگاهش هی روی صفحه سر می‌خورد 😅

یک نمونه نام‌گذاری تمیز برای Text Styleها:
Typography
├─ Heading / H1
├─ Heading / H2
├─ Body / Default
└─ Caption / Helper

نکته طلایی ✨
اول ساختن Styleها را در صفحه‌ٔ پایه سیستم طراحی جدی بگیر، بعد بقیه صفحه‌ها را فقط با همان Styleها بساز؛ هم UI یکدست می‌شود، هم تغییر فونت یا سایز بعداً عذاب‌آور نمی‌شود.

🔖 #Design #طراحی #UI #UX #UI #Typography #DesignSystem #UX #Figma

👤 Developix

💎 Channel: @DevelopixDesign

سنجش کنتراست؛ متن زیبا باید خوانا هم باشد 🎨

گاهی متن خاکستری روی کارت سفید، در فایل طراحی شیک است اما روی نمایشگر ضعیف یا زیر نور روز سخت خوانده می‌شود. قبل از تحویل طرح، کنتراست رنگ متن و پس‌زمینه را با معیار WCAG بررسی کن؛ حدس چشمی کافی نیست.

📐 معیار را درست انتخاب کن
برای سطح AA، متن معمولی حداقل نسبت 4.5:1 نیاز دارد. برای متن بزرگ، حداقل 3:1 است. در WCAG، «بزرگ» یعنی حداقل ۱۸ پوینت، یا ۱۴ پوینت با وزن بولد؛ در مقیاس CSS تقریباً ۲۴ و ۱۸٫۶۷ پیکسل.

در Figma یک نمونه از متن اصلی، متن توضیحی و متن دکمه را روی پس‌زمینه واقعی‌شان قرار بده. مقدار HEX رنگ‌ها را از بخش Fill بردار. برای این تمرین از رنگ‌های یکدست و بدون شفافیت استفاده کن؛ روی عکس یا گرادیان، یک جفت HEX کل وضعیت را نمایندگی نمی‌کند.

🧪 یک بررسی کوچک با پایتون
این کد بدون نصب کتابخانه، روشنایی نسبی رنگ‌های sRGB و نسبت کنتراست را محاسبه می‌کند:

def luminance(hex_color):
    rgb = [int(hex_color[i:i+2], 16) / 255
           for i in (1, 3, 5)]
    linear = [c / 12.92 if c <= 0.04045
              else ((c + 0.055) / 1.055) ** 2.4
              for c in rgb]
    return sum(c * w for c, w in
               zip(linear, (0.2126, 0.7152, 0.0722)))

text = luminance("#767676")
background = luminance("#FFFFFF")
ratio = (max(text, background) + 0.05) / (
    min(text, background) + 0.05)
print(f"Contrast: {ratio:.2f}:1")
print("AA normal text:", ratio >= 4.5)

خروجی این جفت رنگ تقریباً 4.54:1 است و برای متن معمولی قبول می‌شود. رنگ متن را به #777777 تغییر بده؛ نسبت تقریباً 4.48:1 می‌شود و دیگر قبول نیست. برای تصمیم‌گیری، عدد واقعی را مقایسه کن، نه مقدار گرد‌شده.

💡 اگر نتیجه پایین بود، متن را تیره‌تر یا پس‌زمینه را روشن‌تر کن و دوباره بسنج. رنگ خطا را هم تنها نشانه خطا نگذار؛ پیام متنی همراهش باشد.

مرجع رسمی کنتراست در WCAG

این بررسی را روی یکی از کارت‌های طرحت امتحان کن؛ خوانایی هم بخشی از زیبایی است. 🌱

🔖 #Design #طراحی #UI #UX #UI #Accessibility #WCAG #کنتراست #Figma

👤 Developix

💎 Channel: @DevelopixDesign

🔥 پروژه: متریال دیزاین برای WPF

برای طراحی رابط اپ‌های دسکتاپ با WPF، لازم نیست ظاهر همهٔ کنترل‌ها را از صفر بسازی. کیت Material Design in XAML سبک متریال گوگل را به پروژه‌های C# و VB.NET می‌آورد.

کنترل‌های آماده، تم روشن و تیره و تنظیم رنگ‌های اصلی و تأکیدی، کمک می‌کنند رابط یکدست‌تری بسازی؛ مخصوصاً وقتی قرار است طرح UI به یک اپ ویندوزی واقعی تبدیل شود.

برای دیدن اجزا و رفتارشان، اپ نمونهٔ پروژه نقطهٔ شروع خوبی است؛ مخزن و نمونه‌ها را ببین.

⭐️ 16,276 ستاره

🔖 #Design #طراحی #UI #UX #UI

💎 @DevelopixDesign