INDUSTRIAL TRAINING REPORT
UI UX Design Essentials in Figma
By:
Pratham Mir Dutraj (Reg:- 202200521)
In partial fulfilment of requirements
for the award of degree in
Bachelor of Technology
in Information Technology (2024)
DEPARTMENT OF INFORMATION TECHNOLOGY
SIKKIM MANIPAL INSTITUTE OF TECHNOLOGY
(A constituent college of Sikkim Manipal University)
MAJITAR, RANGPO, EAST SIKKIM – 737136
Pg : 1
COURSE INFORMATION SHEET
Title of the Course Figma UI UX Design Essentials
Course Instructor Daniel Walter Scott
Course Duration
29 Sections , 111 lecture videos ,11.5 hours
Platform Used for the course Udemy
Softwares and Applications Figma , Canva
Pg : 2
ACKNOWLEDGEMENT
I would like to extend my heartfelt thanks to Sikkim Manipal
Institute of Technology and IT department for providing us with
the opportunity to take this valuable course, which offered me
valuable insights into the field of UI/UX domain . Your support
has been crucial in making this learning experience possible. The
resources and infrastructure you provided allowed us to fully
engage with the material, and for that, we are truly appreciative.
A special thank you to Daniel Walter Scott, the instructor of the
Figma UI/UX Design Essentials course. Your guidance and
expertise have provided us with the knowledge about the UI/UX
domain, and the hands-on experience with the Figma software has
been truly enriching. The clarity with which you explained complex
concepts made the learning process both enjoyable and effective.
The practical exercises you designed helped us apply the theoretical
knowledge in real-world scenarios, enhancing our confidence in
using Figma. Iam deeply grateful for the abundant information
and practical skills you've imparted
Signature
Pratham Mir Dutraj
(REG NO: 202200521)
Pg : 3
ABSTRACT
User Interface (UI) and User Experience (UX) are key concepts in digital design,
crucial for shaping how users interact with products. UI encompasses visual
elements like layouts, colors, and typography, creating the look and feel of a digital
interface. UX focuses on the overall experience, emphasizing usability, accessibility,
and user satisfaction.
Although UI and UX are closely related, they serve distinct purposes—UI is about
aesthetics and functionality, while UX ensures the product meets user needs
effectively. Together, they create products that are visually appealing and user-
friendly.
Key elements in UI/UX projects include wireframes, prototypes, and user flows,
which help designers refine the user journey. Tools like Figma and Canva have
become essential for creating small-scale projects such as landing pages. Figma's
collaborative features and Canva's ease of use make them popular choices among
designers.
The demand for skilled UI/UX designers is growing as businesses recognize the
importance of compelling digital experiences. Consequently, tools like Figma and
Canva are in high demand, enabling designers to produce professional-grade
designs efficiently. This trend highlights the increasing significance of UI/UX design
in today's digital landscape, where seamless and visually pleasing user experiences
are crucial for success.
Pg : 4
CONTENTS
SL. NO. TITLE PAGE NO.
1. About Figma Software 6
UI ( User Interface) and
2. 7
UX ( User Experience )
Difference between UI (
3. User Interface ) and UX ( 8
User Experience ) :
WireFraming and
4. 9
Prototyping :
Important processes in
5. 10
UI / UX Design
6. Project 11-13
7. Conclusion 14
Pg : 5
About Figma Software :
Figma is a free, browser-based web design tool that allows teams to collaborate on projects to create
interactive user interface (UI) prototypes. It's a vector drawing program that's intended for screen design, and
is popular with designers, product managers, writers, and developers.
Figma allows users to modify texts, shapes, colors, and images, and add functionalities such as hovering,
scrolling, or animation to their interface assets. It also includes tools for wireframing, diagramming,
brainstorming, and remote designs.
Figma is a versatile web design tool that enables real-time collaboration for building interactive user
interface prototypes.
The tool provides users with the ability to add functionalities including text manipulation, color changes,
image adjustments, hovering, scrolling, and animation to their interface assets.
Figma is highly accessible and can be operated from any browser, making it feasible for users to work from
any location.
Several career paths such as Web Designers, User Experience Designers, Web Developers, and Digital
Design Directors can significantly benefit from learning and using Figma.
Fig : Figma Software Icon Fig : Figma Software Interface
Other Alternative Platform for UI / UX Design:
CANVA :
Canva is a popular graphic design platform that allows users to create stunning visual content for a variety
of purposes mainly like webpage , website wireframes , websites blueprints , landing pages and also
including social media posts, presentations, and user interface (UI) and UX design.
Fig : Canva Platform Icon
Pg : 6
UI ( User Interface) :
Definition : User Interface (UI) is the visual and interactive component of a digital product that allows
users to interact with the system. It encompasses all the elements that users see and interact with, such as
buttons, icons, menus, and screens. UI design focuses on creating an intuitive and aesthetically pleasing
layout that facilitates user engagement and efficient interaction with the product.
Key Features :
Components: Includes visual elements such as buttons, icons, menus, and layouts.
Purpose : To provide a means for users to control and interact with a product.
Design : Elements : Encompasses colors, typography, spacing, and imagery.
Functionality : Focuses on the usability and responsiveness of the interface elements.
Consistency : Ensures a uniform look and feel across different parts of the product.
Feedback : Provides visual or auditory responses to user actions (e.g., button clicks).
Accessibility : Designed to be usable by people with various abilities and disabilities.
Fig : Key Difference between UI and UX
UX ( User Experience ) :
Definition : User experience (UX) design is the process of creating products that provide a positive and
relevant experience for users. It involves all aspects of product development and design, including
branding, packaging, installation, setup, operation, usability, and performance. UX design is also
sometimes called user-centered design.
Key Features :
Usability: The product should be easy to use and have a clear purpose with intuitive functionality.
Consistency: A user-friendly design should provide a consistent experience so that users can use the
product with ease once they're familiar with it.
Findability: The product and its contents should be easy to find so that users can accomplish their tasks.
Accessibility: The product should be easy to use for the average user, as well as users with special needs,
such as colorblind options or text-to-speech.
Hierarchy: The prioritization of elements on a web page can help users understand the information
presented by creating a clear visual structure and guiding their attention.
Pg : 7
Difference between UI ( User Interface ) and
UX ( User Experience ) :
Aspect UX Design UI Design
UX Design focuses on creating a feel and experience that UI Design concentrates on visual aesthetics and elements with the aim
Look vs. Feel addresses emotions and satisfaction of achieving visual appeal.
In UX Design, wireframes and prototypes are created to UI Design Finalizing visual designs for user engagement often
Design vs. Prototyping define user flow and functionality involves working with mockups and graphics.
The focus of UX Design is on ensuring a seamless and
UI Design focuses on individual elements and interactions by
High Level vs. Details meaningful user journey by emphasizing the holistic
perfecting details for aesthetics as well, as functionality.
experience
Research and Research involves conducting user analysis, testing, and Implementation on the hand focuses on putting design choices into
Implementation developing strategies. action such, as selecting fonts, colors, and layouts.
A user-centered approach prioritizes understanding user
User-centered or Interface- On the other hand, an interface-centered approach focuses on creating
needs, behaviors, and emotions throughout the design
centered. visually appealing and user-friendly interfaces.
process.
Problem-Solving vs. Visual Problem-solving aims to address user issues and alleviate
Visual appeal focuses more on creating pleasing designs.
Appeal their pain points
Fig : A brief difference between UI and UX
Pg : 8
Wire Framing :
Definition : Wireframing is a process where designers draw overviews of interactive products to establish the
structure and flow of possible design solutions
Steps to Wireframing in Figma :
1. Go to Figma and Create a New Design File. Begin by signing up for Figma and launching a new file.
2. Create Your Artboard.
3. Create Navigation Bars and Headers.
4. Include Basic Design Elements.
5. Style and Align.
6. Create Transitions (Connections)
7. Finalize and Test.
Fig : Wire Framing Example done in Figma
Prototyping :
Definition : Prototyping is a widely used technique for testing and evaluating ideas at the earliest stage of product
development.
Steps to Prototyping in Figma :
Create interactions and animations
1. Open the Prototype tab in the side bar.
2. Add interactions.
3. Set interaction details.
4. Apply an animation.
5. Preview your animation.
Fig : Prototyping Example done in Figma
Pg : 9
IMPORTANT PROCESSES IN UI/ UX DESIGN:
Wireframing: A crucial step in the interaction design process, wireframing involves visualizing the
skeleton of a digital application. A wireframe is a layout that shows what interface elements will be on
key pages
Information architecture: This skill allows designers to organize and structure information in a way that's
more intuitive and easier for users to understand
Design: The design process involves bringing ideas from the previous steps to life. The design should be
polished and simple, with a user-friendly layout and clear instructions
Validation or testing: Usability testing involves putting designs to the test with real people to gather
information about the user experience.
Collaboration: UI/UX designers need to be able to work well with their colleagues to reach a common goal
Pg : 10
PROJECT
In this report, I present the design and development of a product website created using Figma and Canva, with a
strong focus on UI/UX principles. The website was designed to be user-friendly, visually appealing, and responsive
across devices. Figma was primarily used for crafting the user interface, taking advantage of its prototyping and
collaborative capabilities, while Canva was utilized to create animate and integrate visual assets and effects that
enhanced the overall aesthetic. Throughout the design process, various challenges were addressed, such as maintaining
consistency and ensuring accessibility, leading to a cohesive and engaging user experience.
Link to the Landing page : https://uiuxprathammirdutraj.my.canva.site/
Website page : 1
1. Visual Hierarchy : The website establishes a clear visual hierarchy by using large, bold
typography for headings and smaller text for descriptions. This helps users understand the
importance of each element at a glance.
2. Consistency: The consistent use of colors, fonts, and imagery throughout the website
reinforces brand identity and ensures a cohesive user experience.
Website page : 2
3. Affordance: The design elements, such as buttons, are designed with clear affordances, making it obvious
where users can click to interact with the site.
4. White Space (Negative Space): The website effectively uses white space to avoid clutter, improving
readability and allowing the content to breathe.
Pg : 11
Website page : 3
5. Navigation: The site’s simple, linear navigation is intuitive, reducing the cognitive load on users
as they move from one slide to another.
6. Responsiveness: Although created in Canva, which traditionally focuses on static design, the
layout is visually adaptive to different screen sizes, a key aspect of responsive design.
Website page : 4
7. Typography: The use of distinct fonts helps in distinguishing between different types of content,
such as headings, subheadings, and body text, ensuring a smooth reading experience.
8. Call to Action (CTA): The CTAs are clearly visible and strategically placed, guiding users toward
desired actions, such as exploring more content or making a purchase.
Pg : 12
Website page : 5
9. User-Centered Design: The content is tailored to the target audience, with language and design
choices that resonate with the intended users, enhancing engagement.
10. Minimalism: The website adheres to a minimalist design principle, focusing on essential content
and interactions, which helps in maintaining user focus and reducing distractions.
Pg : 13
CONCLUSION :
In conclusion, the integration of UI/UX design principles into digital products is not only
beneficial but essential in today’s tech-driven world. A well-executed UI/UX design ensures user
satisfaction by making digital interactions intuitive, efficient, and enjoyable, leading to higher user
retention and engagement. As the demand for seamless digital experiences continues to grow,
UI/UX design is becoming increasingly vital in the IT sector, driving innovation and competition.
The trend towards prioritizing UI/UX is evident as businesses recognize its impact on customer
satisfaction and brand loyalty. With advancements in technology, the role of UI/UX is expected to
expand, incorporating emerging fields such as AI, VR, and AR to create more personalized and
immersive experiences. This growth trajectory indicates that UI/UX design will remain at the
forefront of digital innovation, shaping the future of how users interact with technology.
As the industry evolves, professionals skilled in UI/UX will be in high demand, with opportunities
to influence how products are developed and experienced globally. The future of UI/UX is not just
about keeping up with trends but about leading them, ensuring that user experience continues to
be a cornerstone of digital product development.
Pg : 14
