Figma UIUX Projects from Udemy

What's inside

Learning objectives

Understand uiux fundamentals
Design a news app ui

Design mobile uis of a contact page
Apply acquired knowledge to various ui's

Understand uiux fundamentals
Design a news app ui
Design mobile uis of a contact page
Apply acquired knowledge to various ui's

Syllabus

Introduction

Quotes

⚠️Notice⚠️

Figma made an update to position the toolbar which use to be at the top to the bottom of the interface as indicated in green.

What is User Experience(UX)

Design Fundamentals

Consistency

Whitespacing

Contrast

Color

Visual Heirarchy

Complexity and Simplicity

Scale

Wireframing Reading Module

Prototyping

Wireframing

Mockup-Reading

Read-Laws of UIUX

Project 2

Figma Interface Walkthrough

Interface walkthrough-1

Interface walkthrough-2

Hotel Website UI Design

Exercise 1

Exercise 2

Project 3

Exercise 3

Exercise 4

Project 4

Contact UI Design

Design 1

Design 2

Design 3

Design 4

Design 5

Design 6

Design 7

Design 8

Design 9

Contact 10

Ecommerce Landing UI Design

Exercise 5

Exercise 6

Interactive Hover Effect

Figma Component

Farm News App UI Design

News UI Part 1

News UI Part 2

News Website UI

Project 1

Background Remover

Bonus

Non-Designers

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Figma UIUX Projects with these activities:

Review Design Principles

Show steps

Reviewing fundamental design principles will provide a solid foundation for understanding UI/UX design concepts covered in the course.

Show steps

Read articles or watch videos on design principles like consistency, whitespace, contrast, color, and visual hierarchy.
Find examples of good and bad design that illustrate each principle.
Take notes on how these principles apply to UI/UX design.

Review 'Don't Make Me Think' by Steve Krug

Show steps

Reading this book will help you understand the importance of usability and user-centered design, which are crucial for creating effective UI/UX designs in Figma.

View Don't Make Me Think, Revisited: A Common Sense... on Amazon

Show steps

Read 'Don't Make Me Think' by Steve Krug.
Take notes on key concepts and examples.
Reflect on how these concepts apply to the projects in the course.

Recreate UI elements from existing apps

Show steps

Practicing recreating UI elements will improve your proficiency with Figma's tools and your understanding of UI design principles.

Show steps

Choose a popular app (e.g., Instagram, Spotify).
Identify specific UI elements (e.g., buttons, icons, navigation bars).
Recreate these elements in Figma, paying attention to detail.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Design a UI Kit

Show steps

Creating a UI kit will help you solidify your understanding of components, styles, and design systems in Figma.

Show steps

Define a specific style or theme for your UI kit.
Create a library of reusable components (e.g., buttons, input fields, icons).
Document your UI kit and its usage guidelines.

Write a blog post about UI/UX design

Show steps

Writing about UI/UX design will help you consolidate your knowledge and share your insights with others.

Show steps

Choose a specific topic related to UI/UX design (e.g., color theory, typography, usability testing).
Research the topic and gather relevant information.
Write a blog post that explains the topic clearly and concisely.
Include examples and visuals to illustrate your points.

Review 'Refactoring UI' by Adam Wathan and Steve Schoger

Show steps

This book provides practical advice on improving the visual design of UIs, which can help you create more polished and professional-looking designs in Figma.

View Melania on Amazon

Show steps

Read 'Refactoring UI' by Adam Wathan and Steve Schoger.
Focus on the practical tips and techniques for improving visual design.
Apply these techniques to your own UI designs in Figma.

Create a portfolio of your UI/UX designs

Show steps

Creating a portfolio will showcase your skills and experience to potential employers or clients.

Show steps

Select your best UI/UX designs from the course and other projects.
Create a website or online portfolio to showcase your work.
Write descriptions of each project, highlighting your role and the design process.

Career center

Learners who complete Figma UIUX Projects will develop knowledge and skills that may be useful to these careers:

User Interface Designer

A user interface designer focuses on the visual elements of a product and create interfaces that are visually appealing, easy to navigate, and consistent with the brand's identity. As a user interface designer, a core responsibility is building user interfaces with tools like Figma. This course helps build a foundation in user interface design with Figma. The course covers the fundamentals of interface design, including the use of shapes, components, and design principles. The hands-on projects, such as designing a contact app user interface, provide practical experience in creating functional and visually engaging interfaces. Furthermore, the course explores interactive hover effects and component creation, which are crucial for creating dynamic and responsive designs. The course may be particularly useful to those seeking to master user interface design.

