Exp No 4: Grid-Based UI Layout Using Frames, Images, Colors and Plugins

Manual Content Exp no 4


Exp. No 4: Grid-Based UI Layout in Figma Using Frames, Images, Colors, and Plugins

Learning Objectives

LLO 4.1: Use frames, images, and colors to design the given screen
LLO 4.2: Explore various plug-ins/extensions in the design tool
LLO 4.3: Use different plug-ins/extensions in the design tool

Objective

To design a grid-based UI screen in Figma using frames, images, colors, and plugins/extensions. The design should follow UI/UX best practices such as alignment, spacing, hierarchy, and readability.

Problem Statement

Design a Welcome / Landing Page of a Blog Portal in Figma using a structured grid layout and apply different plugins to enhance productivity and visual quality.

Design Tool

Figma (Web-based Collaborative UI Design Tool)

Figma is selected because it supports:

  • Frames instead of traditional artboards

  • Layout grids for responsive UI

  • Direct plugin integration

  • Real-time collaboration

Step-by-Step Design Workflow in Figma

Step 1: Create a New Figma File

Open Figma → New Design File.

Create a frame:

  • Select Frame Tool (F)

  • Choose Desktop – 1440 × 1024 px

  • Rename the frame to “Blog Portal – Welcome Page”

This frame represents the main screen.

Step 2: Apply a Layout Grid in Figma

Select the frame → In the right-side Properties panel → Click Layout Grid → +

Change Grid Type to Columns

Configure as follows:

  • Columns: 12

  • Type: Stretch

  • Gutter: 24 px

  • Margin (Left & Right): 120 px

Why 12-Column Grid?

A 12-column grid allows flexible and modular layout creation. It supports content alignment and makes the design scalable and consistent across screen sizes.

Step 3: Build the UI Structure Using Frames and Groups

1. Header Section

Create a separate frame inside the main frame for the header:

  • Left: Logo text “InspireBlog”

  • Center: Navigation (Home | Articles | Categories | Contact)

  • Right: Buttons: Login | Sign-Up

Ensure all elements snap to the grid.

2. Hero Section

Create another frame below the header.

Add:

  • Main Heading: “Welcome to InspireBlog”

  • Sub-heading: “Where ideas grow into impactful stories”

  • CTA Button: “Start Reading”

  • Hero Image placed to the right

Set auto-layout if needed for alignment.

3. Featured Articles Section

Create card frames aligned to the grid.

Each card includes:

  • Image (top)

  • Blog Title

  • Short description

  • Read More link/button

Use consistent spacing and padding.

4. Footer Section

Footer contains:

  • Social Media Icons

  • Copyright

  • Support/Help Links

Step-4: Apply Colors and Typography in Figma

Color Palette (Set via Style Panel)

Primary: #2F80ED
Secondary: #F2F2F2
Text Dark: #333333
Accent: #EB5757

Typography

Create text styles in Figma:

  • Heading: Montserrat – 36px – Bold

  • Body: Open Sans – 16px – Regular

This ensures consistency.

Step-5: Plugins Used in Figma (LLO 4.2 & 4.3)

1. Unsplash Plugin

Purpose: Insert high-quality stock images directly into frames
Usage: Used to place hero and article images
Benefit: Saves time and improves aesthetics

2. Iconify Plugin

Purpose: Access thousands of free icons
Usage: Used for menu, footer, and social icons
Benefit: Maintains scalable vector quality

3. Color Palettes Plugin

Purpose: Generate and test color themes
Usage: Helped finalize the color scheme
Benefit: Ensures professional and harmonious UI

Step-6: UI/UX Principles Applied in Figma

Alignment
All elements aligned to the 12-column grid using Figma snapping.

Spacing
Padding and spacing between elements kept consistent.

Hierarchy
Heading > Sub-Heading > Body text hierarchy applied.

Contrast
Readable contrast between text and background.

Consistency
Same typography, color set, and button styles used.

Final Output Summary

The final design completed in Figma includes:

✔ A structured Welcome Page of a Blog Portal
✔ Designed completely using Figma Frames & Layout Grids
✔ Professional color, typography, and image usage
✔ Supported with Figma plugins
✔ Proper application of UI/UX design principles

Conclusion

This practical demonstrates the effective use of Figma for UI/UX design. By applying a 12-column grid, frames, colors, images, and plugins, a visually appealing and structured Blog Portal Welcome Page was created. The exercise improved understanding of grid systems, layout consistency, and plugin-based workflow enhancement.


Popular posts from this blog