Testing responsive designs in prototype in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Responsive Constraints in Figma

Which constraint setting in Figma ensures that an object maintains its distance from the right edge of a frame when the frame is resized?

A Left

B Right

C Scale

D Center

💡 Hint

Think about which side the object sticks to when the frame width changes.

Setting the constraint to 'Right' keeps the object fixed relative to the right edge, so it moves when the frame resizes.

❓ visualization

intermediate

Identifying Responsive Behavior in Prototype Preview

You preview a Figma prototype on different screen sizes. Which visual behavior indicates that a component is set to 'Scale' constraint?

A The component stays the same size and position regardless of frame size.

B The component disappears on smaller screens.

C The component resizes proportionally with the frame.

D The component moves but does not resize.

💡 Hint

Consider what 'Scale' means for size and position.

'Scale' constraint causes the component to resize proportionally as the frame changes size.

🔧 Formula Fix

advanced

Fixing a Prototype Layout Issue on Mobile

A prototype frame looks perfect on desktop but the main button overlaps text on mobile preview. What is the most likely cause?

A The button is constrained to Bottom and Right but frame height is fixed.

B The button is set to 'Scale' but text is fixed size.

C The button has fixed width and is constrained to Left and Top.

D The button has no constraints set.

💡 Hint

Think about how constraints affect position when frame size changes vertically.

Constraining the button to Bottom and Right with a fixed frame height can cause overlap if the frame doesn't resize properly on mobile.

🎯 Scenario

advanced

Designing a Responsive Navigation Bar

You want a navigation bar to stretch across the top of the screen and keep its height fixed on all devices. Which constraints should you apply to the nav bar frame?

A Left constraint only with flexible height.

B Scale constraint on all sides.

C Center constraint horizontally and fixed height.

D Left and Right constraints with fixed height.

💡 Hint

Think about how to make width flexible but height constant.

Left and Right constraints allow the nav bar to stretch horizontally, while fixed height keeps vertical size constant.

❓ data_modeling

expert

Mapping Responsive Constraints to Prototype Behavior

Match the following Figma constraint settings to their prototype behavior when resizing frames:

• 1. Left and Right
• 2. Scale
• 3. Center
• 4. Left

A 1-1, 2-2, 3-3, 4-4

B 1-4, 2-2, 3-3, 4-1

C 1-2, 2-1, 3-4, 4-3

D 1-3, 2-4, 3-1, 4-2

💡 Hint

Match each constraint to how the object behaves when the frame changes size.

Left and Right constraints cause stretching (1-1), Scale resizes proportionally (2-2), Center keeps object centered (3-3), Left fixes object to left edge (4-4).

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