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

اگر با مفاهیم پایه طراحی رابط کاربری (UI — User Interface) و تجربه کاربری (UX — User Experience) آشنا نیستید، ابتدا طراحی رابط کاربری چیست و تفاوت UI و UX را بخوانید.

چرا فیگما برای شروع طراحی؟

پیش از هر چیز، باید بدانید چرا فیگما در چند سال اخیر به انتخاب اول طراحان تبدیل شده. سه دلیل اصلی:

  1. مبتنی بر مرورگر: بدون نصب نرم‌افزار سنگین. از هر دستگاهی قابل‌دسترسی. برای تیم‌های دورکار، بزرگ‌ترین مزیت.
  2. همکاری همزمان: چند نفر می‌توانند همزمان روی یک فایل کار کنند. برای تیم‌های طراحی، این ویژگی انقلابی بود.
  3. پشتیبانی از پلاگین و API: اکوسیستم بزرگی از پلاگین‌ها که کار طراحی را ساده‌تر می‌کنند.

مقایسه تفصیلی فیگما با Adobe XD در مقایسه فیگما و ادوبی XD و نقد تفصیلی خود فیگما در فیگما چیست و چرا محبوب است آمده است.

آماده‌سازی: فایل، پلاگین، تنظیمات

پیش از شروع طراحی، سه کار آماده‌سازی:

گام اول: ساخت فایل و تنظیم واحد

در فیگما، هر پروژه یک فایل است. برای هر پروژه جدید، فایل جداگانه بسازید. تنظیم واحد را روی پیکسل (px) بگذارید، چون واحد استاندارد طراحی وب و اپلیکیشن است.

گام دوم: پلاگین‌های ضروری

پنج پلاگین که در همه پروژه‌ها نصب می‌کنم:

  1. Unsplash: تصاویر رایگان برای پر کردن placeholder.
  2. Iconify: مجموعه بزرگ آیکون‌های متن‌باز.
  3. Content Reel: تولید متن و داده آزمایشی واقع‌گرایانه.
  4. Remove BG: حذف پس‌زمینه تصاویر.
  5. Stark: بررسی دسترس‌پذیری و کنتراست رنگ.

مقایسه تفصیلی پلاگین‌ها در پلاگین‌های ضروری فیگما آمده است.

گام سوم: ساختار فریم‌های اصلی

پیش از طراحی هر صفحه، فریم‌های اصلی را بسازید:

Desktop 1440x900
Tablet 768x1024
Mobile 375x812

هرکدام از این فریم‌ها، یک بند شکست (breakpoint) در طراحی شما هستند. طراحی واکنش‌گرا با همین سه فریم شروع می‌شود. راهنمای تفصیلی در طراحی ریسپانسیو چیست.

ساختار فایل حرفه‌ای

یک فایل حرفه‌ای فیگما، سه بخش اصلی دارد:

بخش اول: Pages (صفحات)

📄 00 — Cover (صفحه جلد)
📄 01 — Design System (سیستم طراحی)
📄 02 — Components (کامپوننت‌ها)
📄 03 — Wireframes (وایرفریم‌ها)
📄 04 — Designs (طراحی‌های نهایی)
📄 05 — Prototypes (پروتوتایپ‌ها)
📄 06 — Handoff (تحویل به توسعه)

این هفت صفحه، قالب استانداردی است که در همه پروژه‌ها استفاده می‌کنم. صفحه جدا برای هر دسته، جستجو و مدیریت را ساده می‌کند.

بخش دوم: Sections (بخش‌بندی درون صفحه)

در هر صفحه، از Section برای گروه‌بندی محتوا استفاده کنید. مثلاً در صفحه Designs، هر صفحه سایت یک Section جداگانه:

📦 Section: Home Page
📦 Section: About Page
📦 Section: Contact Page
📦 Section: Shop Page

بخش سوم: نام‌گذاری لایه‌ها

قاعده‌ای که در همه پروژه‌ها رعایت می‌کنم: هر لایه باید نام معنادار داشته باشد. نه Frame 427، بلکه HeroSection، ProductCard، NavBar. این عادت ساده، تفاوت بین فایل قابل‌نگهداری و آشغال‌دان دیجیتال است.

فایل فیگما، مثل کد است: اگر بدون ساختار باشد، سه ماه بعد، خودتان هم نمی‌فهمید چه‌کار کرده‌اید.

فریم، گروپ و انتخاب صحیح

یک تفاوت بنیادی که در همان روز اول باید یاد بگیرید: تفاوت Frame و Group.

Frame

Frame یک ظرف با ابعاد مشخص است که می‌تواند:

  • خودش اندازه مستقل داشته باشد.
  • گروه‌بندی خودکار (Auto Layout) بپذیرد.
  • به‌عنوان بند شکست در پروتوتایپ عمل کند.
  • خروجی (Export) با ابعاد مشخص بدهد.

Group

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

قاعده انتخاب

