SY Exp 4 UID Manual Content
Practical No. 4: Create grid system for the given screen using any design tool
✅ Conclusion (Practical No. 4)
In this practical, we successfully created a grid system (layout grid) for the given screen using a design tool (Figma). We designed the screen using frames, images and colors and applied layout grids to maintain proper alignment and spacing of UI elements. We also explored and used different Figma plugins to improve the design workflow and make the UI creation faster and more accurate. This practical helped us understand the importance of grid systems for consistency in UI design and the role of plugins to enhance productivity.
✅ Practical Related Questions
✅ 1) List Best Figma Plugins for Designers
1) Unsplash
Purpose: Add free high-quality images in UI screens
Why it is useful:
Provides professional photos without leaving Figma
Helps in designing login, profile, gallery, e-commerce, travel app screens
Saves time searching and downloading images separately
Example use:
Adding banner image for a food app or background image for a landing page.
2) Iconify
Purpose: Insert icons easily
Why it is useful:
Offers thousands of icons from popular libraries like Material Icons, FontAwesome, etc.
Icons are scalable (vector), so quality remains good
Helpful for menus, navigation bars, buttons, settings, social icons
Example use:
Adding icons like home, search, cart, profile, settings in an app UI.
3) Content Reel
Purpose: Add realistic dummy data (text content)
Why it is useful:
Inserts sample names, phone numbers, addresses, emails, usernames, etc.
Makes UI look real and professional
Useful in forms, profile screens, lists, tables
Example use:
Filling “Name, Email, Contact” fields automatically in a registration form.
4) Stark
Purpose: Check accessibility of UI design
Why it is useful:
Checks color contrast between text and background
Simulates color blindness view
Helps designers create inclusive UI for all users
Useful for professional UI and real industry projects
Example use:
Checking whether white text on yellow background is readable or not.
5) Figmotion
Purpose: Create animations inside Figma
Why it is useful:
Allows creating animated UI elements
Useful for micro-interactions like buttons, loading screens, splash animations
Makes prototypes more attractive and interactive
Example use:
Creating animation for a loader icon or sliding UI transitions.
6) Autoflow
Purpose: Create user flow arrows automatically
Why it is useful:
Helps to connect screens in UI flow diagrams
Shows navigation between pages clearly
Used for app flow design (Home → Product → Cart → Payment)
Example use:
Connecting a Login Screen to Dashboard Screen with arrows.
7) Blush
Purpose: Add illustrations to UI designs
Why it is useful:
Provides modern illustrations (cartoons, characters, scenes)
Useful for onboarding screens, error screens, empty state pages
Makes UI more visually attractive
Example use:
Adding a “Welcome illustration” on onboarding screen.
8) Remove BG
Purpose: Remove background from images
Why it is useful:
Quickly removes background of photos
Helps create clean UI designs
Used in product images, profile photos, banners
Example use:
Removing background of a product image for e-commerce app.
9) Lorem Ipsum
Purpose: Generate dummy text quickly
Why it is useful:
Helps fill paragraphs and text blocks
Makes it easy to check design spacing and layout
Useful for blogs, news apps, descriptions, about pages
Example use:
Adding placeholder text in article or product description section.
10) Similayer
Purpose: Select similar layers quickly
Why it is useful:
Finds layers with same properties (same name/type/style)
Saves time in editing repeated components
Useful for big designs with many screens
Example use:
Selecting all “Button” components at once and changing color in one step.