CA Activity 2
Name of Activity: - Use of Figma in Design of Swiggy Clone Webapp
Name :Rohan Gaikwad Class :[Link]
Div : A PRN-23067571242048
Roll No: 33
Title: To Design an Online Expense Tracker Mobile App
Objective: - . I recreated the Swiggy webpage using Figma, focusing on modern design and
user experience. I used frames and auto layout to ensure a responsive and intuitive layout.
Interactive prototypes were created to simulate user flow and usability. Plugins like Stark and
Unsplash enhanced functionality and aesthetics. This project strengthened my design skills and
showcased the importance of collaborative iteration.
Problem Statement:
Modern food delivery platforms must provide a seamless, intuitive, and visually engaging user
experience to meet the expectations of today’s digital users. However, many existing interfaces
face challenges such as cluttered layouts, inconsistent visual hierarchy, limited accessibility
features, and non-optimal responsiveness across devices. To address these issues, this project
aims to redesign the Swiggy webpage using Figma by applying modern UI/UX principles,
responsive auto-layout structures, and accessible design practices. The goal is to create an
improved interface that enhances usability, streamlines user flow, and offers a more engaging
and inclusive experience for diverse [Link]-layout, Frames, Components & Interactive
buttons
• Color & Typography Styles
• Prototype connections for screen transitions
• Category icons & financial illustration assets
• Graph elements for analytics (bar chart, pie chart, line graph)
• Figma (UI/UX Design)
Theory: -
1. User Interface (UI) Design
User Interface Design focuses on creating visually appealing, consistent, and user-friendly
digital interfaces. It includes the selection of colors, typography, icons, spacing, and layout
structures. A good UI enhances the aesthetic appeal of a platform while supporting ease of
navigation. Modern UI design emphasizes minimalism, clarity, and visual hierarchy to guide
users toward important actions.
2. User Experience (UX) Design
User Experience Design involves understanding user needs, behaviors, and goals to create
products that are easy and pleasant to use. UX focuses on the complete journey of the user,
from first interaction to task completion. It aims to reduce friction, improve task efficiency, and
create intuitive workflows. Methods like personas, user flows, and usability testing are core to
this process.
3. Responsive Design
Responsive design ensures that a website adapts seamlessly to different screen sizes and
devices. Using flexible grids, constraints, and auto-layout principles, designers create interfaces
that rearrange themselves intelligently. A responsive layout enhances accessibility and usability,
ensuring users have a consistent experience whether they are on mobile, tablet, or desktop.
4. Auto Layout in Figma
Auto Layout is a powerful feature in Figma that allows designers to create dynamic frames
where elements adjust automatically based on changes in content, resizing, or direction. It
ensures consistency and reduces manual adjustment. Auto Layout supports padding, spacing,
alignment, and flexible containers—making it ideal for designing modern scalable interfaces.
5. Prototyping and Interaction Design
Prototyping simulates how the final product will function. Figma’s interactive prototyping
enables designers to link screens, add transitions, create overlays, and simulate real user flows.
Prototypes help in visualizing the user journey, identifying usability issues, and presenting the
design to stakeholders in an interactive format.
6. Importance of Accessibility in Design
Accessibility ensures that digital products can be used by people with diverse abilities,
including those with visual, auditory, motor, or cognitive impairments. Tools like the Stark
plugin in Figma help evaluate contrast ratios, color blindness accessibility, and other inclusive
design standards. Accessibility strengthens usability and ensures compliance with UI/UX best
practices.
7. Use of Plugins in Modern Design Workflows
Figma plugins extend design capabilities by offering automation, asset libraries, accessibility
testing, and high-quality visuals.
Stark improves accessibility checking.
Unsplash enables quick inclusion of high-resolution images for realistic mockups.
Plugins reduce repetitive tasks and improve the overall quality of the design.
8. Collaborative Iteration in Digital Design
Modern UI/UX design is highly collaborative. Tools like Figma allow multiple stakeholders—
designers, developers, and product managers—to contribute simultaneously. Iterative design
ensures continuous improvement through feedback, testing, and refinement. Collaboration
accelerates decision-making and leads to more user-centric results.
9. Redesign and Reverse Engineering for Learning
Recreating existing webpages like Swiggy helps designers understand real-world layout
decisions, component structures, and interaction logic. It supports skill-building in visual
hierarchy, spacing systems, and usability. Such exercises deepen design thinking and improve
proficiency with design tools.
Figma Screenshots: -
1.
Prototype Flow Explanation
1. Home Dashboard
The Home Dashboard acts as the central screen of the application. It provides a quick overview
of the user’s monthly spending, remaining balance, and financial summary. Graphs and visual
indicators help users understand their spending trends at a glance. The dashboard also includes
quick-access buttons for essential actions such as Add Expense, Categories, Budget, and
History, ensuring smooth navigation.
2. Add Expense Page
This page allows users to record their daily expenses efficiently. Users can select a spending
category, enter the amount, choose the date, add optional notes, and select a payment method
(e.g., cash, UPI, card). A save button confirms the entry and updates the dashboard and
category insights in real-time.
3. Category Insights Page
The Category Insights section displays a breakdown of spending across different categories
such as food, travel, shopping, and bills. Visual elements like pie charts and progress bars help
users understand which areas consume the most money. The page also provides suggestions for
cost control based on spending patterns, supporting smarter financial decisions.
4. Expense Details Page
This page shows complete information about individual transactions. It includes the amount,
category, date, time, payment method, and any notes added by the user. The detailed view helps
users review past expenses and track their spending habits more accurately.
5. Budget Setup Page
The Budget Setup page enables users to set monthly budget limits for various categories. Visual
indicators show whether users are within the limit or approaching overspending. This feature
supports responsible money management and helps users stay financially disciplined.
6. History Page
The History section displays past spending records in a chronological format. Users can apply
filters such as daily, weekly, or monthly to analyze spending patterns over specific periods. This
feature offers a comprehensive view of financial activity and supports data-driven decision-
making.
7. Profile Page
The Profile page allows users to manage personal details and customize the app experience.
Options include theme settings (light/dark mode), data export, notifications and reminders, and
access to support. This page enhances usability and personalization.
8. Navigation
The app uses an intuitive navigation system, either through a bottom tab bar or a side menu.
Users can seamlessly switch between key sections such as Dashboard, Add Expense,
Categories, Budget, and Profile. The navigation structure ensures quick access and smooth
movement throughout the prototype.
Conclusion
Experience with Figma : Working with Figma on the Swiggy page recreation was an insightful
experience, enhancing both design and technical skills. The platform’s intuitive interface made
it easy to bring the Swiggy UI to life, allowing me to implement consistent components and
align elements precisely. Utilizing interactive prototyping gave a realistic touch to the page,
showcasing how users would navigate through different screens. Figma’s auto-layout and
constraints were invaluable, ensuring the design was responsive and adaptable. Though
challenging at times, learning to use plugins for icons and text boosted productivity. Overall,
Figma’s powerful tools and collaborative features made the project engaging and efficient