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

🎯 ‏طراحی یک سیستم تایپوگرافی واکنش‌گرا در 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