Breakpoint-based design in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a breakpoint for mobile screens in Figma.

Figma

if (screen.width <= [1]) {
  applyMobileLayout();
}

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

A1200

B768

C1024

D480

Attempts:

3 left

💡 Hint

Common Mistakes

Using tablet or desktop breakpoints for mobile.

The common breakpoint for mobile screens is 480 pixels or less.

2fill in blank

medium

Complete the code to apply tablet layout for screens wider than mobile but less than desktop.

Figma

if (screen.width > 480 && screen.width <= [1]) {
  applyTabletLayout();
}

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

A480

B1024

C768

D1200

Attempts:

3 left

💡 Hint

Common Mistakes

Using mobile breakpoint value or desktop breakpoint value incorrectly.

Tablet breakpoints commonly go up to 768 pixels wide.

3fill in blank

hard

Fix the error in the breakpoint condition for desktop screens.

Figma

if (screen.width > [1]) {
  applyDesktopLayout();
}

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

A1024

B768

C480

D1200

Attempts:

3 left

💡 Hint

Common Mistakes

Using tablet or mobile breakpoint values for desktop.

Desktop layouts usually start at widths greater than 1024 pixels.

4fill in blank

hard

Fill both blanks to create a responsive layout condition for large desktops.

Figma

if (screen.width > [1] && screen.width <= [2]) {
  applyLargeDesktopLayout();
}

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

A1024

B1200

C1440

D1600

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the lower and upper breakpoint values.

Large desktop layouts typically start above 1200 pixels and go up to 1440 pixels.

5fill in blank

hard

Fill all three blanks to define breakpoints for mobile, tablet, and desktop layouts.

Figma

if (screen.width <= [1]) {
  applyMobileLayout();
} else if (screen.width <= [2]) {
  applyTabletLayout();
} else if (screen.width > [3]) {
  applyDesktopLayout();
}

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

A480

B768

C1024

D1200

Attempts:

3 left

💡 Hint

Common Mistakes

Using overlapping or incorrect breakpoint values.

Mobile breakpoint is up to 480px, tablet up to 768px, and desktop starts above 1024px.