See salaries and explore the career path for User Interface Designer

User Experience Designer

A user experience designer focuses on the overall experience a user has while interacting with a product or service. This includes conducting research, creating user flows, and designing prototypes to ensure that the product is intuitive, efficient, and enjoyable to use. As a user experience designer interfaces are typically built using tools like Figma. This course helps build a foundation in user experience design. The course covers the fundamentals of user experience design, including wireframing, prototyping, and understanding user experience laws. The course also provides practical experience in user experience design with different projects. The course may be particularly useful to those seeking to master user experience design.

See salaries and explore the career path for User Experience Designer

Mobile App Designer

Mobile app designers are responsible for the look and feel of mobile applications, ensuring they are intuitive, engaging, and user-friendly. This course directly aligns with the needs of a mobile app designer. The course helps build a foundation in user interface and user experience design, which are critical for creating successful mobile apps. The course provides practical experience in designing mobile user interfaces through projects such as designing a contact app and a news app. These projects allow you to apply design principles and Figma tools to create effective mobile designs. Furthermore, the course covers interactive hover effects and Figma components, which are important for enhancing the interactivity and usability of mobile apps. The course is particularly useful to those looking to specialize in mobile app design.

See salaries and explore the career path for Mobile App Designer

Web Designer

Web designers plan, create, and code internet sites and webpages, many of which require an understanding of user interface and user experience. This course may be useful to those who seek to become web designers. The course helps build a foundation in user interface and user experience design principles, which are crucial components of modern web design. Through hands-on projects, like designing a hotel website user interface and an ecommerce landing page, one who wishes to become a web designer can gain practical experience in creating visually appealing and user-friendly websites. The course also covers wireframing and prototyping, which are essential skills for web designers to plan and test website layouts and user flows. In addition, the course may be useful because it introduces Figma, a popular tool used in web design for creating and collaborating on website designs.

See salaries and explore the career path for Web Designer

Interaction Designer

Interaction designers focus on creating engaging and intuitive interactions between users and digital products. They design the behavior of interfaces, considering elements like animations, transitions, and feedback to enhance the user experience. This course helps build a foundation in the principles and tools necessary for interaction design. The course covers user interface and user experience fundamentals, which are essential for creating meaningful interactions. The course provides opportunities to work with Figma, a key tool for designing and prototyping interactive elements. The hands-on projects, like designing a contact app and exploring interactive hover effects, allow you to practice designing interactive components and user flows. The course is particularly useful to those aiming to become interaction designers.

See salaries and explore the career path for Interaction Designer

Product Designer

Product designers are involved in the entire product development process, from ideation to launch. They focus on understanding user needs, defining product requirements, and designing solutions that meet those needs while aligning with business goals. This course helps build a foundation in the user interface and user experience principles that are essential for product design. The course covers topics such as wireframing, prototyping, and design fundamentals, providing a holistic understanding of the design process. The course also introduces Figma, a tool commonly used by product designers for creating and iterating on designs. The hands-on projects, such as designing a contact app interface, provide practical experience in applying design principles to solve real-world problems in product development. The course is useful to product designers seeking to improve their user-centered design skills.

See salaries and explore the career path for Product Designer

User Interface Engineer

User interface engineers focus on building and maintaining the user interfaces of websites and applications. They work closely with designers to translate design concepts into functional code, ensuring that the user interface is visually appealing, responsive, and user-friendly. This course helps build a foundation in user interface and user experience design. The course covers design fundamentals, wireframing, and prototyping, providing a solid understanding of the design process. The course also introduces Figma, a tool commonly used by user interface engineers for collaborating with designers and implementing user interfaces. The course is particularly helpful because it provides hands-on experience with designing user interfaces, which can improve the engineers' ability to implement and maintain user interfaces.

See salaries and explore the career path for User Interface Engineer

UI Developer

A user interface developer translates designs and prototypes into functional code. These developers implement the visual elements and interactions of a user interface, working closely with designers to ensure that the final product matches the design specifications and provides a seamless user experience. Through a strong understanding of user interface and user experience design, developers can better translate designs. The course helps them build a foundation in the design principles and tools used by user interface designers, which can improve collaboration and understanding between developers and designers. By learning Figma, developers can gain insight into the design process and the rationale behind design decisions. The course is particularly useful to user interface developers because it covers the fundamentals of user interface design.

