Adding scrolling images in Figma involves grouping your images and placing them within a frame that has its scrolling behavior enabled in the Prototype settings.
To add scrolling images in Figma, you need to use the Prototype panel and adjust the overflow behavior of a frame containing your images. This allows you to create a designated area where content exceeds the frame's boundaries and becomes scrollable.
Here's a breakdown of the process:
Step-by-Step Guide to Creating Scrolling Images
Creating a horizontal or vertical scroll of images requires a few key steps in Figma:
- Arrange Your Images: Place all the images you want to be scrollable side-by-side (for horizontal scrolling) or one above the other (for vertical scrolling). Make sure there is some spacing between them if desired.
- Group or Frame Images: Select all the images and group them (Cmd+G or Ctrl+G) or place them inside an Auto Layout frame. Grouping is often sufficient for simple scrolling.
- Create a Container Frame: Draw a new frame over the area where you want the scrollable images to appear on your page. This frame acts as a mask or window for your content. Its size determines how much of the scrolling content is visible at any given time.
- Place Images Inside Container: Drag the group or Auto Layout frame containing your images into the container frame you just created. Ensure the group/frame with images extends beyond the boundaries of the container frame in the direction you want to scroll (horizontally or vertically).
- Clip Content (Optional but Recommended): With the container frame selected, check the "Clip content" box in the Design panel on the right side. This hides the parts of the images that are outside the container frame's boundaries.
- Enable Scrolling in Prototype:
- Select the container frame (the one acting as the window).
- Go to the prototype panel on the right side.
- Change the overflow behavior to either horizontal scrolling Figma or vertical scrolling, depending on the direction your images are arranged.
Once these steps are completed, you can preview your prototype, and the images within the designated frame will be scrollable in the direction you specified.
Understanding Overflow Behavior
The "Overflow behavior" setting in the Prototype panel is crucial for enabling scrolling. It tells Figma what to do when content within a frame exceeds its visible bounds.
- No scrolling: Default setting; content outside the frame is hidden (if clipped) but not scrollable.
- Horizontal scrolling: Allows content to be scrolled left and right within the frame.
- Vertical scrolling: Allows content to be scrolled up and down within the frame.
- Horizontal and vertical scrolling: Allows scrolling in both directions (useful for maps or large images).
By setting this to horizontal or vertical scrolling on your container frame, you activate the scrolling functionality for the content inside it, such as your group of images.
This method is versatile and can be used not only for images but also for lists, cards, or any other content you want to make scrollable within a fixed area of your design.
