We may earn an affiliate commission when you visit our partners.
Course image
Yazdani Chowdhury

In this class, you will learn how to design 3 complete web apps UI/UX Using Figma. While you will design a web app UI/UX, you will end up learning how to use different sorts of tools and techniques in Figma. I will try to teach you the best practice of Figma that will help you to become a good UI/UX designer.

List of the projects that you will design in this course:

Read more

In this class, you will learn how to design 3 complete web apps UI/UX Using Figma. While you will design a web app UI/UX, you will end up learning how to use different sorts of tools and techniques in Figma. I will try to teach you the best practice of Figma that will help you to become a good UI/UX designer.

List of the projects that you will design in this course:

  1. Fashion Web App UI/UX using Figma

  2. Audio Player Web App UI/UX using Figma

  3. Real State Property Selling Web App UI/UX using Figma

  4. Messenger Web App UI/UX.

  5. Figma Budget Management Mobile APP UI/UX

  6. Portfolio Web App UI/UX Using Adobe XD(Bonus)

Here are some lists that you are going to learn in this class:

  • Uses of different tools in Figma

  • Figma Grid and Layout System

  • How to create a component and re-use them.

  • Learn to use a different plugin. For instance - The plugin for Icons

  • Figma Design technique

  • How to do prototyping

  • Learn to use different sorts of animation with prototype

  • How to use the image in Figma.

  • How to make a group in Figma and use it.

  • Figma Color System

  • Figma horizontal scroll view

  • Figma vertical scroll view

  • Learn how to show modal box,

  • Different uses of Figma frame

  • Animation with prototype

  • How to create Figma 3d Design effect

Enroll now

What's inside

Syllabus

Introduction
Rectangle Tool Part-1
Ellipse and Line Tools Part-2
Arrow and Star Tools Part-3
Read more

Traffic lights

Read about what's good
what should give you pause
and possible dealbreakers
Covers Figma's grid and layout system, which are essential for creating visually appealing and well-structured user interfaces
Explores prototyping with animation, which allows designers to create interactive and engaging user experiences within Figma
Teaches how to create and reuse components, which promotes efficiency and consistency in design projects
Includes a bonus project using Adobe XD, which may be useful, but the primary focus on Figma may leave learners with an incomplete understanding of Adobe XD
Focuses on designing web app UI/UX, which may not be directly applicable to learners interested in other types of user interfaces, such as native mobile apps
Demonstrates the use of various Figma plugins, which can significantly extend the software's functionality and streamline design workflows

Save this course

Create your own learning path. Save this course to your list so you can find it easily later.
Save

Reviews summary

Hands-on figma ui/ux design projects

According to learners, this course provides a strong foundation in Figma UI/UX design, largely through its focus on completing six practical projects. Students particularly appreciate the learn-by-doing approach, which helps solidify understanding of tools and techniques. While the course is generally considered well-structured and easy to follow, some reviewers note that due to rapid software updates, certain parts may feel slightly outdated regarding the latest Figma features like Auto Layout. Overall, it's viewed as a valuable resource for beginners looking to build a portfolio and gain confidence in using Figma for real-world applications.
Bonus project uses Adobe XD, not Figma.
"The Adobe XD bonus project felt a bit out of place in a course primarily focused on Figma."
"Was hoping for 6 Figma projects, so the Adobe XD one was unexpected and less relevant for me."
"It's a nice bonus, but I skipped the Adobe XD part as I'm solely focused on learning Figma right now."
"Found the shift to Adobe XD jarring after spending so much time in Figma."
Instruction is generally clear and easy to follow.
"The instructor is very knowledgeable and explains things in a simple, step-by-step manner."
"His pace is just right, and I could easily follow along with the design process."
"Loved the way the instructor broke down the projects into manageable steps."
"Great teaching style, easy to understand even with an accent."
Accessible and helpful for those new to Figma.
"As someone just starting with Figma, this course made complex concepts easy to grasp."
"The instructor explains everything clearly, making it perfect for absolute beginners."
"I had zero prior experience, and this course gave me the confidence to start designing on my own."
"It's a gentle introduction covering the essential tools needed to get started."
Strong focus on hands-on design through projects.
"I really enjoyed the hands-on projects; they were the best way to learn how to apply the tools."
"Building complete web and mobile apps helped me understand the workflow much better than theory alone."
"The six projects cover a good variety of design challenges and are great for building a portfolio."
"I loved working through the different projects; it made the learning experience very practical and engaging."
Some content may be slightly behind Figma updates.
"Some features, like Auto Layout, have changed since the course was recorded, requiring external research."
"While the core concepts are solid, keeping up with Figma's frequent updates can be a challenge for the course material."
"I noticed some differences in the interface and features compared to the current version of Figma."
"Could use updates to reflect the newest capabilities and workflows in Figma."

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 Mega Course - Design 6 Complete Web App UI/UX Project with these activities:
Review Figma Fundamentals
Solidify your understanding of Figma's core tools and interface before diving into complex projects. This will make learning advanced techniques smoother.
Show steps
  • Review Figma's interface and basic tools.
  • Practice creating simple shapes and applying colors.
  • Experiment with text styles and image placement.
