How to Create Responsive Design in Figma: Step-by-Step Guide

To create responsive design in Figma, use Constraints to fix elements relative to frames and Auto Layout to make components adapt to size changes. Combine these with Frame Resizing options to ensure your design adjusts smoothly across different screen sizes.

Syntax

In Figma, responsive design relies on three main features:

• Constraints: Set how an object moves or resizes relative to its parent frame edges (left, right, top, bottom, center, scale).
• Auto Layout: Organizes child elements in rows or columns that adjust spacing and size automatically.
• Frame Resizing: Controls how frames and components resize (fixed, hug contents, fill container).

These features work together to make designs flexible and responsive.

plaintext

/* Example of setting constraints in Figma UI */
// Select an object inside a frame
// In the right panel under Constraints:
// Choose Left & Right to stretch horizontally
// Choose Top & Bottom to stretch vertically

/* Auto Layout syntax in Figma UI */
// Select a frame or group
// Click 'Auto Layout' button
// Set direction (horizontal/vertical), spacing, padding

/* Frame resizing options */
// Select frame
// Choose resizing: Fixed, Hug contents, or Fill container

Example

This example shows how to create a responsive button that stretches horizontally with padding and centers vertically inside a frame.

plaintext

1. Create a frame of 300x100 px.
2. Add a rectangle inside the frame (button background).
3. Set rectangle constraints to Left & Right and Center vertically.
4. Add text on top of rectangle, set constraints to Center horizontally and vertically.
5. Select the frame and resize its width to 500 px.

Result: The button background stretches horizontally with the frame, text stays centered.

Output

When you resize the frame width from 300 px to 500 px, the button background expands horizontally while the text remains centered vertically and horizontally.

Common Pitfalls

Common mistakes when creating responsive designs in Figma include:

• Not setting constraints properly, causing elements to stay fixed and not resize.
• Using fixed sizes instead of Hug contents or Fill container, which limits flexibility.
• Ignoring Auto Layout, which helps maintain consistent spacing and alignment.
• Overlapping constraints that conflict and produce unexpected resizing behavior.

Always test resizing frames to see if elements behave as expected.

plaintext

/* Wrong way: Fixed size rectangle with no constraints */
// Rectangle inside frame with fixed width and height
// Constraints set to Left and Top only

/* Right way: Stretch rectangle with constraints */
// Rectangle constraints set to Left & Right
// Width set to Fill container
// Height set to fixed or Hug contents

Quick Reference

Feature	Purpose	How to Use
Constraints	Control element position and resizing relative to parent	Set Left, Right, Top, Bottom, Center, or Scale in right panel
Auto Layout	Arrange elements in flexible rows or columns	Select frame/group, click Auto Layout, set direction and spacing
Frame Resizing	Define how frames/components resize	Choose Fixed, Hug contents, or Fill container in properties
Hug Contents	Frame size adapts to child elements	Select frame, set resizing to Hug contents
Fill Container	Element stretches to fill parent frame	Set resizing constraints Left & Right or Top & Bottom

Key Takeaways

Use constraints to fix elements relative to frame edges for responsive resizing.

Apply Auto Layout to maintain consistent spacing and alignment in flexible layouts.

Set frame resizing to Hug contents or Fill container for adaptive sizing.

Test resizing frames frequently to ensure elements behave as expected.

Avoid conflicting constraints to prevent unexpected layout issues.