SY Practical No. 9: Create navigations for the given website/ App

 

Practical No. 9 – Detailed Step-by-Step Guide (Figma Navigation Design)

Target:

Create a working navigation prototype with:

  • Top Bar

  • Bottom Navigation

  • Slide Menu (Drawer)

  • Internal page links

  • Complete hierarchy as per diagram

Step 1 – Create New File

  1. Open Figma

  2. Click New Design File

  3. Rename:

    Practical 9 – Website Navigation

Step 2 – Create Mobile Screen Frame

  1. Press F (Frame Tool)

  2. From right panel → Select:
    Phone → Android (360 × 640)

  3. Rename frame:

    Screen/Home

Step 3 – Design Top Navigation Bar

  1. Select Rectangle Tool (R)

  2. Draw rectangle at top:

    • Width: 360

    • Height: 56

    • Fill: Light Green (#DDE8D8)

  3. Add Menu Icon:

    • Press Text (T)

    • Type: ☰

    • Place at left (16px margin)

  4. Add Title:

    • Text: Home

    • Font Size: 18–20

    • Align center

Rename group:

Nav/TopBar

Step 4 – Create Bottom Navigation Bar

  1. Draw rectangle at bottom:

    • Width: 360

    • Height: 60

    • Color: Light Green

  2. Add 5 menu items (Text Tool):

    • Home

    • About Us

    • Events

    • Media

    • Newspaper

  3. Select all texts → Click Auto Layout (Shift + A)

    • Direction: Horizontal

    • Spacing: Space Between

Rename:

Nav/BottomBar

Step 5 – Add Sample Content Area

Between Top and Bottom bars:

  • Add text:

    Welcome to Home Page

  • Center it

Step 6 – Duplicate Screens for All Pages

Select Screen/Home → Press Ctrl + D and rename as:

Screen/About Us
Screen/Mission
Screen/Leadership
Screen/Board of Directors
Screen/Events
Screen/Coming Events
Screen/Media
Screen/New Music
Screen/Concerts
Screen/Listening
Screen/Newspaper
Screen/Current Issue
Screen/Past Issue
Screen/Contact

For each screen:

  • Change Top Bar Title accordingly

  • Keep Bottom Bar same

  • Add sample content text

Step 7 – Create Slide Menu (Drawer)

7.1 Create Menu Frame

  1. Press F

  2. Size:

    • Width: 260

    • Height: 640

  3. Place it left side of screens

  4. Rename:

Overlay/Slide Menu

7.2 Add Menu Items (Hierarchy)

Add text list vertically:

Home
About Us
 Mission
  Leadership
  Board of Directors
Events
 Coming Events
Media
 New Music
  Concerts
  Listening
Newspaper
 Current Issue
 Past Issue
Contact

Steps:

  1. Select all texts

  2. Apply Auto Layout (Vertical)

  3. Spacing: 12–16px

  4. Indent child items (move right 20–40px)

Step 8 – Add Slide Menu Interaction

  1. Select Menu Icon (☰) in Home screen

  2. Go to Prototype tab

  3. Drag blue arrow → Overlay/Slide Menu

  4. Settings:

    • Action: Open Overlay

    • Animation: Slide In

    • Direction: Left

Step 9 – Link Bottom Navigation

Go to Prototype Mode

Create links:

FromTo
Home tabScreen/Home
About tabScreen/About Us
Events tabScreen/Events
Media tabScreen/Media
Newspaper tabScreen/Newspaper

Repeat linking for all screens.

Step 10 – Link Slide Menu Items

In Slide Menu:

Menu ItemLink To
HomeScreen/Home
About UsScreen/About Us
MissionScreen/Mission
LeadershipScreen/Leadership
Board of DirectorsScreen/Board of Directors
EventsScreen/Events
Coming EventsScreen/Coming Events
MediaScreen/Media
New MusicScreen/New Music
ConcertsScreen/Concerts
ListeningScreen/Listening
NewspaperScreen/Newspaper
Current IssueScreen/Current Issue
Past IssueScreen/Past Issue
ContactScreen/Contact

Action:
On Click → Navigate To

Step 11 – Add Back Navigation

For all internal screens:

  1. Add text: ←

  2. Place in Top Bar (left)

  3. Prototype:

    • On Click → Navigate Back

Step 12 – Convert to Components (Industry Practice)

Select and convert:

  • TopBar → Ctrl + Alt + K

  • BottomBar → Ctrl + Alt + K

  • Menu Item (optional)

This ensures consistency.

Step 13 – Apply Auto Layout (Important)

For each screen:

  1. Select content area

  2. Press Shift + A

  3. Set spacing: 16px

  4. Keep margins: 16px from edges

Step 14 – Test the Prototype

  1. Click Present (▶)

  2. Check:

    • Slide menu opens smoothly

    • Bottom navigation works

    • All pages open

    • Back button works

    • Hierarchy accessible


Popular posts from this blog