Read 'Don't Make Me Think' by Steve Krug
Gain a deeper understanding of usability principles to create more user-friendly web app interfaces.
Show steps
  • Read the book and take notes on key usability principles.
  • Apply the principles to your Figma projects.
  • Evaluate existing web apps based on these principles.
Read 'Refactoring UI' by Adam Wathan and Steve Schoger
Improve your understanding of UI design principles to create more visually appealing and user-friendly web app interfaces.
View Melania on Amazon
Show steps
  • Read the book and take notes on key concepts.
  • Apply the principles to your Figma projects.
  • Experiment with different design techniques.
Three other activities
Expand to see all activities and additional details
Show all six activities
Follow Advanced Prototyping Tutorials
Master advanced prototyping techniques in Figma to create interactive and engaging user experiences.
Show steps
  • Find tutorials on advanced Figma prototyping features.
  • Replicate the techniques in your own Figma projects.
  • Experiment with different animation and interaction styles.
Design a UI Kit in Figma
Practice creating reusable components and styles to streamline your design workflow and ensure consistency across projects.
Show steps
  • Identify common UI elements for web apps.
  • Create components for buttons, inputs, and navigation.
  • Define styles for colors, typography, and spacing.
  • Document your UI kit for future use.
Redesign an Existing Web App Interface
Apply your Figma skills to improve the user interface and user experience of a real-world web application.
Show steps
  • Choose a web app with a design you want to improve.
  • Analyze the existing interface and identify pain points.
  • Create a new design in Figma based on your analysis.
  • Prototype the new design and test it with users.

Career center