قاعده‌ای که در همه پروژه‌ها رعایت می‌کنم:

  • Frame: برای هر چیزی که باید هویت مستقل داشته باشد — صفحه، کارت، دکمه، مودال.
  • Group: فقط برای گروه‌بندی موقت — مثل انتخاب چند عنصر برای جابه‌جایی.

در تجربه من، اکثر مبتدیان همه چیز را Group می‌کنند. سپس در مرحله طراحی واکنش‌گرا به بن‌بست می‌خورند. Frame، ابزار حرفه‌ای است.

کامپوننت: قلب طراحی مقیاس‌پذیر

کامپوننت، همان مفهومی است که فیگما را از ابزارهای طراحی سنتی جدا می‌کند. کامپوننت یعنی یک عنصر طراحی که در سراسر فایل، به‌صورت مرکزی تعریف شده. تغییر آن، همه‌جا اعمال می‌شود.

انواع کامپوننت در فیگما

  1. Main Component: نسخه اصلی که تعریف می‌کنید.
  2. Instance: نسخه کپی‌شده که از Main Component پیروی می‌کند.
  3. Variant: نسخه‌های مختلف یک کامپوننت (حالت hover، حالت disabled).
  4. Component Set: گروهی از Variantها که یک کامپوننت را می‌سازند.

مثال: کامپوننت دکمه

یک دکمه معمولی، حداقل چهار Variant دارد:

Button
├── State: Default
├── State: Hover
├── State: Focus
├── State: Disabled
├── Type: Primary
├── Type: Secondary
└── Type: Ghost

این ساختار، ۱۲ ترکیب ممکن می‌سازد. تغییر یک رنگ در Main Component، همه ۱۲ ترکیب را به‌روز می‌کند. در پروژه‌ای که ۲۰۰ دکمه مختلف دارد، این صرفه‌جویی زمانی، عظیم است.

قواعد ساخت کامپوننت

سه قاعده‌ای که در همه پروژه‌ها رعایت می‌کنم:

  1. کامپوننت را از همان روز اول بساز: حتی اگر فقط دو بار استفاده می‌شود. تغییرات آینده را ساده می‌کند.
  2. نام‌گذاری را جدی بگیرید: از ساختار نقطه‌گذاری استفاده کنید — Button/Primary/Large.
  3. از Instance استفاده کنید، نه Copy: کپی معمولی، ارتباط با Main Component را قطع می‌کند.

استایل‌ها: رنگ، تایپوگرافی، افکت

فیگما سه نوع استایل مرکزی دارد که در همه پروژه‌ها باید تعریف شوند:

رنگ‌ها

پیش از طراحی، پالت رنگ را تعریف کنید:

Primary/500 #2563EB
Primary/600 #1D4ED8
Neutral/900 #111827
Neutral/700 #374151
Neutral/500 #6B7280
Neutral/300 #D1D5DB
Neutral/100 #F3F4F6
Success/500 #10B981
Warning/500 #F59E0B
Danger/500  #EF4444

این ساختار، مبتنی بر سیستم‌های طراحی شناخته‌شده است. راهنمای تفصیلی در سیستم طراحی چیست.

تایپوگرافی

سلسله‌مراتب تایپوگرافی را از همان ابتدا تعریف کنید:

Display/Large: 48/56, Bold
Heading/1:     32/40, Bold
Heading/2:     24/32, SemiBold
Heading/3:     20/28, SemiBold
Body/Large:    18/28, Regular
Body/Regular:  16/24, Regular
Body/Small:    14/20, Regular
Caption:       12/16, Regular

هرکدام از این‌ها یک Text Style در فیگما است. تغییر اندازه فونت در کل طراحی، با تغییر یک Style انجام می‌شود.

افکت‌ها

سایه‌ها (Shadow) و درخشش (Glow) نیز به‌عنوان Effect Style تعریف شوند:

Shadow/sm: 0 1 2 rgba(0,0,0,0.05)
Shadow/md: 0 4 6 rgba(0,0,0,0.1)
Shadow/lg: 0 10 15 rgba(0,0,0,0.1)
Shadow/xl: 0 20 25 rgba(0,0,0,0.15)

استفاده از Effect Style به‌جای وارد کردن دستی سایه، هم یکنواختی می‌آورد، هم تغییرات آینده را ساده می‌کند.

Auto Layout و طراحی واکنش‌گرا

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

پارامترهای اصلی Auto Layout

  1. Direction: افقی یا عمودی.
  2. Spacing: فاصله بین عناصر.
  3. Padding: فاصله داخلی.
  4. Alignment: چیدمان عناصر.
  5. Resizing: نحوه پاسخ به تغییر اندازه.

مثال عملی: کارت محصول

یک کارت محصول را با Auto Layout می‌سازیم:

Card (Auto Layout: Vertical, Padding 16, Spacing 12)
├── Image (Fill container width, Fixed height 200)
├── Title (Auto Layout: Text, Fill container width)
├── Price (Auto Layout: Horizontal, Space between)
└── Button (Auto Layout: Fill container width)

