شروع با Figma: frames و layout
workspace، grids و auto layout.
قدم اول: workspace و ساخت فایل
Figma را در مرورگر (figma.com) یا اپلیکیشن دسکتاپ باز کنید. اگر تازهکار هستید، نسخه رایگان برای یادگیری کاملاً کافی است. از منوی اصلی گزینه New design file را انتخاب کنید تا یک فایل خالی با canvas بینهایت بسازید. این canvas مثل یک میز کار بزرگ است که میتوانید هر تعداد frame و المان روی آن قرار دهید.
نوار ابزار سمت چپ شامل ابزارهای اصلی است: Move (V) برای جابهجایی، Frame (F) برای ساخت قاب، Rectangle (R) برای مستطیل، Text (T) برای متن و غیره. پنل Properties در سمت راست با انتخاب هر المان تغییر میکند و تنظیمات دقیق fill، stroke، typography و spacing را نشان میدهد. پنل Layers هم در سمت چپ hierarchy تمام لایهها را نمایش میدهد.
برای ساخت اولین frame، کلید F را بزنید یا از presets دستگاه (مثل iPhone 15، Desktop 1440) استفاده کنید. Frame نقش artboard را دارد: محتوای داخل آن clip میشود و مرز export را مشخص میکند. بدون frame، طراحی شما روی canvas پراکنده میماند و handoff به توسعهدهنده سختتر میشود.
از همان ابتدا لایهها را rename کنید: در پنل Layers روی نام دوبار کلیک کنید و نامهای معنادار بگذارید (مثلاً Header، Card_Stats، Button_Primary). organization درست از روز اول باعث میشود فایلهای بزرگ قابل مدیریت بمانند و تیم هم سریعتر روی design file کار کند.
یک عادت مفید: قبل از شروع طراحی واقعی، یک frame با نام Cover یا README بسازید و brief پروژه، breakpointها و لینکهای مرجع را در آن بنویسید. این کار بعداً وقتی چند هفته به فایل برمیگردید، context را سریع برمیگرداند.
قدم دوم: shapes، text و constraints
با ابزار Rectangle (R) شکلهای پایه بسازید. در پنل Design میتوانید fill color، stroke، stroke weight و corner radius را تنظیم کنید. برای دکمههای مدرن معمولاً radius بین ۶ تا ۱۲ پیکسل مناسب است. opacity و blend mode هم برای overlay و shadow لایهای کاربرد دارند.
با ابزار Text (T) متن اضافه کنید. font family، size، weight، line height و letter spacing را از پنل Text تنظیم کنید. Figma به Google Fonts و فونتهای سیستمی دسترسی دارد. برای body text معمولاً line height حدود ۱.۵ و برای heading کمی کمتر (۱.۲ تا ۱.۳) خوانایی بهتری میدهد.
وقتی یک object داخل frame قرار میگیرد، Constraints تعیین میکنند با resize شدن frame چه اتفاقی بیفتد: left/right/top/bottom/center/scale. frame را بکشید و ببینید المان چطور رفتار میکند. برای layoutهای responsive، ترکیب constraints با Auto Layout (در قدم بعد) ضروری است.
تفاوت Group و Frame را بدانید: Group فقط المانها را bundle میکند؛ Frame علاوه بر آن clip content، grid و Auto Layout را پشتیبانی میکند. در طراحی UI تقریباً همیشه Frame را ترجیح دهید. اگر accidentally گروه ساختید، Right-click > Frame selection کنید.
از ابزارهای Align در toolbar بالا استفاده کنید: Align horizontal centers، Distribute horizontal spacing و غیره. برای spacing دقیق، المانها را select کنید و از پنل Design مقدار gap را عددی وارد کنید. عادت به alignment از ابتدا جلوی design drift را میگیرد.
قدم سوم: Layout Grid و Column Grid
frame مورد نظر را select کنید. در پنل Design بخش Layout Grid را پیدا کنید و با کلیک روی + یک grid اضافه کنید. برای layout موبایل، Column grid با ۱۲ ستون، margin ۱۶ تا ۲۴ و gutter ۱۶ از conventionهای رایج است. Desktop ممکن است ۱۲ ستون با margin ۸۰ و gutter ۲۴ بخواهد.
نوع grid را بسته به نیاز انتخاب کنید: Columns برای layout صفحه، Rows برای rhythm عمودی، Grid (مربع) برای icon system و pixel-perfect UI. رنگ و opacity خطوط grid را کم کنید (مثلاً ۱۰٪) تا حین طراحی مزاحم نباشند ولی همچنان راهنما باشند.
المانها را به grid snap کنید: متن، دکمه و card باید روی ستونها align شوند نه arbitrary pixel. سیستم 8pt grid یعنی spacing و sizing مضرب ۸ (یا ۴ برای fine-tune) باشد — padding 16، gap 24، icon 24×24. این consistency در کل product حس حرفهای ایجاد میکند.
برای layoutهای typography-heavy میتوانید Baseline grid فعال کنید تا خطوط متن روی یک rhythm عمودی بنشینند. این برای landing page و editorial UI مفید است؛ برای app معمولی Column grid کافی است.
تمرین: یک frame موبایل ۳۹۳×۸۵۲ بسازید، grid ۱۲ ستون با margin 16 تنظیم کنید و یک header با logo چپ و avatar راست طراحی کنید. مطمئن شوید هر دو المان روی grid line قرار گرفتهاند.
قدم چهارم: Auto Layout fundamentals
چند المان (مثلاً icon + label) را select کنید و Shift+A بزنید — Auto Layout frame ساخته میشود. Direction را horizontal یا vertical تنظیم کنید. Gap بین itemها spacing ثابت نگه میدارد حتی وقتی محتوا عوض شود.
Padding داخل frame فاصله محتوا از لبه را کنترل میکند. Alignment (center، start، end) موقعیت itemها در محور عمود بر direction را مشخص میکند. Resizing behavior مهم است: Hug contents یعنی frame به اندازه محتوا؛ Fill container یعنی در parent فضا را پر کند.
Auto Layout را nest کنید: یک row از columnها — مثلاً card افقی با icon چپ و column متن راست. دکمه کلاسیک = Auto Layout horizontal، padding افقی ۱۶، padding عمودی ۱۰، text با Hug. وقتی label دکمه طولانیتر شود، دکمه خودش grow میکند.
Min width، max width، min height و max height برای دکمهها و inputها responsive behavior بهتری میدهد. مثلاً دکمه min-width 120 و max-width 100% parent. Fixed width فقط وقتی که واقعاً لازم است.
Absolute position داخل Auto Layout برای badge روی icon یا overlay مفید است: item را select کنید و در پنل layout گزینه absolute positioning را فعال کنید. constraints absolute item نسبت به parent frame تنظیم میشود.
قدم پنجم: components اولیه
یک دکمه طراحی کنید: Auto Layout horizontal، fill رنگ brand، text سفید، radius 8، padding مناسب. المان را select کنید و Create component (Ctrl+Alt+K در Windows) بزنید. component اصلی purple diamond در Layers نشان داده میشود.
Instance از component بسازید: Alt+Drag component یا Copy/Paste. instance با diamond بنفش مشخص است. روی instance میتوانید text override کنید بدون اینکه main component عوض شود. تغییر main component به همه instanceها propagate میشود — قدرت design system از همین جا شروع میشود.
برای variantها (Size: sm/md/lg، State: default/hover/disabled) Combine as variants را بعداً یاد میگیرید. فعلاً یک component ساده کافی است. property panel variant در سطح پیشرفتهتر کنترل state را آسان میکند.
صفحه یا frame جدا با نام Components بسازید و همه componentهای پایه (Button، Input، Badge) را آنجا organize کنید. design file تمیز = onboarding سریعتر برای teammate جدید.
Naming convention: Component/Button/Primary، Component/Input/Default. slash hierarchy در Figma group mental و search را راحتتر میکند.
قدم ششم: export و share
برای export: layer یا frame را select کنید. در پنل Design پایین بخش Export + بزنید و format (PNG، SVG، PDF) و scale (1x، 2x، 3x) را انتخاب کنید. icon و illustration معمولاً SVG؛ screenshot UI برای portfolio PNG 2x.
Share: گوشه بالا راست Share > Copy link. دسترسی view یا edit بدهید. Comments روی canvas برای feedback تیم — روی نقطه کلیک کنید و @mention teammate. Version history هم تغییرات را track میکند.
تب Prototype برای link بین frameهاست. در این آموزش مقدماتی فقط بدانید که connection از یک element به frame دیگر drag میشود. در tutorial طراحی mobile prototype کامل میسازیم.
تمرین پایانی: یک section با header + سه card عمودی با Auto Layout بسازید. grid رعایت کنید، دکمه component بسازید و یک export PNG بگیرید. این exercise پایه tutorial بعدی است.
اگر stuck شدید، Community Figma فایلهای نمونه رایگان دارد — duplicate کنید و layer structure را reverse-engineer کنید. یادگیری از فایل واقعی سریعتر از tutorial خالی است.
سوالات متداول
Frame یا Section؟
Frame واحد design و export است — محتوا clip میشود و برای dev handoff استفاده میشود. Section فقط label سازماندهی روی canvas بزرگ است و export unit نیست. برای screen واقعی همیشه Frame بسازید.
Auto Layout چرا essential است؟
Design responsive و maintainable میسازد. تغییر طول copy یا اضافه شدن item layout را خودکار adjust میکند. handoff به dev با spacing و behavior واضحتر انجام میشود و refactor در Figma کمتر دردسر دارد.
8pt grid اجباری است؟
Convention صنعت است نه قانون سخت. spacing مضرب ۸ (یا ۴ برای جزئیات) rhythm بصری یکدست ایجاد میکند. loosely follow کنید — گاهی ۲۰ یا ۱۲ پیکسل برای balance بصری بهتر از rigid ۱۶ است.
Free Figma کافی است؟
بله برای learning و پروژه solo. محدودیت اصلی تعداد فایل و version history در plan رایگان است. team libraries، permissions پیشرفته و Dev Mode کامل در paid plans هستند.