Practical No. 6: Use Horizontal Scrolling to Create Pages for Given Website/App (Using Figma)

Practical No. 6: Use Horizontal Scrolling to Create Pages for Given Website/App (Using Figma)

1) Aim / Objective

To design a website/app page using horizontal scrolling in Figma by applying Scroll Overflow → Horizontal and creating interactive scrolling content.

2) Required Software / Tools

  • Computer / Laptop

  • Internet connection

  • Web browser (Chrome recommended)

  • Figma (Free account)

  • Figma file (new or practical template)

3) Practical Significance (Why we do this practical?)

Horizontal scrolling is used in real apps/websites to display more content in less space such as:

  • Product cards (Amazon/Flipkart style)

  • Movie sliders (Netflix style)

  • Photo galleries

  • Category banners

  • Testimonials

  • Featured content

It makes UI modern and interactive and improves content presentation.

4) Industry / Employer Expected Outcome

Industry expects you to:

  • Create a clean UI layout

  • Use proper frame structure

  • Apply Horizontal Scroll Overflow

  • Create reusable cards/components

  • Use prototype preview for testing interaction

5) Laboratory Learning Outcome (LLO 6.1)

Student will be able to:

  • Use horizontal scrolling in Figma

  • Create interactive scrolling section for an app/website screen

6) Step-by-Step Procedure (Main Practical Steps)

Step 1: Open Figma

  1. Open browser

  2. Go to Figma

  3. Login to your account

  4. Click New design file

Step 2: Create a Main Screen Frame (App/Web Page)

  1. Press F (Frame tool)

  2. In right panel → select device:

    • For app: Android / iPhone

    • For web: Desktop 1440

  3. Rename frame as:

    • Home Screen or Main Page

✅ This frame will be your full page where horizontal scrolling section will be inserted.

Step 3: Add Basic UI Layout (Header + Content)

Inside the main frame create:

  1. Top Header

    • Add rectangle (R) for header background

    • Add title text: e.g. “Shopping App” / “Travel App”

  2. Add section heading text:

    • Example: “Popular Products”

    • Example: “Top Destinations”

    • Example: “Latest Courses”

This heading will be above the horizontal scrolling cards.

Step 4: Create a Frame for Horizontal Scrolling Section

Now we create the scrolling container.

  1. Press F to create a new frame

  2. Place it below section heading

  3. Set size (example for mobile):

    • Width: same as screen (e.g., 360px)

    • Height: 170px to 220px (depending on card size)

  4. Rename this frame as:

    • Horizontal Scroll Section

✅ This frame is the scrolling area.

Step 5: Create One Card Design (Item Card)

We will design one card and then duplicate.

  1. Press F → create frame inside scroll section

  2. Size example:

    • Card width: 140px

    • Card height: 180px

  3. Rename it as:

    • Card 1

  4. Add elements inside card:

    • Rectangle for image

    • Text for title (e.g., “Shoes”)

    • Text for price/rating (optional)

    • Button (optional)

✅ Style your card properly (corner radius, shadow, spacing).

Step 6: Duplicate Cards in Row (Horizontal)

  1. Select the first card (Card 1)

  2. Duplicate it:

    • Press Ctrl + D (Windows) / Cmd + D (Mac)

  3. Create total 5–8 cards

  4. Arrange cards in a single row left-to-right

  5. Ensure some spacing between cards (like 16px)

Step 7: Apply Auto Layout (Recommended)

This makes the row structure clean and professional.

  1. Select all cards together

  2. Press Shift + A to apply Auto Layout

  3. In Auto Layout settings:

    • Direction: Horizontal

    • Spacing: 16

    • Padding: 10 (optional)

Step 8: Make the Scroll Frame Wider than the Main Screen

To enable horizontal scroll, inside content must overflow.

  1. Select the Auto-layout group of cards

  2. Ensure that card row width is greater than scroll section frame width

    • Example: card row width becomes 900px

    • but scroll section width is only 360px

✅ This overflow creates scrolling.

Step 9: Enable Horizontal Scrolling in Prototype Mode

This is the key step.

  1. Select frame: Horizontal Scroll Section

  2. Open Prototype tab in right sidebar

  3. Find section: Scroll behaviour

  4. In Overflow dropdown, select:
    ✅ Horizontal

Options:

  • No scrolling

  • Horizontal ✅

  • Vertical

  • Both directions

Step 10: Preview and Test Horizontal Scrolling

  1. Click Present / Play button (▶) top-right

  2. In preview screen:

  3. Place mouse/touchpad and scroll left-right

  4. You should see cards moving horizontally.

✅ Your practical output is now ready.

7) Extra Enhancement (For Higher Marks)

A) Add Page Indicators (dots)

Below horizontal scroll section:

  • Add 3–5 small circles/dots

  • Highlight first dot

This looks professional.

B) Create Card Component (Reusable)

  1. Select a card

  2. Right click → Create component

  3. Duplicate instances for consistency

C) Add On-Click Card Navigation (Interaction)

  1. Create another screen:

    • Product Details screen

  2. Go to Prototype

  3. Select Card 1

  4. Drag blue node to Product Details

  5. Interaction:

    • On click

    • Navigate to

    • Animation: Smart Animate / Instant

This shows industry-level interaction.

8) Precautions / Safety & Ethical Practices

✅ Safety Measures:

  • Maintain proper sitting posture

  • Avoid staring at screen continuously (take small breaks)

  • Handle lab equipment carefully

✅ Ethical Practices:

  • Do not copy others’ design without permission

  • Use copyright-free images (Unsplash, Pexels)

✅ Maintain tools:

  • Save file frequently

  • Use proper naming conventions

9) Final Expected Output (What should be in submission)

Your Figma file must contain:

  1. Main page frame

  2. Section heading

  3. Horizontal scroll frame

  4. Multiple cards with proper UI

  5. Prototype enabled → Overflow → Horizontal

  6. Preview shows smooth scrolling

10) Conclusion

Thus, we successfully designed a website/app screen in Figma and applied horizontal scrolling using Prototype → Scroll behaviour → Overflow → Horizontal to create interactive scrolling pages/cards.

Sample Output:


Popular posts from this blog