اگر تازه وارد طراحی رابط کاربری شده‌اید و می‌خواهید بدون حفظ‌کردن همه منوهای Figma سریع وارد کار واقعی شوید، این آموزش برای همین نقطه شروع است. در ویدیوی اصلی، یک رابط ساده اپلیکیشن سفارش غذا را از صفر می‌سازیم تا هم محیط Figma را بشناسید و هم چند ابزار مهم را همان لحظه در یک پروژه واقعی استفاده کنید.
نسخه قدیمی این مقاله بیشتر فهرست مراحل ویدیو بود. در این نسخه همان پروژه و ویدیوی اصلی حفظ شده، اما مسیر یادگیری با ساختار فعلی Figma به‌روز شده است؛ از فایل و Frame تا Auto Layout، Component و Prototype.
در ۳۰ دقیقه چه چیزهایی یاد می‌گیرید؟
- Figma چیست و نسخه وب و دسکتاپ چه تفاوتی دارند
- ساخت فایل Design و آشنایی با Canvas، Layers و Properties
- ساخت Frame برای موبایل، تبلت و وب
- کار با Text، Shape، Image و SVG
- طراحی یک صفحه ساده Login و بخشی از اپ سفارش غذا
- مدیریت فاصله، Padding و Alignment
- آشنایی با Auto Layout برای Layoutهای منعطف
- ساخت Component برای اجزای تکرارشونده
- اتصال چند Frame با Prototype
- مسیر بعدی یادگیری Figma برای طراحی UI
ویدیوی آموزش Figma از صفر در ۳۰ دقیقه
نسخه منطبق این آموزش در آپارات پیدا نشد؛ بنابراین ویدیوی اصلی YouTube را همین‌جا قرار داده‌ایم. ممکن است بعضی جزئیات رابط در ویدیوی قدیمی‌تر با UI فعلی Figma فرق داشته باشد؛ متن مقاله با ساختار فعلی Figma به‌روزرسانی شده است.
Figma چیست و چرا برای شروع طراحی UI مناسب است؟
Figma یک ابزار طراحی و همکاری بصری است که برای طراحی رابط وب و اپلیکیشن، ساخت Component، Prototype و همکاری تیمی استفاده می‌شود. Figma عمدتا در مرورگر اجرا می‌شود و برای Windows و macOS هم برنامه دسکتاپ دارد. قابلیت‌های اصلی Design در نسخه وب و دسکتاپ بسیار نزدیک‌اند؛ نسخه دسکتاپ تجربه بومی‌تر و دسترسی مستقیم‌تر به Fontهای نصب‌شده سیستم می‌دهد.
برای شروع لازم نیست از روز اول همه قابلیت‌ها را یاد بگیرید. اگر بتوانید یک فایل بسازید، Frame ایجاد کنید، Text و Shape را کنترل کنید، Layout را منظم کنید و چند Screen را به هم وصل کنید، پایه‌ای دارید که بعدا Auto Layout، Components، Variables و Design System را روی آن اضافه کنید.
۱. یک Design File بسازید
بعد از ورود به Figma، یک Design File جدید بسازید. Canvas فضای اصلی کار شماست؛ Layers ساختار عناصر را نشان می‌دهد و Properties تنظیمات Object انتخاب‌شده را در اختیار شما می‌گذارد.
برای پروژه‌های آموزشی بهتر است از همان ابتدا Layerها و Frameها را نام‌گذاری کنید. نام‌هایی مثل Frame 123 یا Rectangle 45 در فایل بزرگ خیلی سریع دردسرساز می‌شوند.
۲. با Frame صفحه بسازید، نه با Rectangle
Frame یکی از پایه‌های اصلی Figma است و مثل Container برای طراحی عمل می‌کند. می‌تواند صفحه موبایل، وب‌سایت، Modal، Card یا حتی یک Button باشد. Frameها قابلیت‌هایی مثل Auto Layout، Constraints و Prototyping را هم در اختیار شما می‌گذارند.
برای فعال‌کردن Frame Tool می‌توانید F یا A را بزنید و بعد از Presetهای آماده یا اندازه دلخواه استفاده کنید.
۳. Text، Shape و Image را در پروژه واقعی تمرین کنید
به‌جای تمرین جداگانه هر ابزار، یک Screen واقعی بسازید. مثلا در پروژه سفارش غذا می‌توانید Logo، تصویر غذا، عنوان، قیمت، Button و Navigation را کنار هم قرار دهید. در همین مسیر با Fill، Stroke، Corner Radius، Shadow، Alignment و Layer order آشنا می‌شوید.
۴. برای Icon از SVG استفاده کنید
SVG برای بسیاری از Iconها انتخاب مناسبی است، چون Vector باقی می‌ماند و می‌توانید اندازه و رنگ آن را بدون افت کیفیت تغییر دهید. بهتر است Iconها را از منبع معتبر بگیرید و قبل از استفاده، Stroke/Fill و اندازه بصری آن‌ها را با Design System پروژه هماهنگ کنید.
۵. فاصله‌ها را دستی و تصادفی تنظیم نکنید
یکی از تفاوت‌های فایل آموزشی مرتب با فایل شلوغ، Consistency در Spacing است. از یک Spacing Scale ساده استفاده کنید و فاصله بین عناصر را براساس چند مقدار مشخص نگه دارید؛ مثلا 4، 8، 12، 16، 24 و 32.
برای Layoutهای تکرارشونده و Content-driven، Auto Layout انتخاب بهتری از جابه‌جایی دستی است.
۶. Auto Layout را خیلی زود یاد بگیرید
Auto Layout به Frame کمک می‌کند با تغییر Content یا اضافه و حذف‌شدن Childها خودش را تطبیق دهد. برای Button، List، Card و Layoutهای Responsive یکی از مهم‌ترین قابلیت‌های Figma است. با انتخاب Layerها و زدن Shift + A می‌توانید Auto Layout را اضافه کنید.
بعد از آن Direction، Gap، Padding، Alignment و Resizingهایی مثل Hug contents، Fill container و Fixed را یاد بگیرید. برای آموزش کامل‌تر، راهنمای Auto Layout در Figma را ببینید.
۷. اجزای تکراری را Component کنید
اگر Button، Card، Input یا Navigation item در چند Screen تکرار می‌شود، آن را Component کنید. Main Component منبع اصلی است و Instanceها نسخه‌های قابل‌استفاده آن هستند. این کار باعث می‌شود تغییرات بعدی منظم‌تر و قابل‌کنترل‌تر باشند.
ادامه این بخش را در آموزش Components در Figma یاد بگیرید.
۸. چند Screen را با Prototype به هم وصل کنید
بعد از طراحی چند Frame، بین آن‌ها Interaction بسازید تا Flow قابل کلیک شود. Prototype کمک می‌کند قبل از Development مسیر کاربر را ببینید و مشکلات Navigation یا Interaction را زودتر پیدا کنید.
برای شروع کافی است Trigger و Action را بشناسید، چند Screen را با Navigate to به هم وصل کنید و نتیجه را در Presentation View تست کنید. آموزش کامل Prototype در Figma این بخش را عمیق‌تر توضیح می‌دهد.
۹. روی موبایل طراحی نکنید؛ Prototype را تست کنید
برای طراحی جدی Figma Design، نسخه وب یا دسکتاپ انتخاب اصلی است. نسخه موبایل بیشتر برای مشاهده فایل، Comment و بررسی Prototype مناسب است. بنابراین اگر تازه شروع کرده‌اید، تمرکزتان را روی Desktop/Web بگذارید و Mobile را برای Preview و Review استفاده کنید.
۱۰. بعد از این ۳۰ دقیقه چه چیزی را یاد بگیرید؟
این آموزش قرار نیست شما را در ۳۰ دقیقه «طراح حرفه‌ای» کند؛ هدفش این است که اصطکاک شروع را از بین ببرد و به شما یک تصویر عملی از Figma بدهد. مسیر منطقی بعدی:
برای طراحی UI فقط Figma کافی نیست
Figma ابزار اجرای طراحی است. برای طراحی رابط حرفه‌ای باید در کنار ابزار، Layout، Typography، Color، Responsive Design، Component design و اصول UX را هم یاد بگیرید. اگر هدفتان ورود جدی به بازار کار است، ابزار و اصول طراحی باید همزمان جلو بروند.
جمع‌بندی
برای شروع Figma لازم نیست صدها ابزار و میانبر حفظ کنید. یک فایل بسازید، یک Frame واقعی طراحی کنید، Text و Image را مدیریت کنید، Spacing را منظم کنید، Auto Layout و Component را روی همان پروژه تمرین کنید و در آخر چند Screen را با Prototype به هم وصل کنید. همین چرخه کوتاه، پایه بسیار بهتری از یادگیری منوها به‌صورت حفظی می‌سازد.