با این ساختار، اگر محتوای کارت بزرگ‌تر شود، فیگما خودش ارتفاع را تنظیم می‌کند. اگر عرض کارت تغییر کند، تصویر و متن خودشان را وفق می‌دهند.

چرا Auto Layout مهم است؟

  • طراحی واکنش‌گرا را ساده می‌کند.
  • تغییرات محتوا را بی‌دردسر می‌کند.
  • تحویل به توسعه‌دهنده را دقیق‌تر می‌کند (چون ساختار دقیقاً منطبق بر Flexbox است).
در فیگما، استفاده از Auto Layout به‌جای چیدمان دستی، مثل استفاده از CSS Grid به‌جای float است؛ تفاوت در سرعت و مقیاس‌پذیری است.

پروتوتایپ و تعامل

پروتوتایپ، طراحی استاتیک را به یک تجربه قابل‌کلیک تبدیل می‌کند. در پروژه‌های واقعی، پروتوتایپ دو کاربرد اصلی دارد:

  1. تست با کاربر قبل از توسعه: کاربر واقعی روی طراحی کلیک می‌کند و بازخورد می‌دهد.
  2. ارائه به ذی‌نفعان: مدیر یا کارفرما می‌تواند طراحی را حس کند، نه فقط ببیند.

ساختار پروتوتایپ

پروتوتایپ ساده از دو جزء ساخته می‌شود:

  • Trigger: رویدادی که تعامل را فعال می‌کند — On Click، On Drag، Mouse Enter.
  • Action: کاری که انجام می‌شود — Navigate to، Open Overlay، Change to.

پروتوتایپ در سطح حرفه‌ای

در پروژه‌های بزرگ، پروتوتایپ‌ها با متغیر (Variable) و حالت (State) ساخته می‌شوند. مثال: فرمی که با هر مرحله، پیشرفت را نشان می‌دهد. راهنمای تفصیلی در آموزش پروتوتایپ در فیگما.

تحویل به توسعه‌دهنده

یکی از بزرگ‌ترین مزیت‌های فیگما، تحویل دقیق به تیم توسعه است. برای تحویل حرفه‌ای، سه کار انجام دهید:

کار اول: مستندات کنار طراحی

در کنار هر صفحه طراحی، یک مستند کوچک بگذارید:

  • رفتار واکنش‌گرا در هر بند شکست.
  • حالت‌های تعامل (Hover، Focus، Active).
  • متن‌های جایگزین و توضیحات دینامیک.

کار دوم: استفاده از Dev Mode

فیگما حالت Dev Mode دارد که کد CSS را به‌صورت خودکار برای هر عنصر تولید می‌کند. در پروژه‌های واقعی، این ویژگی زمان توسعه را قابل‌توجه کم می‌کند.

کار سوم: چک‌لیست قبل از تحویل

  1. همه لایه‌ها نام‌گذاری شده‌اند.
  2. همه رنگ‌ها و فونت‌ها استایل مرکزی دارند.
  3. همه کامپوننت‌ها در Component Page تعریف شده‌اند.
  4. هر صفحه، چهار حالت اصلی دارد: Default، Hover، Focus، Disabled.
  5. پروتوتایپ کل مسیر کاربر را پوشش می‌دهد.

مسیر همکاری تیم طراحی و توسعه در همکاری تیمی در فیگما آمده است.

اشتباهات رایج در شروع

  1. طراحی بدون ساختار: شروع بدون فریم و Section. سه ماه بعد فایل قابل نگهداری نیست.
  2. نداشتن Design System: رنگ و فونت پراکنده. تغییر در سراسر طراحی، دستی می‌شود.
  3. استفاده از Group به‌جای Frame: بزرگ‌ترین اشتباه مبتدیان. طراحی واکنش‌گرا از همان‌جا شکست می‌خورد.
  4. عدم استفاده از Auto Layout: طراحی استاتیک، در تغییرات می‌شکند.
  5. کامپوننت‌های بیش‌ازحد یا کم: نه هر عنصر را کامپوننت کنید، نه از آن غافل شوید.
  6. نداشتن حالت‌های تعاملی: طراحی بدون hover و focus، در توسعه دردسرساز می‌شود.
  7. نادیده گرفتن دسترس‌پذیری: کنتراست پایین، اندازه فونت کوچک، عدم توجه به keyboard navigation. راهنما در WCAG چیست.
  8. عدم تحویل درست: بدون مستندات، توسعه‌دهنده به تفسیر خودش تکیه می‌کند و نتیجه متفاوت می‌شود.

خط پایان

شروع طراحی در فیگما، سه گام اصلی دارد: آماده‌سازی درست، ساختار فایل حرفه‌ای، و تسلط بر کامپوننت و Auto Layout. توصیه عملی من: از همان پروژه اول، ساختار را جدی بگیرید، چون فایلی که با ساختار شروع می‌شود، سه ماه بعد هم قابل نگهداری است. اگر در پروژه فیگمای خود به بن‌بست خوردید یا سوالی درباره ساختار فایل دارید، در دیدگاه‌ها بنویسید. 🎨