PRACTICAL 6

*Use horizontal scrolling to create pages for given website/ App (For example, page(s) in
social media Apps/ tourism related webpage(s) )

Objective:

Create a To-Do List app for a mobile phone screen with horizontal scrolling to switch
between different task categories (e.g., "Today's Tasks", "Upcoming Tasks", "Completed
Tasks").

Step 1: Set Up the Mobile Frame (Phone Screen)

1. Create the Outer Frame for the Phone:

○ Open Figma and create a new frame.
○ Select the Frame Tool (F key) and draw a frame that represents a phone
screen.
○ Use the iPhone 13 preset or any mobile frame (e.g., 390px width, 844px
height) for accurate mobile dimensions.
2. Name the Frame:
○ Name this frame something like "Phone Screen" to easily identify it.

Step 2: Create the Horizontal Scroll Area for Task Categories

1. Create the Horizontal Scroll Container:

○ Inside the phone screen frame, create a new horizontal container (use the
Frame Tool F).
○ Set the height to 150px (enough space to show task categories like
"Today's Tasks", "Upcoming Tasks", etc.) and width to 3000px (or wider,
depending on how many categories you want to have).
○ This will be the container where different task categories will scroll
horizontally.
2. Enable Horizontal Scrolling:
○ Select the container frame.
○ In the Properties Panel, under the Overflow Behavior, choose Horizontal
Scrolling. This will allow the content inside to scroll horizontally.
Step 3: Add Task Categories Inside the Horizontal Container

1. Add Categories for Tasks:

○ Inside the horizontal container, add text labels or cards for each task
category. For example, you can create labels like:
■ "Today's Tasks"
■ "Upcoming Tasks"
■ "Completed Tasks"
○ To create the categories:
■ Create rectangular cards or buttons (around 150px wide and 50px
high).
■ Add text inside each card, such as "Today's Tasks" and "Upcoming
Tasks".
■ Add some space (e.g., 20px) between each card to create
separation.
2. Space the Categories:
○ Ensure there is enough space between the cards (e.g., 20px) to make the
scroll smooth and visually organized.

Step 4: Create the Vertical Task List Below Each Category

1. Create the Task List Container:

○ Below the horizontal scroll area, create a new vertical container for the
tasks.
○ This container will contain the tasks under each category.
○ Set the height of this container to around 600px (or as needed) and ensure
it is wide enough to fit the phone screen (around 390px).
2. Add Tasks to the List:
○ Inside the vertical task container, add rectangular task cards for each task
(e.g., "Buy groceries", "Finish homework").
○ For each task:
■ Create a rectangle (about 340px wide and 50px tall).
■ Add a checkbox (small circle) and text for the task description.
■ Repeat this for a few tasks to show how the list will look.

Step 5: Link Task Categories to Task Lists

1. Link Categories to Their Task Lists:

○ The task list should change dynamically depending on which category is
selected.
○ For example:
 ■ When the user scrolls to "Today's Tasks," they should see the tasks
related to today in the vertical task list below.
■ When the user scrolls to "Upcoming Tasks," the list should display
upcoming tasks.
2. Create Multiple Task Containers:
○ Create separate task containers for each category (e.g., one for "Today's
Tasks," another for "Upcoming Tasks").
○ Initially, you can show all the tasks under "Today's Tasks" and then swap
them out for different sets of tasks when a user switches categories.
3. Prototype the Interaction:
○ Use Prototype Mode to link the task categories to the correct vertical task
list.
○ When the user scrolls to a category (like "Upcoming Tasks"), you can
switch the content of the vertical task container below by linking it to the
corresponding list of tasks.

Step 6: Add Task Interaction (Mark Tasks as Complete)

1. Add Checkboxes to Tasks:

○ Add a checkbox to each task card in the vertical task list.
○ Make sure the checkbox is small but clearly visible (about 24px diameter).
2. Create Interactions for Completing Tasks:
○ In Prototype Mode, create an interaction for the checkbox.
○ When the user clicks on the checkbox, the task should visually show as
completed (e.g., change the background color or add a checkmark inside
the box).
○ You can create a variant for the task with two states: one for the task being
incomplete and the other for it being marked as complete.

Step 7: Add the "Add Task" Button

1. Create the "Add Task" Button:

○ At the bottom or top of the task list container, create an Add Task button
(e.g., a floating button or one in the header).
○ The button could be a circle with a plus sign (+) or a rectangular button
with text saying "Add Task".
2. Add Action to the "Add Task" Button:
○ When clicked, this button should show a modal or popup where the user
can enter the new task.
○ You can create a simple text input field for users to type the task name, and
a Save button to add it to the task list.
Step 8: Final Design Refinements

1. Adjust Layout and Spacing:

○ Ensure there is adequate padding and spacing around the task categories
and task cards.
○ Ensure the design looks good on mobile devices by adjusting font sizes
and element placements.
2. Refine the User Interface:
○ Add color, icons, and borders for visual clarity.
○ Make the design visually consistent with proper contrast between text and
background.

Step 9: Preview the Interaction

1. Enter Prototype Mode:

○ Click the Present (Play) button in the top-right corner to preview your
design in Presentation Mode.
2. Test the Horizontal Scrolling:
○ Test how users can scroll horizontally between task categories (e.g.,
"Today's Tasks", "Upcoming Tasks").
○ Test the functionality of adding tasks, marking them as complete, and
switching between categories.