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