Overflow scrolling in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable vertical overflow scrolling in a Figma frame.

Figma

frame.overflowBehavior = '[1]'

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

Avertical-scroll

Bvisible

Chidden

Dhorizontal-scroll

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'visible' which shows overflow without scrolling.

Choosing 'hidden' which clips overflow content.

Choosing 'horizontal-scroll' which scrolls sideways.

Setting overflowBehavior to vertical-scroll enables vertical scrolling when content overflows the frame height.

2fill in blank

medium

Complete the code to set horizontal overflow scrolling in a Figma frame.

Figma

frame.overflowBehavior = '[1]'

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

Avertical-scroll

Bvisible

Chorizontal-scroll

Dhidden

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'vertical-scroll' which scrolls vertically.

Choosing 'visible' which shows overflow without scrolling.

Choosing 'hidden' which clips overflow content.

Setting overflowBehavior to horizontal-scroll enables horizontal scrolling when content overflows the frame width.

3fill in blank

hard

Fix the error in the code to enable both horizontal and vertical scrolling in a Figma frame.

Figma

frame.overflowBehavior = '[1]'

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

Ascroll

Bboth-scroll

Cvertical-scroll

Dhorizontal-scroll

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'both-scroll' which is not a valid value.

Using 'vertical-scroll' or 'horizontal-scroll' which enable only one direction.

The correct value to enable both horizontal and vertical scrolling is scroll.

4fill in blank

hard

Fill both blanks to set a frame's overflow to vertical scroll and enable clip content.

Figma

frame.overflowBehavior = '[1]'
frame.clipsContent = [2]

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

Avertical-scroll

Btrue

Cfalse

Dhorizontal-scroll

Attempts:

3 left

💡 Hint

Common Mistakes

Setting clipsContent to false which shows overflow content.

Choosing horizontal-scroll instead of vertical-scroll.

Setting overflowBehavior to vertical-scroll enables vertical scrolling. Setting clipsContent to true hides content outside the frame bounds.

5fill in blank

hard

Fill all three blanks to set horizontal scrolling, enable clip content, and set frame name to 'Scrollable Frame'.

Figma

frame.overflowBehavior = '[1]'
frame.clipsContent = [2]
frame.name = '[3]'

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

Avertical-scroll

Btrue

CScrollable Frame

Dhorizontal-scroll

Attempts:

3 left

💡 Hint

Common Mistakes

Using vertical-scroll instead of horizontal-scroll.

Setting clipsContent to false.

Forgetting to set the frame name.

Set overflowBehavior to horizontal-scroll for horizontal scrolling. Set clipsContent to true to hide overflow content. Set name to 'Scrollable Frame' to label the frame.