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).