Constraints in Figma are layout rules that define how a child layer should respond when its parent frame is resized. They are especially useful for designing interfaces that need to maintain predictable positions, sizes, and relationships across different screen sizes.
Constraints can control the horizontal and vertical behavior of layers. Common options include Left, Right, Left and Right, Center, Scale, Top, Bottom, and Top and Bottom. They are particularly useful for elements such as navigation items, floating buttons, sidebars, images, cards, and controls that need to remain anchored to a specific area of a parent frame.
In modern Figma workflows, constraints are often used together with Frames, Auto Layout, components, variants, layout guides, and responsive design techniques. Constraints are most directly applicable to child layers inside regular frames; children in Auto Layout generally use Auto Layout resizing behavior unless they are configured to ignore the Auto Layout flow.
Learn more with JustAcademy Figma Training and Register for Figma Course Demo.
Constraints are rules that tell Figma how a child layer should behave when the parent frame changes size.
For example, a button positioned at the bottom-right of a screen can use Right and Bottom constraints so that it remains anchored to that corner when the screen becomes larger.
A constraint is a rule that defines the relationship between a child layer and its parent frame during resizing.
Responsive design requires layouts to behave appropriately when the available space changes. Constraints help define how individual layers respond to parent-frame resizing.
For example, a logo may remain attached to the left side while a floating action button remains attached to the bottom-right side.
Constraints depend on a parent-child relationship. The parent frame provides the reference area, while the child layer follows the selected constraint rules.
Parent Frame
├── Header
├── Logo
├── Content
└── Floating Button
A parent frame is the container that holds one or more child layers. Constraints determine how those child layers react when the parent frame changes dimensions.
A child layer is an object placed inside a parent frame. It can be a text layer, image, shape, button, component, nested frame, or other supported layer.
Parent Frame Resizes
↓
Figma Checks Constraint
↓
Child Layer Responds
↓
Position and/or Size Changes
When a suitable child layer is selected inside a regular parent frame, the Constraints controls appear in the Position section of Figma's right sidebar.
By default, a child layer commonly uses Top and Left constraints. This means the layer maintains its relationship with the top-left area of its parent frame when the parent is resized.
Figma constraints work across two primary axes:
Horizontal constraints determine how a layer behaves when the parent frame changes width.
Vertical constraints determine how a layer behaves when the parent frame changes height.
| Constraint | Axis | Typical Purpose |
|---|---|---|
| Left | Horizontal | Keep layer attached to the left side. |
| Right | Horizontal | Keep layer attached to the right side. |
| Left and Right | Horizontal | Allow width to respond to parent width. |
| Center | Horizontal/Vertical | Keep layer centered relative to the parent. |
| Scale | Horizontal/Vertical | Maintain proportional position and size behavior. |
| Top | Vertical | Keep layer attached to the top. |
| Bottom | Vertical | Keep layer attached to the bottom. |
| Top and Bottom | Vertical | Allow vertical behavior to respond to parent height. |
The Left constraint maintains the layer's position relative to the left side of the parent frame.
Parent Frame
┌───────────────────────────────┐
│ ● │
│ │
│ │
└───────────────────────────────┘
↑
Left
A logo placed near the left side of a header can use a Left constraint when it should maintain its distance from the left edge while the header becomes wider.
The Right constraint maintains the layer's relationship with the right side of its parent frame.
Parent Frame
┌───────────────────────────────┐
│ ● │
│ │
│ │
└───────────────────────────────┘
↑
Right
A profile icon, settings button, or floating action button can use a Right constraint when it should remain attached to the right edge.
Left and Right constraints define the layer's relationship with both horizontal edges of the parent frame. Depending on the layer and its initial geometry, this can allow its width to grow or shrink as the parent changes width.
Small Parent
┌─────────────────────────┐
│ ┌─────────────────────┐ │
│ │ Content │ │
│ └─────────────────────┘ │
└─────────────────────────┘
Large Parent
┌─────────────────────────────────┐
│ ┌─────────────────────────────┐ │
│ │ Content │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────┘
The Center constraint maintains a layer's position relative to the center of the parent frame.
A play icon positioned in the center of a video thumbnail can use center constraints so that it remains centered when the thumbnail frame changes size.
Video Frame
┌──────────────────────────────┐
│ │
│ ▶ │
│ │
└──────────────────────────────┘
↑
Center
The Scale constraint allows the layer's position and size to respond proportionally as the parent frame changes.
Scale can be useful for designs where an element should maintain a proportional relationship with the parent rather than simply staying attached to one edge.
The Top constraint maintains a layer's relationship with the top edge of the parent frame.
A heading positioned near the top of a regular frame can use the Top constraint so that it maintains its relationship with the top edge during vertical resizing.
The Bottom constraint maintains a layer's relationship with the bottom edge of the parent frame.
A floating action button near the bottom of a mobile screen can use Bottom along with Right to remain anchored to the lower-right corner.
Top and Bottom constraints define the layer's relationship with both vertical edges of the parent frame. This can allow the layer to stretch vertically when the parent changes height.
Small Frame
┌────────────────────┐
│ ┌────────────────┐ │
│ │ │ │
│ │ Sidebar │ │
│ │ │ │
│ └────────────────┘ │
└────────────────────┘
Large Frame
┌────────────────────┐
│ ┌────────────────┐ │
│ │ │ │
│ │ │ │
│ │ Sidebar │ │
│ │ │ │
│ │ │ │
│ └────────────────┘ │
└────────────────────┘
A layer can be centered vertically relative to its parent. This is useful for icons, controls, and content that should remain vertically centered while the parent changes height.
A layer can be centered horizontally relative to its parent. This is useful for hero illustrations, video controls, logos, and centered content.
Figma allows horizontal and vertical constraint behavior to be configured independently. This means a layer can use Right horizontally and Bottom vertically, for example.
Horizontal → Right
Vertical → Bottom
Result → Bottom-right positioning
Parent Frame
┌──────────────────────────────┐
│ │
│ Content │
│ │
│ ┌────┐ │
│ │ + │ │
│ └────┘ │
└──────────────────────────────┘
↑
Right + Bottom
A button positioned at the bottom-left can use Left horizontally and Bottom vertically.
Horizontal → Left
Vertical → Bottom
A close button inside a regular modal frame can use Right horizontally and Top vertically.
Horizontal → Right
Vertical → Top
A play button inside a video thumbnail can use Center horizontally and Center vertically.
Horizontal → Center
Vertical → Center
A logo inside a regular header frame can use Left and Top constraints when it needs to remain aligned with the upper-left region.
A profile icon or account action can use Right and Center constraints to remain near the right edge while staying vertically centered.
A sidebar that should remain attached to the left side and stretch vertically can use Left horizontally and Top and Bottom vertically.
Sidebar
Horizontal → Left
Vertical → Top + Bottom
Parent Frame
┌───────┬──────────────────────┐
│ │ │
│ Side │ Content │
│ bar │ │
│ │ │
│ │ │
└───────┴──────────────────────┘
↑ ↑
Left Top + Bottom
A floating action button is a classic constraint example. Right and Bottom constraints keep it anchored to the lower-right corner of its parent.
A close icon positioned in the upper-right corner of a modal can use Right and Top constraints.
A play button positioned in the center of a video thumbnail can use Center constraints on both axes.
Images can use constraints depending on how they should behave when the parent frame changes. For example, an image can remain anchored to one side or scale proportionally with the parent.
A card nested inside a regular frame can use Left and Right constraints when it needs to expand horizontally with the parent while maintaining its side relationships.
Text layers can use constraints when their position needs to remain related to the edges or center of a regular parent frame.
Navigation controls can use constraints to maintain specific positions within a regular header frame.
Constraints are closely related to Frames because the parent frame provides the reference area against which the child layer's position and size behavior are calculated.
A top-level layer sitting directly on the canvas does not have a parent frame to use as a constraint reference. A suitable child layer inside a parent frame is required.
Groups are not treated as independent constraint containers in the same way as frames. For predictable constraint behavior, using frames as layout containers is generally more appropriate.
A frame can be nested inside another frame and can itself contain constrained child layers. This allows designers to create multiple levels of layout behavior.
Main Frame
└── Header Frame
├── Logo
├── Navigation
└── Profile Button
Nested frames can each have their own children and resizing relationships. This makes complex interfaces easier to organize and maintain.
| Fixed Position | Constraints |
|---|---|
| Relies mainly on a fixed canvas position. | Defines a relationship with the parent. |
| May not adapt well to resizing. | Responds to parent-frame resizing. |
| Useful for static compositions. | Useful for responsive layouts. |
| More manual adjustments may be required. | Can automate positioning behavior. |
| Constraints | Auto Layout |
|---|---|
| Controls parent-relative behavior. | Controls content flow and layout. |
| Useful inside regular frames. | Used on Auto Layout frames and their children. |
| Controls position and proportional resizing behavior. | Controls spacing, padding, alignment, and resizing. |
| Useful for anchored elements. | Useful for dynamic content structures. |
Constraints and Auto Layout can work together, but their roles are different. Auto Layout manages the flow and resizing of objects inside an Auto Layout structure. A child object normally cannot use ordinary constraints unless it is configured to ignore the Auto Layout flow.
Figma provides an Ignore Auto Layout option for objects that should remain inside an Auto Layout frame but should not participate in its normal flow. Such an object can then use constraint-style positioning relative to its parent.
Auto Layout Frame
├── Header
├── Content
├── Footer
└── Floating Button
↓
Ignore Auto Layout
↓
Right + Bottom positioning
Constraints become especially useful when the parent frame is resized. The selected constraint determines which edge, center, or proportional relationship the child maintains.
Before
┌──────────────────────┐
│ ● │
└──────────────────────┘
After Resize
┌────────────────────────────────┐
│ ● │
└────────────────────────────────┘
Right constraint maintains the right-side relationship.
The same constraint can produce different visual results depending on the initial position and size of the layer. Designers should resize the parent frame and verify the actual behavior instead of assuming the result from the constraint name alone.
When a layer is attached to both left and right sides of a regular parent frame, its width can respond to changes in the parent's width while preserving its relationships with both edges.
When a layer is attached to both top and bottom sides of a regular parent frame, its height can respond to changes in the parent's height while maintaining those edge relationships.
Scale is useful when an element should preserve proportional relationships as the parent changes size. It affects both position and size proportionally.
Constraints define positioning and resizing relationships, while image or object aspect-ratio requirements should be considered separately. A constraint alone does not automatically solve every image-cropping or aspect-ratio requirement.
Layout guides provide visual alignment references, while constraints define how objects respond to parent resizing. Combining them can create more structured and predictable layouts.
Column guides can help align cards, content areas, navigation, and other objects. Constraints can then define how those objects respond when the parent frame changes.
A stretch layout guide can adapt to the size of the parent frame. Constraints can then operate in relation to the guide's columns or rows.
A fixed layout guide uses defined rows or columns. Constraints continue to reference the parent frame rather than treating the fixed guide as the parent.
Constraints can complement grid-based design by maintaining the relationship between objects and the overall frame while layout guides provide visual alignment.
Header
├── Logo
│ └── Left + Center
├── Navigation
│ └── Center
└── Account
└── Right + Center
Dashboard
├── Sidebar
│ └── Left + Top/Bottom
├── Main Content
│ └── Left + Right
└── Floating Action
└── Right + Bottom
Modal
├── Title
│ └── Top + Left
├── Content
│ └── Left + Right
└── Close
└── Top + Right
Video Card
├── Thumbnail
│ └── Left + Right
└── Play Icon
└── Center + Center
A login screen can use constraints for decorative elements or anchored controls inside a regular frame, while Auto Layout can be used for the actual form fields and content structure.
A landing page can combine layout guides, constraints, frames, and Auto Layout. Constraints can control decorative or anchored elements while Auto Layout handles content-driven sections.
Components can contain frames and layers with appropriate layout behavior. Constraints can be useful when a component includes an element that needs a specific relationship with its parent frame.
When working with component instances, designers should understand which properties are inherited from the main component and which properties can be adjusted at the instance level.
Variants should be used when there is a meaningful alternative state or structure. Constraints should not be replaced with unnecessary variants simply to handle ordinary resizing behavior.
Creating separate variants for every small width change can make a design system difficult to maintain. Use constraints and Auto Layout for normal resizing behavior and variants for meaningful structural differences.
Constraints can help standardize the behavior of reusable components. A design system should clearly document which elements are edge-aligned, centered, stretched, or proportionally scaled.
Important constraint behavior should be documented for designers and developers. Documentation can include the parent frame, edge relationships, resizing behavior, and exceptions.
Use clear frame and layer names so that the intended constraint relationship is easy to understand.
Header / Logo
Header / Navigation
Header / Profile
Screen / Floating Action
Modal / Close Button
Sidebar / Navigation
Create Parent Frame
↓
Add Child Layer
↓
Select Child Layer
↓
Open Constraints
↓
Set Horizontal Constraint
↓
Set Vertical Constraint
↓
Resize Parent
↓
Observe Behavior
↓
Adjust Constraint
↓
Test Multiple Sizes
Always test constraints by resizing the parent frame. A constraint should be evaluated based on actual behavior rather than only on the selected setting.
Resize the parent to a smaller dimension and check whether elements overlap, become too small, or move unexpectedly.
Resize the parent to a larger dimension and check whether anchored elements maintain their intended relationships and whether stretched elements become excessively large.
Intermediate widths are important because layout problems can appear between standard desktop, tablet, and mobile dimensions.
Constraints primarily control positional and resizing relationships. Content behavior should also be tested, especially when constraints are combined with Auto Layout or text layers.
When multiple frames are nested, resize different parent levels to understand how each layer responds.
Unexpected Behavior
↓
Check Parent Frame
↓
Check Child Layer
↓
Check Horizontal Constraint
↓
Check Vertical Constraint
↓
Check Layer Position
↓
Check Auto Layout
↓
Resize Parent Again
↓
Problem Solved
Constraints are not a replacement for Auto Layout. Use constraints for parent-relative positioning and resizing behavior, while Auto Layout is generally better for content-driven structures.
Constraints are based on the parent-child relationship. If the layer is placed inside the wrong frame, the constraint behavior may not match the intended design.
A constraint should always be tested by changing the parent frame's dimensions. Static inspection alone is not enough.
Scale can be useful for proportional behavior, but it should not be used automatically. Edge constraints or Auto Layout may provide more appropriate behavior depending on the interface.
A constraint can control a layer's relationship to its parent, but it does not automatically make every text box or content structure responsive. Text resizing and Auto Layout may also be required.
| Requirement | Recommended Approach |
|---|---|
| Stay attached to left | Left constraint |
| Stay attached to right | Right constraint |
| Stay attached to top | Top constraint |
| Stay attached to bottom | Bottom constraint |
| Stay centered | Center constraint |
| Stretch horizontally | Left + Right |
| Stretch vertically | Top + Bottom |
| Maintain proportional behavior | Scale |
| Dynamic content flow | Auto Layout |
Responsive Frames can use several Figma features together. Constraints are one part of the responsive layout system and are particularly useful for controlling the behavior of child layers inside regular frames.
Constraints can support responsive behavior within a layout, while adaptive design may use separate layout states for different screen categories. A designer can use constraints inside each adaptive layout state to control individual elements.
Mobile interfaces frequently use constraints for floating buttons, centered icons, bottom navigation elements, and other anchored controls.
Tablet layouts can use constraints to preserve relationships while the available width and height vary across devices.
Desktop interfaces can use constraints for sidebars, content panels, floating controls, header actions, and other parent-relative elements.
Constraints can help designers model how UI elements should respond when a website frame changes size. They are particularly useful when communicating layout behavior to developers.
Mobile application screens often contain controls that need to remain attached to specific edges or centered within containers. Constraints can help model these relationships.
Create a login screen using a regular frame and apply constraints to key elements.
Login Screen
├── Logo
│ └── Top + Center
├── Login Card
│ └── Center + Center
└── Help Button
└── Right + Bottom
Create a dashboard with a sidebar, main content area, and floating action button.
Dashboard
├── Sidebar
│ └── Left + Top/Bottom
├── Main Content
│ └── Left + Right
└── Action Button
└── Right + Bottom
Create a video player with a responsive thumbnail and centered play button.
Video Player
├── Video Frame
│ └── Left + Right
└── Play Button
└── Center + Center
Create a modal with a close icon in the top-right corner, a content area, and an action area.
Modal
├── Close
│ └── Right + Top
├── Content
│ └── Left + Right
└── Actions
└── Left + Right
Create a desktop sidebar that maintains its left position and stretches vertically with its parent frame.
Sidebar
Horizontal → Left
Vertical → Top + Bottom
Create a floating action button that remains in the bottom-right corner of a mobile application screen.
Create a play button that stays centered regardless of changes to the video frame dimensions.
Constraints are valuable during developer handoff because they communicate intended relationships between interface elements and their containers.
Designers should document important behavior such as whether an element is left-aligned, right-aligned, centered, stretched, or proportionally scaled.
| Element | Horizontal | Vertical | Purpose |
|---|---|---|---|
| Logo | Left | Center | Remain aligned with the left side. |
| Profile Icon | Right | Center | Remain aligned with the right side. |
| Sidebar | Left | Top + Bottom | Maintain full-height positioning. |
| Floating Button | Right | Bottom | Remain in bottom-right. |
| Play Icon | Center | Center | Remain centered. |
| Content Panel | Left + Right | Top | Expand horizontally. |
Understand Layout
↓
Create Parent Frame
↓
Create Child Layers
↓
Establish Hierarchy
↓
Select Child Layer
↓
Choose Horizontal Constraint
↓
Choose Vertical Constraint
↓
Resize Parent
↓
Observe Behavior
↓
Test Multiple Sizes
↓
Combine with Auto Layout if Required
↓
Document Behavior
↓
Developer Handoff
| Term | Meaning |
|---|---|
| Constraint | Rule defining how a child layer responds to parent resizing. |
| Parent Frame | Container used as the reference for child behavior. |
| Child Layer | Layer nested inside the parent frame. |
| Left | Maintains relationship with the left edge. |
| Right | Maintains relationship with the right edge. |
| Left + Right | Maintains both horizontal edge relationships. |
| Top | Maintains relationship with the top edge. |
| Bottom | Maintains relationship with the bottom edge. |
| Top + Bottom | Maintains both vertical edge relationships. |
| Center | Maintains a centered relationship. |
| Scale | Maintains proportional position and size behavior. |
| Auto Layout | Manages content flow, spacing, padding, and resizing. |
| Layout Guide | Visual alignment structure for layouts. |
Constraints are rules that define how a child layer responds when its parent frame is resized.
They help maintain predictable positioning and resizing behavior across different frame dimensions and screen sizes.
The main horizontal options are Left, Right, Left and Right, Center, and Scale.
The main vertical options are Top, Bottom, Top and Bottom, Center, and Scale.
It maintains the layer's relationship with the left side of its parent frame.
It maintains the layer's relationship with the right side of its parent frame.
It maintains relationships with both horizontal edges and can allow the layer to grow or shrink as the parent width changes.
It keeps the layer positioned relative to the center of its parent.
It allows the layer's position and size to respond proportionally as the parent changes.
It maintains the layer's relationship with the bottom edge of the parent frame.
Yes, but normal child layers in an Auto Layout frame generally use Auto Layout behavior instead of ordinary constraints. A child can be configured to ignore the Auto Layout flow when independent positioning is required.
Constraints primarily define parent-relative positioning and resizing behavior, while Auto Layout manages content flow, spacing, padding, alignment, and dynamic resizing.
Constraints require a parent frame to reference, so a top-level layer directly on the canvas does not have a parent frame for ordinary constraint behavior.
Place the button inside a suitable parent frame and use Right horizontally and Bottom vertically.
Use Center horizontally and Center vertically.
Inside a suitable regular parent frame, use Left horizontally and Top + Bottom vertically when that behavior matches the intended design.
Because the actual result depends on the layer's initial position, size, parent structure, and other layout settings. Resizing the parent verifies the intended behavior.
It allows a child object to remain inside an Auto Layout frame while being excluded from the normal Auto Layout flow, enabling independent positioning behavior.
Layout guides provide visual alignment references, while constraints define how objects respond to parent resizing. Together they can provide more granular layout control.
No. Constraints are one part of a responsive design workflow. Frames, Auto Layout, resizing properties, components, variants, layout guides, and appropriate testing may also be required.
Constraints in Figma are an important tool for controlling how layers behave when their parent frames change size. They allow designers to establish clear relationships between interface elements and the edges or center of their containers.
Understanding Left, Right, Left and Right, Top, Bottom, Top and Bottom, Center, and Scale constraints makes it easier to build predictable responsive layouts. Common examples include anchoring buttons, positioning sidebars, centering icons, maintaining modal controls, and creating floating actions.
Constraints become even more powerful when combined with Frames, Auto Layout, nested layouts, components, variants, and layout guides. The key is to use each feature for the problem it solves best: constraints for parent-relative behavior and Auto Layout for content-driven flow and resizing.
By practicing constraints with real projects such as dashboards, login screens, modals, video players, navigation bars, sidebars, and mobile interfaces, designers can create flexible and maintainable Figma designs that communicate layout behavior clearly to developers.
For structured Figma learning, visit JustAcademy Figma Training and Register for Figma Course Demo.
