Scroll behavior (vertical, horizontal) in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set vertical scrolling in a Figma frame.

Figma

frame.scrollBehavior = '[1]';

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

Avertical

Bnone

Chorizontal

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing horizontal when vertical scrolling is needed.

Using 'auto' which may not explicitly set vertical scrolling.

Setting scrollBehavior to vertical enables vertical scrolling inside the frame.

2fill in blank

medium

Complete the code to enable horizontal scrolling in a Figma frame.

Figma

frame.scrollBehavior = '[1]';

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

Aauto

Bvertical

Cnone

Dhorizontal

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'vertical' instead of 'horizontal'.

Leaving scrollBehavior unset.

Setting scrollBehavior to horizontal allows the frame to scroll left and right.

3fill in blank

hard

Fix the error in the code to correctly set no scrolling in a Figma frame.

Figma

frame.scrollBehavior = '[1]';

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

Avertical

Bhorizontal

Cnone

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'auto' which allows scrolling if content overflows.

Using 'vertical' or 'horizontal' which enable scrolling.

Setting scrollBehavior to none disables scrolling inside the frame.

4fill in blank

hard

Fill both blanks to set vertical scrolling and enable horizontal overflow in a Figma frame.

Figma

frame.scrollBehavior = '[1]';
frame.overflowDirection = '[2]';

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

Avertical

Bhorizontal

Cboth

Dnone

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up scrollBehavior and overflowDirection values.

Using 'horizontal' for scrollBehavior when vertical is needed.

Setting scrollBehavior to vertical enables vertical scrolling, and overflowDirection to both allows horizontal overflow as well.

5fill in blank

hard

Fill all three blanks to set horizontal scrolling, disable vertical overflow, and set scroll snap to start in a Figma frame.

Figma

frame.scrollBehavior = '[1]';
frame.overflowDirection = '[2]';
frame.scrollSnapType = '[3]';

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

Avertical

Bnone

Cstart

Dhorizontal

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing scrollBehavior and overflowDirection values.

Forgetting to set scrollSnapType correctly.

Setting scrollBehavior to horizontal enables horizontal scrolling, overflowDirection to none disables vertical overflow, and scrollSnapType to start aligns scroll snapping to the start.

Practice

1. What does vertical scroll behavior do in a Figma frame?

easy

A. It allows users to move content up and down inside the frame.

B. It allows users to move content left and right inside the frame.

C. It locks the content so it cannot be scrolled.

D. It automatically resizes the frame to fit all content.

Solution

1. Step 1: Understand vertical scroll behavior

   Vertical scrolling means moving content up and down inside a frame.

2. Step 2: Match behavior to options

   It allows users to move content up and down inside the frame. correctly describes vertical scrolling as up and down movement.

3. Final Answer:

   It allows users to move content up and down inside the frame. -> Option A

4. Quick Check:

   Vertical scroll = up/down movement [OK]

Hint: Vertical scroll means up and down movement [OK]

Common Mistakes:

• Confusing vertical with horizontal scrolling
• Thinking vertical scroll locks content
• Assuming vertical scroll resizes frame

2. Which option correctly sets horizontal scroll behavior in Figma's frame properties?

easy

A. Set Overflow behavior to 'Horizontal scrolling'.

B. Set Overflow behavior to 'Resize frame'.

C. Set Overflow behavior to 'No scrolling'.

D. Set Overflow behavior to 'Vertical scrolling'.

Solution

1. Step 1: Locate Overflow behavior setting

   In Figma, scroll behavior is set under Overflow behavior in the right panel for frames.

2. Step 2: Choose correct scroll type for horizontal

   To enable horizontal scroll, select 'Horizontal scrolling' option.

3. Final Answer:

   Set Overflow behavior to 'Horizontal scrolling'. -> Option A

4. Quick Check:

   Horizontal scroll = 'Horizontal scrolling' setting [OK]

Hint: Choose 'Horizontal scrolling' for horizontal scroll [OK]

Common Mistakes:

• Selecting vertical scrolling for horizontal scroll
• Choosing no scrolling by mistake
• Confusing resize frame with scroll behavior

3. Given a Figma frame with Overflow behavior set to 'Vertical scrolling' and content taller than the frame, what happens when you preview the frame?

medium

A. You can scroll left and right to see hidden content.

B. You can scroll up and down to see hidden content.

C. The frame resizes automatically to show all content.

D. No scrolling is possible; content is clipped.

Solution

1. Step 1: Understand vertical scrolling with taller content

   Vertical scrolling allows moving content up and down when content height exceeds frame height.

2. Step 2: Predict preview behavior

   Since content is taller, vertical scroll lets user scroll up/down to see hidden parts.

3. Final Answer:

   You can scroll up and down to see hidden content. -> Option B

4. Quick Check:

   Vertical scroll + taller content = up/down scroll [OK]

Hint: Vertical scroll lets you move up/down if content is taller [OK]

Common Mistakes:

• Thinking horizontal scroll works for tall content
• Assuming frame resizes automatically
• Believing no scroll means content is visible

4. You set a frame's Overflow behavior to 'Horizontal scrolling' but users cannot scroll horizontally in preview. What is the most likely cause?

medium

A. The frame is set to 'Vertical scrolling' instead.

B. The frame's content height is larger than the frame height.

C. The frame's content width is smaller or equal to the frame width.

D. The frame has no fill color.

Solution

1. Step 1: Check content size relative to frame

   Horizontal scrolling works only if content width exceeds frame width.

2. Step 2: Identify cause of no horizontal scroll

   If content width is smaller or equal, no horizontal scroll is needed or possible.

3. Final Answer:

   The frame's content width is smaller or equal to the frame width. -> Option C

4. Quick Check:

   Horizontal scroll needs wider content [OK]

Hint: Check if content width exceeds frame width for horizontal scroll [OK]

Common Mistakes:

• Confusing height with width for horizontal scroll
• Assuming vertical scroll setting causes issue
• Thinking fill color affects scroll behavior

5. You want a Figma frame to allow users to scroll vertically but not horizontally, even if content is wider than the frame. How should you set the scroll behavior and frame properties?

hard

A. Set Overflow behavior to 'No scrolling' and resize frame to fit content.

B. Set Overflow behavior to 'Horizontal scrolling' and increase frame height.

C. Set Overflow behavior to 'Vertical scrolling' and resize frame width to fit content.

D. Set Overflow behavior to 'Vertical scrolling' and ensure frame width clips content horizontally.

Solution

1. Step 1: Choose vertical scroll behavior

   Set Overflow behavior to 'Vertical scrolling' to allow up/down movement only.

2. Step 2: Control horizontal clipping

   Keep frame width fixed so wider content is clipped horizontally, preventing horizontal scroll.

3. Final Answer:

   Set Overflow behavior to 'Vertical scrolling' and ensure frame width clips content horizontally. -> Option D

4. Quick Check:

   Vertical scroll + fixed width = vertical only scroll [OK]

Hint: Use vertical scroll and fixed width to block horizontal scroll [OK]

Common Mistakes:

• Setting horizontal scroll instead of vertical
• Resizing frame width to fit content allowing horizontal scroll
• Choosing no scrolling disables all scroll