Adaptive vs responsive strategy in Figma - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a responsive frame width in Figma.

Figma

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

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

Afigma.viewport.bounds.width

B300

Cframe.width

D100%

Attempts:

3 left

💡 Hint

Common Mistakes

Using a fixed pixel value instead of dynamic viewport width.

Using percentage strings which are not valid in Figma API.

Using figma.viewport.bounds.width sets the frame width to the current viewport width, enabling responsiveness.

2fill in blank

medium

Complete the code to check if the design should switch to an adaptive layout based on width.

Figma

if (frame.width [1] 600) {
  // switch to adaptive layout
}

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

A==

B>=

C<=

D!=

Attempts:

3 left

💡 Hint

Common Mistakes

Using greater than or equal instead of less than or equal.

Using equality operator which is too strict.

Adaptive layouts often switch when width is less than or equal to a breakpoint like 600 pixels.

3fill in blank

hard

Fix the error in the code to make the frame responsive by setting constraints.

Figma

frame.constraints = [1]

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

A{ horizontal: 'LEFT', vertical: 'TOP' }

B{ horizontal: 'SCALE', vertical: 'SCALE' }

C{ horizontal: 'RIGHT', vertical: 'BOTTOM' }

D{ horizontal: 'CENTER', vertical: 'CENTER' }

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed constraints like 'LEFT' or 'RIGHT' which prevent resizing.

Using 'CENTER' which centers but does not scale.

Setting constraints to 'SCALE' allows the frame to resize responsively with its parent.

4fill in blank

hard

Fill both blanks to set an adaptive layout breakpoint and apply a frame size.

Figma

const breakpoint = [1];
frame.resize(breakpoint, [2]);

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

A768

B1024

C600

D800

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up width and height values.

Using breakpoints that are too large for adaptive design.

600px is a common adaptive breakpoint; 768px is a typical frame height for tablets.

5fill in blank

hard

Fill all three blanks to create a responsive frame with constraints and resize it.

Figma

frame.constraints = [1];
const width = [2];
frame.resize(width, [3]);

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

A{ horizontal: 'SCALE', vertical: 'SCALE' }

Bfigma.viewport.bounds.width

Cfigma.viewport.bounds.height

D{ horizontal: 'LEFT', vertical: 'TOP' }

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed constraints that prevent resizing.

Using fixed pixel values instead of viewport dimensions.

Setting constraints to 'SCALE' and resizing to viewport width and height makes the frame fully responsive.