Practical No. 7: Use Vertical Scrolling for a given Website / App

Practical No. 7: Use Vertical Scrolling for a given Website / App 

I. Practical Significance

This practical is useful for students to design an application/website screen that contains long content and requires vertical scrolling to view additional information. It helps in designing realistic UI screens such as product lists, feeds, settings pages, etc.

II. Industry / Employer Expected Outcome(s)

This practical is expected to develop the ability to:

  • Create long UI layouts (content beyond screen height)

  • Apply vertical scroll overflow in prototype

  • Test scrolling behaviour like real websites/apps

III. Course Level Learning Outcome(s)

CO4 – Create interactions using design tool.

IV. Laboratory Learning Outcome(s)

LLO 7.1 – Use vertical scrolling component in the design tool to create given page(s).

V. Relevant Affective Domain related Outcomes

  1. Follow safety measures.

  2. Follow ethical practices.

  3. Maintain tools and equipment.

VI. Relevant Theoretical Background

Vertical Scrolling

Vertical scrolling refers to moving content up and down on the screen so the user can view additional content beyond the visible screen area. It is commonly used in apps/web pages like feeds, lists, and long informational pages.

Practical Procedure (Verified Steps in Figma)

A) Create the Main Screen Frame

Step 1: Create a New Figma File

  1. Open Figma

  2. Click New design file

  3. Rename the file as:
    Practical No. 7 – Vertical Scrolling

Step 2: Create a Screen Frame (Mobile or Web)

  1. Press F (Frame tool)

  2. From right panel select:

    • Phone → iPhone 13/14 OR Android
      (You may use any standard device size)

  3. Rename the frame as:
    Vertical Scroll Screen

✅ This frame acts as the “device screen” (viewport).

B) Add Content (Longer Than Frame Height)

Step 3: Design UI Content Inside the Frame

Add components like:

  • Header / App bar

  • Search bar

  • Banner image

  • Categories

  • Product cards / List items (8–12 items)

  • Footer section

✅ Ensure that the total content height becomes more than the frame height, for example:

  • Frame height: 844 px

  • Content height: 1600–2500 px

This is required to make vertical scrolling visible.

C) Convert Content Into a Scrollable Area

Step 4: Make a Content Frame (Important)

  1. Select all the UI elements inside the screen frame

  2. Right-click → Frame selection
    (Shortcut: Ctrl + Alt + G / Cmd + Option + G)

  3. Rename this new frame as:
    Content

✅ Now, your structure should be:

  • Vertical Scroll Screen (Main Frame)

    • Content (Frame with long elements)

Step 5: Enable Clip Content on the Main Frame

  1. Select the main screen frame (Vertical Scroll Screen)

  2. In the right panel (Design tab), enable:
    ✅ Clip content

✅ This hides the overflowing part and gives proper “screen-like” scrolling.

D) Apply Vertical Scrolling in Prototype

Step 6: Enable Vertical Scroll Overflow

  1. Select the main screen frame

  2. Open Prototype tab (right panel)

  3. Find Scroll behavior section

  4. In Overflow dropdown choose:
    ✅ Vertical scrolling

(Other options are: No scrolling / Horizontal / Both directions)

E) Test in Prototype Preview

Step 7: Set Starting Frame

  1. Select Vertical Scroll Screen frame

  2. In Prototype panel click:
    ✅ Set as starting frame

Step 8: Run the Prototype

  1. Click Present (▶) button (top-right corner)

  2. In preview mode, scroll using:

    • Mouse wheel

    • Trackpad

    • Scroll bar

✅ The screen should scroll vertically like a real app/page.

Conclusion

Thus, vertical scrolling was successfully implemented in Figma prototype by:

  • Creating a long content layout inside a frame

  • Enabling Clip content

  • Setting Prototype Overflow = Vertical scrolling

  • Running the prototype to verify vertical scrolling behaviour


Popular posts from this blog