Responsive Design in Figma: Desktop, Tablet & Mobile

Design for desktop, tablet, and mobile screens.

Why Responsive Design Matters

Users access websites and apps on multiple devices desktop, tablet, and mobile.

Responsive design ensures:

✅ Consistency across devices :  your UI adapts without breaking

✅ Better user experience : no horizontal scroll or clipped content

✅ Higher engagement : users can interact comfortably on any screen

✅ Faster development handoff : developers can implement layouts reliably

Goal: Build layouts that flex and scale naturally.

Set Up Frames for Multiple Devices

1. Desktop: Start with a 1440px width frame
2. Tablet: Create a 768px width frame
3. Mobile: Create a 375px width frame

Tip: Use Figma Presets for quick frame sizes.

Use Auto Layout for Flexibility

Auto Layout allows elements to grow, shrink, and distribute evenly:

• Select a container > Shift + A > Enable Auto Layout
• Set direction: Vertical (column) or Horizontal (row)
• Adjust spacing, padding, and alignment

✅ Use “Fill Container” for buttons, cards, or images to expand dynamically.

✅ Combine with Constraints (Left, Right, Top, Bottom) to control responsiveness.

Constraints & Responsive Behavior

• Constraints define how an element reacts when the parent frame resizes.
• Common setups:
  • Logo: Top Left (fixed position)
  • Hero image: Top & left(stretch with frame)
  • Buttons: Center (stay centered on resize)

Tip: Test responsiveness by dragging frame edges in Figma.

Responsive Components & Variants

• Create reusable components for buttons, cards, and headers.
• Use Variants to adjust layouts for desktop, tablet, and mobile.
• Example: A navigation menu might switch from horizontal (desktop) → hamburger menu (mobile).

Preview & Test

1. Use Figma’s Mirror App to preview on mobile devices.
2. Adjust frames and constraints until all layouts look good on every screen size.
3. Combine with Smart Animate to see smooth transitions between layouts (optional).