FigmaHow-ToBeginner · 4 min read

How to Create Responsive Mobile Design in Figma Easily

To create responsive mobile designs in Figma, use Constraints to fix elements relative to frames, and apply Auto Layout to manage spacing and alignment dynamically. Adjust frame sizes and test resizing to ensure your design adapts smoothly to different screen sizes.

📐

Syntax

In Figma, responsive design relies on two main features: Constraints and Auto Layout.

Constraints: Define how an object moves or resizes relative to its parent frame edges (left, right, top, bottom, center, scale).
Auto Layout: Creates flexible frames that automatically adjust child elements' position and spacing when resized.
Frame Resizing: Changing the frame size to simulate different device widths and heights.

text

Constraints: Set in the right sidebar under 'Constraints' with options like Left, Right, Top, Bottom, Center, Scale.

Auto Layout: Select a frame or group, then click '+' next to 'Auto Layout' in the right sidebar.

Resize Frame: Drag frame edges or enter width/height values in the properties panel.

💻

Example

This example shows how to create a responsive mobile header with a logo on the left and a menu icon on the right that stays fixed when resizing the frame.

text

1. Create a frame with width 375px (typical mobile width).
2. Add two rectangles inside: one on the left (logo), one on the right (menu).
3. Select the logo rectangle, set Constraints to 'Left' and 'Top'.
4. Select the menu rectangle, set Constraints to 'Right' and 'Top'.
5. Resize the frame width to 320px and 414px to see elements stay pinned correctly.

Output

When resizing the frame, the logo stays pinned to the left edge and the menu icon stays pinned to the right edge, maintaining consistent spacing.

⚠️

Common Pitfalls

Common mistakes when creating responsive designs in Figma include:

Not setting constraints properly, causing elements to move unpredictably when resizing.
Using fixed widths/heights inside auto layout frames, which breaks flexibility.
Ignoring nested frames and their constraints, leading to unexpected layout shifts.
Forgetting to test resizing on different frame sizes to verify responsiveness.

text

Wrong way:
- Element inside frame with no constraints set.
- Frame resized, element overlaps or moves incorrectly.

Right way:
- Set element constraints to edges or center.
- Use Auto Layout with flexible sizing.
- Test resizing to confirm behavior.

📊

Quick Reference

Feature	Purpose	How to Use
Constraints	Fix element position relative to frame edges	Select element > Right sidebar > Constraints > Choose edges
Auto Layout	Create flexible, adaptive frames	Select frame/group > Click '+' next to Auto Layout in right sidebar
Frame Resizing	Test responsiveness by changing frame size	Select frame > Drag edges or enter size in properties panel
Padding & Spacing	Control space inside Auto Layout frames	Set padding and spacing values in Auto Layout settings

✅

Key Takeaways

Use Constraints to pin elements relative to frame edges for responsive positioning.

Apply Auto Layout to create flexible frames that adjust child elements automatically.

Always test your design by resizing frames to simulate different mobile screen sizes.

Avoid fixed sizes inside Auto Layout frames to maintain flexibility.

Nested frames need proper constraints to prevent unexpected layout shifts.