See salaries and explore the career path for UI Developer

Frontend Developer

Frontend developers build the user-facing parts of websites and applications. They use HTML, CSS, and JavaScript to create the visual elements and interactive features that users see and interact with. Understanding user interface and user experience principles can enhance a frontend developer's ability to create effective and user-friendly interfaces. The course may be useful to frontend developers as it helps build a foundation in user interface and user experience design, which can improve the overall quality of their code. Through hands-on projects, such as designing a hotel website interface and a news app interface, developers can gain exposure to design concepts and best practices. The course is particularly useful because it introduces Figma, a tool often used in frontend development workflows for design collaboration and prototyping.

See salaries and explore the career path for Frontend Developer

Usability Analyst

Usability analysts evaluate the ease of use of websites, applications, and other digital products. They conduct usability testing, analyze user feedback, and identify areas for improvement. The course may be useful to usability analysts as it covers user interface/user experience fundamentals. By learning about wireframing, prototyping, and design principles, usability analysts can better understand the factors that contribute to usability issues. The course is particularly useful because it introduces Figma, a tool often used in usability testing and prototyping.

See salaries and explore the career path for Usability Analyst

User Researcher

User researchers plan and conduct studies to understand user behaviors, needs, and motivations. They use a variety of methods, such as surveys, interviews, and usability testing, to gather insights that inform design decisions. Although user researchers may not be designers, understanding user interface and user experience design is crucial for conducting effective research. This course may be useful to user researchers because it helps build a foundation in user interface and user experience principles, which can improve their ability to empathize with users and evaluate designs. By learning about wireframing, prototyping, and design fundamentals, user researchers can better understand the design process and identify areas for improvement. The course is particularly useful because it provides hands-on experience with Figma, a tool often used in usability testing and prototyping.

See salaries and explore the career path for User Researcher

UX Writer

A UX Writer crafts clear and concise copy for user interfaces, ensuring that the language used is intuitive and helps users navigate digital products easily. This course may be useful to a UX writer as it helps build a foundation in the design principles and user experience considerations that influence effective user interface copy. By understanding interface design, a UX writer can create copy that seamlessly integrates with the overall user experience, enhancing usability and engagement. The course is particularly useful to them because it introduces Figma, a tool often used by designers, which enables collaboration and a better understanding of the design context for UX writing.

See salaries and explore the career path for UX Writer

Design Strategist

Design strategists align design efforts with business goals, focusing on how design can drive innovation and create value for organizations. They need a broad understanding of design principles, user needs, and market trends. This course may be useful to design strategists because it introduces user interface and user experience design. The course covers design fundamentals, wireframing, and prototyping, which are essential for understanding the design process and its impact on user experience. Design strategists can apply this knowledge to make informed decisions about design direction and resource allocation. The course is particularly useful because it provides exposure to Figma, a tool widely used in the design industry.

See salaries and explore the career path for Design Strategist

Information Architect

Information architects organize and structure content in a way that makes it easy for users to find and understand. They create sitemaps, navigation systems, and taxonomies to improve the usability of websites and applications. This course may be useful to information architects as it helps build a foundation in user interface and user experience design. The course covers topics such as wireframing, prototyping, and user experience laws, which are essential for creating intuitive and user-friendly information architectures. By learning about design principles and Figma, information architects can better collaborate with designers and developers to create effective navigation systems. The course is beneficial because it introduces a structured approach to design, which aligns with the principles of information architecture.

See salaries and explore the career path for Information Architect

Accessibility Specialist

Accessibility specialists ensure that digital products are usable by people with disabilities. They evaluate websites, applications, and other digital content to identify and address accessibility issues, following guidelines such as the Web Content Accessibility Guidelines. This course may be useful to accessibility specialists because it introduces user experience and user interface design. The course covers design principles, wireframing, and prototyping, which are important for understanding how design decisions impact accessibility. The course is particularly useful because it provides exposure to Figma, a tool that can be used to create accessible designs.

See salaries and explore the career path for Accessibility Specialist

Figma UIUX Projects

What's inside

Learning objectives

Syllabus

Save this course

Activities

Career center

Reading list

Share

Similar courses