Constraints در Figma مشخص می‌کنند Child Layer هنگام تغییر اندازه Parent Frame چه رفتاری داشته باشد. مثلا یک Button می‌تواند همیشه به گوشه پایین راست بچسبد، یک Sidebar می‌تواند ارتفاعش همراه Frame تغییر کند یا یک Image با نسبت مشخص نسبت به Parent Scale شود.
نسخه قدیمی این درس علاوه بر Constraints چند موضوع دیگر مثل Prototype، Inspect و Boolean Operations را هم مرور می‌کرد. در نسخه جدید، Intent اصلی مقاله روی Constraints و Responsive Design متمرکز شده، اما موضوعات مفید ویدیوی اصلی در بخش مرتبط حفظ شده‌اند.
در این آموزش چه چیزهایی یاد می‌گیرید؟
- Constraints در Figma چیست و چه زمانی کاربرد دارد
- Horizontal و Vertical Constraints چه گزینه‌هایی دارند
- Left، Right، Left & Right، Center و Scale چگونه کار می‌کنند
- Top، Bottom، Top & Bottom، Center و Scale چه تفاوتی دارند
- چطور یک Header، Sidebar و Button ریسپانسیو بسازیم
- Constraints با Layout Guides چگونه ترکیب می‌شود
- Constraints و Auto Layout چه تفاوتی دارند
- چه Layerهایی اصلا نمی‌توانند Constraints معمولی داشته باشند
- اشتباهات رایج در Responsive Design با Constraints
ویدیوی آموزش Constraints و Responsive Design
نسخه منطبق این آموزش در آپارات پیدا نشد؛ بنابراین ویدیوی اصلی YouTube را حفظ کرده‌ایم. بخشی از رابط Figma در ویدیو قدیمی‌تر است، اما متن مقاله با رفتار فعلی Constraints به‌روزرسانی شده است.
Constraints در Figma چیست؟
Constraints رابطه Position و Size یک Child Layer را با Parent Frame هنگام Resize مشخص می‌کند. Figma به‌صورت پیش‌فرض Child را روی Left و Top قرار می‌دهد؛ یعنی فاصله آن از لبه چپ و بالا ثابت می‌ماند.
Constraints فقط وقتی معنا دارد که Layer داخل یک Parent Frame باشد. Top-level Layer روی Canvas Parent مناسبی برای Constraint ندارد.
Horizontal Constraints
Left
فاصله Layer از لبه چپ Parent ثابت می‌ماند. برای Logo یا عنصر سمت چپ Header مثال خوبی است.
Right
فاصله از لبه راست ثابت می‌ماند. برای Button یا Iconی که باید همیشه سمت راست Frame بماند مناسب است.
Left and Right
فاصله از هر دو لبه حفظ می‌شود؛ بنابراین Width Layer همراه Parent می‌تواند بزرگ یا کوچک شود. برای Search Field یا Sectionهایی که باید Stretch شوند کاربرد دارد.
Center
موقعیت Layer نسبت به مرکز افقی Parent حفظ می‌شود. برای عنصرهایی که باید هنگام Resize در Center بمانند استفاده می‌شود.
Scale
Size و Position Layer به‌صورت نسبتی از Dimension Parent حفظ می‌شود. مثلا اگر Layer 70٪ Width Parent باشد، با دو برابر شدن Parent تقریبا همان نسبت را نگه می‌دارد. Scale برای بعضی Artworkها مفید است، اما برای بسیاری از UI Componentها Auto Layout یا Constraints لبه‌ای کنترل بهتری می‌دهند.
Vertical Constraints
در Axis عمودی گزینه‌ها مشابه‌اند: Top، Bottom، Top and Bottom، Center و Scale. مثلا Bottom برای Bottom Navigation و Top & Bottom برای Sidebarی که باید با Height صفحه Stretch شود کاربرد دارد.
مثال عملی: Header ریسپانسیو
- Logo را داخل Header Frame قرار دهید و Horizontal Constraint را Left بگذارید.
- Action Button سمت راست را روی Right قرار دهید.
- اگر Search Field وسط باید کشیده شود، بسته به ساختار از Left & Right یا Auto Layout استفاده کنید.
- Header Frame را Resize کنید و رفتار هر Child را بررسی کنید.
- Widthهای Desktop، Tablet و Mobile را تست کنید؛ Constraints جایگزین طراحی Breakpoint نیست، فقط رفتار Resize را کنترل می‌کند.
مثال عملی: Sidebar
اگر Sidebar باید از بالا تا پایین Frame کشیده شود، Horizontal Constraint می‌تواند Left و Vertical Constraint روی Top & Bottom باشد. با تغییر Height Parent، Sidebar Height خودش را تطبیق می‌دهد و فاصله بالا و پایین حفظ می‌شود.
Constraints و Layout Guides
Layout Guides به Alignment و ساختار Grid کمک می‌کنند و Constraints رفتار Layer را هنگام Resize تعریف می‌کنند. Figma این دو را می‌تواند با هم ترکیب کند. توجه کنید که اصطلاح قدیمی Layout Grid از سال 2025 در مستندات Figma به Layout Guide تغییر نام داده و با Grid Flow در Auto Layout متفاوت است.
وقتی Layout Guide Stretch می‌شود، رابطه Layer با Guide و Constraint می‌تواند رفتار Responsive دقیق‌تری ایجاد کند.
Constraints یا Auto Layout؟
این دو ابزار برای مسئله‌های متفاوت‌اند. Constraints برای Child داخل Frame معمولی مشخص می‌کند هنگام Resize نسبت به Parent چه اتفاقی بیفتد. Auto Layout Flow، Spacing و Resizing بین Parent/Childها را مدیریت می‌کند.
- Constraints: anchoring، stretch، center یا scale در Frame معمولی
- Auto Layout: ترتیب، Gap، Padding، Hug، Fill، Wrap و Grid
طبق رفتار فعلی Figma، Constraints معمولی را نمی‌توان به Child داخل Auto Layout Frame به همان شکل اعمال کرد. برای Layout پیچیده ممکن است Frameهای Nested داشته باشید که بعضی بخش‌ها Auto Layout و بعضی بخش‌ها Constraints باشند.
Constraints روی چه Layerهایی محدودیت دارد؟
- Layer باید داخل Parent Frame باشد.
- Top-level Object روی Canvas Constraint قابل‌استفاده ندارد.
- Group یک Bound مستقل مثل Frame ندارد؛ Figma Constraint را روی Layerهای داخل Group اعمال می‌کند.
- Child داخل Auto Layout Frame از سیستم Resizing Auto Layout استفاده می‌کند، نه Constraints معمولی.
اشتباهات رایج در Responsive Design با Constraints
- استفاده از Scale برای همه چیز: Text و UI Controlها معمولا نباید صرفا Scale شوند.
- توقع Reflow: Constraints Itemها را به Row بعدی نمی‌برد؛ برای این کار Auto Layout Wrap مناسب است.
- تست نکردن Widthهای extreme: Resize را فقط چند پیکسل امتحان نکنید.
- نادیده گرفتن Content: متن طولانی می‌تواند Layout را خراب کند حتی اگر Constraint درست باشد.
- استفاده از Group به‌جای Frame: برای Responsive behavior معمولا Frame ساختار قابل‌کنترل‌تری است.
موضوعات مرتبطی که در ویدیوی اصلی می‌بینید
ویدیوی قدیمی این قسمت فقط Constraints نبود و به Prototype، Inspect و Boolean Operations هم اشاره می‌کرد. این بخش‌ها حذف نشده‌اند؛ برای جلوگیری از پراکندگی Intent به آموزش‌های مرتبط هدایت شده‌اند:
- آموزش Prototype در Figma
- آموزش Shapes، Boolean و Mask در Figma
- برای Inspect/Developer handoff از قابلیت‌های Dev Mode و Inspect فعلی Figma استفاده کنید؛ UI آن نسبت به ویدیوی قدیمی تغییر کرده است.
جمع‌بندی
Constraints مشخص می‌کند Child هنگام Resize Parent به کدام لبه متصل بماند، Stretch شود، Center بماند یا Scale شود. برای Flowهای مدرن و Content-driven، Auto Layout مکمل مهم Constraints است و انتخاب بین آن‌ها باید براساس مسئله Layout انجام شود.
- پیش‌نیاز/مرتبط: Auto Layout
- ادامه: Prototype در Figma
- همه آموزش‌ها: Figma در LearnUIX
