Testing responsive designs in prototype in Figma - Step-by-Step Guide

Introduction

Responsive design testing in prototypes helps you see how your design looks on different screen sizes. It solves the problem of making sure your design works well on phones, tablets, and desktops before building it.

When you want to check if buttons and text resize correctly on mobile screens

When you need to see how a menu behaves on a tablet versus a desktop

When you want to test if images stay clear and well placed on different devices

When you want to share a prototype with others and show how it adapts to screen size

When you want to fix layout issues before handing off to developers

Steps

Step 1: Open your design file

- Figma desktop app or web app

Your design frames and components appear on screen

Step 2: Select the frame you want to test

- Layers panel or canvas

The frame is highlighted and ready for prototyping

Step 3: Click the Prototype tab in the right sidebar

- Right sidebar

Prototype settings appear for the selected frame

Step 4: Set the frame’s resizing behavior

- Design tab > Constraints section

Frame resizes automatically when the prototype window changes size

💡 Choose 'Scale' or 'Resize' to test responsiveness

Step 5: Click the Present button (play icon) at the top-right

- Top-right corner of Figma window

Prototype opens in a new window

Step 6: Resize the prototype window by dragging its edges

- Prototype window edges

Design adjusts layout and elements respond to new window size

Step 7: Interact with prototype elements to test behavior

- Prototype window

You see how menus, buttons, and content respond on different sizes

Before vs After

Before

Prototype window fixed size shows design only for desktop view with 1440px width

After

Prototype window resized to 375px width shows design adapting for mobile view with stacked elements and readable text

Settings Reference

Resize behavior

📍 Design tab > Constraints section

Controls how frames and components adjust when the prototype window size changes

Default: Fixed

Device frame

📍 Prototype tab > Device dropdown

Shows the prototype inside a device frame to simulate real device look

Default: None

Presentation zoom

📍 Prototype window toolbar

Controls how the prototype fits inside the preview window

Default: Fit to screen

Common Mistakes

Not setting resize behavior on frames

Frames stay fixed size and do not adapt when prototype window changes size

Set frames to 'Scale' or use Constraints in Design tab to enable responsiveness

Testing prototype only on desktop without resizing window

You miss how design behaves on smaller screens like phones or tablets

Manually resize prototype window or use device frames to test multiple screen sizes

Summary

Testing responsive designs in prototypes helps ensure your design works on all screen sizes before development.

Use the Design tab to set frame resize behavior and open the prototype in presentation mode.

Resize the prototype window or use device frames to see how your design adapts to different devices.

Practice

1. What is the main purpose of testing responsive designs in a Figma prototype?

easy

A. To add more colors and fonts to the design

B. To ensure the design adapts well to different screen sizes and devices

C. To create static images for presentations

D. To export the design as a PDF file

Solution

1. Step 1: Understand responsive design goals

   Responsive design means the layout changes smoothly on different screen sizes.

2. Step 2: Identify prototype testing purpose

   Testing ensures the prototype looks and works well on phones, tablets, and desktops.

3. Final Answer:

   To ensure the design adapts well to different screen sizes and devices -> Option B

4. Quick Check:

   Responsive design = adapt to devices [OK]

Hint: Responsive means design fits all screen sizes [OK]

Common Mistakes:

• Confusing responsive testing with adding colors
• Thinking prototypes are only for static images
• Believing exporting files is the main goal

2. Which Figma feature helps you test how your prototype looks on different devices without manually resizing?

easy

A. Device presets in prototype mode

B. Pen tool for drawing shapes

C. Text styles for fonts

D. Export options for images

Solution

1. Step 1: Identify prototype mode features

   Figma prototype mode includes device presets like iPhone, iPad, desktop.

2. Step 2: Understand device presets use

   These presets simulate screen sizes automatically without manual resizing.

3. Final Answer:

   Device presets in prototype mode -> Option A

4. Quick Check:

   Device presets = auto screen size test [OK]

Hint: Use device presets to avoid manual resizing [OK]

Common Mistakes:

• Confusing pen tool with prototype testing
• Thinking text styles affect responsiveness
• Believing export options help test layouts

3. In a Figma prototype, if a frame uses Auto Layout with horizontal direction and fixed width, what happens when you preview on a smaller screen?

medium

A. The prototype shows an error and stops

B. The content automatically stacks vertically

C. The frame resizes to fit the screen width

D. The content overflows and may be cut off

Solution

1. Step 1: Understand Auto Layout with fixed width

   Fixed width means the frame size does not change with screen size.

2. Step 2: Predict behavior on smaller screen

   Since width is fixed, content won't shrink or stack, causing overflow.

3. Final Answer:

   The content overflows and may be cut off -> Option D

4. Quick Check:

   Fixed width + small screen = overflow [OK]

Hint: Fixed width frames don't resize on small screens [OK]

Common Mistakes:

• Assuming Auto Layout always stacks content
• Thinking fixed width frames resize automatically
• Believing prototype crashes on overflow

4. You notice your prototype frame does not resize on mobile preview despite using constraints. What is the likely cause?

medium

A. The frame has a fixed width set instead of 'Fill container' constraint

B. Auto Layout is not enabled on the frame

C. You forgot to add interactions in prototype mode

D. The prototype is set to desktop device preset

Solution

1. Step 1: Check constraints settings

   Fixed width prevents resizing; 'Fill container' allows flexible width.

2. Step 2: Understand effect on mobile preview

   Fixed width frames stay same size, ignoring smaller screen width.

3. Final Answer:

   The frame has a fixed width set instead of 'Fill container' constraint -> Option A

4. Quick Check:

   Fixed width blocks resizing [OK]

Hint: Use 'Fill container' for responsive width [OK]

Common Mistakes:

• Thinking Auto Layout alone fixes resizing
• Confusing interactions with resizing issues
• Ignoring device preset impact on resizing

5. You want your Figma prototype to adapt fluidly on all devices, stacking elements vertically on narrow screens and horizontally on wide screens. Which combination helps achieve this?

hard

A. Use only constraints without Auto Layout and rely on device presets

B. Set fixed widths on all frames and manually resize for each device preset

C. Use Auto Layout with horizontal direction and add a component variant for vertical layout triggered by screen width

D. Create separate prototypes for each device size without responsive features

Solution

1. Step 1: Understand layout direction control

   Auto Layout direction controls stacking horizontally or vertically.

2. Step 2: Use component variants for responsiveness

   Variants can switch layouts based on screen width or user interaction.

3. Step 3: Combine Auto Layout and variants for fluid design

   This allows dynamic switching between horizontal and vertical stacking as screen size changes.

4. Final Answer:

   Use Auto Layout with horizontal direction and add a component variant for vertical layout triggered by screen width -> Option C

5. Quick Check:

   Auto Layout + variants = fluid responsive design [OK]

Hint: Combine Auto Layout and variants for flexible layouts [OK]

Common Mistakes:

• Relying only on fixed widths and manual resizing
• Ignoring Auto Layout's power for stacking
• Creating multiple prototypes instead of responsive design