Testing responsive designs in prototype in Figma - Cell-by-Cell Formula Trace

Sample Data

This data represents common screen sizes used to test responsive designs in a Figma prototype.

Cell	Value
A1	Screen Size
B1	Width (px)
C1	Height (px)
A2	Mobile
B2	375
C2	667
A3	Tablet
B3	768
C3	1024
A4	Desktop
B4	1440
C4	900

Formula Trace

IF(Screen Width <= 768, "Mobile/Tablet Layout", "Desktop Layout")

Step 1: Screen Width = 375 (Mobile)

Step 2: 375 <= 768

Step 3: IF(TRUE, "Mobile/Tablet Layout", "Desktop Layout")

Step 4: Screen Width = 1440 (Desktop)

Step 5: 1440 <= 768

Step 6: IF(FALSE, "Mobile/Tablet Layout", "Desktop Layout")

Cell Reference Map

375

↓

768

↓

1440

↓

375

The formula uses the Width (px) values from cells B2, B3, and B4 to decide which layout to apply.

Result

   A           B           C           D
1 Screen Size  Width (px)  Height (px) Layout
2 Mobile      375         667         Mobile/Tablet Layout
3 Tablet      768         1024        Mobile/Tablet Layout
4 Desktop     1440        900         Desktop Layout

The final result shows which layout is chosen for each screen size based on the width condition.

Sheet Trace Quiz - 3 Questions

What layout is chosen for a screen width of 375 px?

A Mobile/Tablet Layout

B Desktop Layout

C Tablet Layout

D No layout

Key Result

IF(Screen Width <= Threshold, "Mobile/Tablet Layout", "Desktop Layout")

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