Learners who complete Figma Mega Course - Design 6 Complete Web App UI/UX Project will develop knowledge and skills that may be useful to these careers:
User Interface Designer
A User Interface Designer focuses on the visual elements users interact with when using a website, application, or other digital product. This role involves creating layouts, choosing color palettes, selecting fonts, and designing individual UI elements like buttons and icons. This Figma course allows aspiring user interface designers to learn how to use different tools in Figma, and learn Figma design techniques. This can help them create visually appealing and intuitive interfaces. By covering topics such as Figma's grid and layout system, creating components, and using plugins, this course can help a User Interface Designer learn to craft efficient and effective designs.
Mobile App Designer
A Mobile Application Designer designs and develops user interfaces for mobile apps on various platforms like iOS and Android. By enrolling in this course, you can become a Mobile App Designer. This course can help mobile application designers learn a variety of Figma techniques. Completing the Figma Budget Management Mobile APP UI/UX project can be especially helpful. Furthermore, students can learn how to use group and vertical scroll, which is necessary for any mobile app. This course is an excellent resource for any aspiring designer.
Web Designer
A Web Designer plans, creates, and codes internet sites and web pages, many of which combine text with sounds, pictures, graphics and video clips. This course helps those who wish to become Web Designers. The Fashion Web App UI/UX project, Audio Player Web App UI/UX project, Real State Property Selling Web App UI/UX project and Portfolio Web App UI/UX Using Adobe XD(Bonus) that are designed as part of this course may be very useful for Web Designers. By diving deep into web design and Figma techniques, this course prepares web designers to tackle real-world projects.
User Experience Designer
The work of a User Experience Designer involves researching user needs, creating user flows and wireframes, and designing prototypes to test usability. This Figma course may be useful to individuals looking to become User Experience Designers because they can learn about Figma prototyping. The course also provides knowledge of different sorts of animation with prototypes. By learning different Figma design techniques and how to effectively use tools, a User Experience Designer can improve the user experience to ensure that a product is both easy to use and meets user needs.
Interaction Designer
An Interaction Designer focuses on how users interact with a digital product, focusing on creating intuitive and engaging experiences. This course may be useful for prospective Interaction Designers as they learn to design web apps UI/UX using Figma, and can apply different sorts of tools and techniques in Figma. By covering prototyping and animation, this course can prepare them to create compelling interactive experiences. Furthermore, this course teaches the uses of different tools in Figma, which is especially important for Interaction Designers.
Digital Product Designer
A Digital Product Designer is involved in the entire lifecycle of a digital product, from ideation to launch and iteration. They focus on both usability and aesthetics to ensure a product meets user needs and business goals. Taking this course may be useful for those who wish to become Digital Product Designers. By gaining knowledge of Figma tools, design techniques, and prototyping, this course helps designers create innovative and effective digital products. Furthermore, the course teaches the use of different sorts of animation with prototypes.
UI Developer
User Interface Developers translate designs created by UI designers into functional code. This course may be useful for UI Developers since they can learn a variety of Figma techniques. This course can help aspiring UI Developers understand the design process. The projects such as Fashion Web App UI/UX, Audio Player Web App UI/UX, and Real Estate Property Selling Web App UI/UX can be especially helpful. Furthermore, students can learn how to design component and re-use them. For UI Developers, understanding design principles translates directly into better execution and collaboration.
Front-End Developer
A Front End Developer is responsible for implementing visual elements and user interactions on websites and web applications. Front End Developers need a solid understanding of design principles. This course teaches students a variety of Figma techniques, which may be useful. Specifically, the course helps students learn about Figma grid and layout systems, Figma design techniques, Figma color systems, Figma horizontal scroll view, Figma vertical scroll view, and the different uses of Figma frames. This course may be useful to Front End Developers.
Visual Designer
A Visual Designer focuses on the aesthetic aspects of a user interface to improve the user experience. This course may be useful for those seeking to become Visual Designers. The course explores different color systems and design techniques within Figma, providing a solid grounding in visual design principles. These concepts may be useful to Visual Designers. By implementing these design techniques and skills, a Visual Designer can find success in this competitive industry.
Graphic Designer
Graphic Designers work with visuals, typography, and layout for marketing materials, websites, and branding. This course can aid Graphic Designers by deepening their knowledge of Figma and UI/UX principles. The course can facilitate a Graphic Designer's work by teaching them how to use different tools in Figma. The course's modules on Figma color systems and design techniques are particularly applicable, helping graphic designers create visually appealing and effective designs for digital interfaces.
Web Application Developer
Web Application Developers create and maintain interactive web applications, focusing on both front-end and back-end development. This course may be useful to Web Application Developers. Learning how to design web apps UI/UX through Figma can provide a strong foundation for developers. Topics covered in the course, such as Figma Grid and Layout System, may be particularly useful. Although primarily focused on design, this course offers insights valuable for Web Application Developers looking to improve their understanding of user interface design.
UX Researcher
A UX Researcher conducts user research to understand user behaviors, needs, and motivations. They help inform design decisions by providing data-driven insights. This course may be useful for UX Researchers interested in understanding design tools and processes. The techniques covered in topics such as Figma prototyping may be useful. This course can broaden a researcher's understanding of design considerations and improve collaboration with design teams. Although not primarily a research course, it provides valuable context.
Entrepreneur
An Entrepreneur may benefit from this course by learning how to use Figma to design UI/UX for web apps. This course teaches the best practice for web app UI/UX design using Figma which may be useful for an Entrepreneur. Understanding the principles of design can allow an entrepreneur to create better products for their customers. Furthermore, an entrepreneur can use this course to learn the uses of different tools in Figma. This course may be useful to an Entrepreneur with a business idea that needs a web app.
Digital Marketing Specialist
Digital Marketing Specialists develop and execute marketing campaigns across various digital channels. While this course is not directly marketing-focused, the UI/UX design skills learned may be useful for creating effective marketing visuals. This course may be useful to Digital Marketing Specialists. Understanding the principles of good web and app design can help a marketing specialist create more engaging and effective campaigns. Furthermore, the course goes over Figma design techniques.
Project Manager
A Project Manager who understands the design process and principles can more effectively manage design teams and projects. A Project Manager might find this course useful. By learning about Figma tools, design techniques, and prototyping, a project manager gains insight into the work of UI/UX designers, which may be useful. This course assists them in understanding design constraints and making informed decisions. Furthermore, the course teaches the use of different sorts of animation with prototypes.

Reading list

We've selected two books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Figma Mega Course - Design 6 Complete Web App UI/UX Project.
Provides a foundational understanding of usability principles for web design. It emphasizes the importance of intuitive navigation and clear communication. It is particularly useful for understanding how to design web apps that are easy to use. This book is best used as a reference text to guide your design decisions.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Similar courses are unavailable at this time. Please try again later.
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2025 OpenCourser