Testing responsive designs in prototype in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the frame to a responsive width in Figma prototype.

Figma

frame.resize([1], frame.height)

Drag options to blanks, or click blank then click option'

Afigma.viewport.bounds.width

B100

Cframe.width

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Using a fixed number like 100 instead of dynamic viewport width.

Using 'auto' which is not valid in this context.

Using figma.viewport.bounds.width sets the frame width to the current viewport width, making it responsive.

2fill in blank

medium

Complete the code to set constraints for a frame to resize horizontally in Figma prototype.

Figma

frame.constraints = { horizontal: [1], vertical: 'TOP' }

Drag options to blanks, or click blank then click option'

A'LEFT_AND_RIGHT'

B'SCALE'

C'CENTER'

D'MIN'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'CENTER' which centers but does not resize.

Using 'SCALE' which scales but may distort content.

The 'LEFT_AND_RIGHT' constraint allows the frame to resize horizontally with the parent.

3fill in blank

hard

Fix the error in the code to make the prototype frame responsive to height changes.

Figma

frame.constraints = { horizontal: 'LEFT_AND_RIGHT', vertical: [1] }

Drag options to blanks, or click blank then click option'

A'CENTER'

B'TOP_AND_BOTTOM'

C'SCALE'

D'BOTTOM'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'CENTER' which does not resize vertically.

Using 'BOTTOM' which fixes the frame to bottom only.

The 'TOP_AND_BOTTOM' constraint allows the frame to resize vertically with the parent frame.

4fill in blank

hard

Fill both blanks to set a frame's constraints for full responsive resizing in Figma prototype.

Figma

frame.constraints = { horizontal: [1], vertical: [2] }

Drag options to blanks, or click blank then click option'

A'LEFT_AND_RIGHT'

B'TOP_AND_BOTTOM'

C'CENTER'

D'SCALE'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'CENTER' which centers but does not resize.

Using 'SCALE' which scales content but may distort layout.

Using 'LEFT_AND_RIGHT' and 'TOP_AND_BOTTOM' constraints allows the frame to resize both horizontally and vertically with its parent.

5fill in blank

hard

Fill all three blanks to create a prototype interaction that adapts frame size responsively on window resize.

Figma

figma.on('resize', () => { frame.resize([1], [2]); frame.constraints = { horizontal: [3], vertical: 'TOP_AND_BOTTOM' }; });

Drag options to blanks, or click blank then click option'

Afigma.viewport.bounds.width

Bfigma.viewport.bounds.height

C'LEFT_AND_RIGHT'

D'CENTER'

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed numbers instead of viewport dimensions.

Using 'CENTER' constraint which does not resize horizontally.

This code resizes the frame width and height to the viewport size and sets horizontal constraints to 'LEFT_AND_RIGHT' for responsive resizing.