OpenCourser brand icon
Sign in
Sorry, this page is no longer available
We may earn an affiliate commission when you visit our partners.
Course image
Udemy logo

Design & Prototype a Mobile UI/UX Experience - Learn Figma

4.7 Filled star Filled star Filled star Filled star Half star
Based on 1,770 ratings
see reviews
Aaron Lawrence

In this class, I have created a figma file for you to download and I will walk you through step-by-step, how to create a fully-functional prototype using the design tool Figma. Here is the class agenda:

Read more

In this class, I have created a figma file for you to download and I will walk you through step-by-step, how to create a fully-functional prototype using the design tool Figma. Here is the class agenda:

  1. Intro to Figma design tool & file walkthrough

  2. How to design a login & signup experience

  3. How to design a shopping experience

  4. How to design checkout experience

  5. How to design profile & order history screens

  6. How to create & use a component library

  7. How to create & share a clickable prototype + smart animate and other transition effects

  8. How to invite others & collaboration in figma

  9. How to export UI assets & inspect code for engineering

  10. Figma keyboard short cuts

  11. How to use figma plugins & GUI Kits

  12. How to create comments & review comments in figma

  13. Final thoughts & going forward

Enroll now

What's inside

Learning objectives

  • Introduction on figma design tool & tips on using the tool
  • Download the figma file with all the designs that you see in the video
  • How to create a clickable & sharable prototype
  • Create a component library
  • Learn mobile transitions, menu transition, overlays and modals
  • Learn smart animate
  • How to export assets for engineering and how to inspect code within figma
  • Learn the best quick keys to use
  • How to install figma plugins, list of top plugins and gui kits
  • Best practices on collaboration within figma
  • How to comment and view comments
  • Show more
  • Show less

Syllabus

Introduction
2-Class intro to figma & Download the class file
3 - Designing the login & sign up screens + component creation + prototyping
4 - Designing the shopping experience
Read more

Here is the file to download for the next set of bonus videos. Drag this file into the draft section within figma to use. I explain how to do this in the first video...

Traffic lights

Read about what's good
what should give you pause
and possible dealbreakers
Covers a range of fundamental and advanced concepts, providing a comprehensive Figma design experience for learners
Provides hands-on practice through a downloadable Figma file and step-by-step prototyping exercises
Demonstrates industry-standard design techniques for creating prototypes and component libraries
Introduces design principles and best practices, catering to beginners and intermediate learners
Covers mobile transitions, smart animations, and other essential design elements for creating user interfaces
Facilitates collaboration through Figma's sharing and commenting features

Save this course

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

Reviews summary

Practical mobile ui/ux with figma for beginners

According to students, this course is an excellent starting point for anyone new to Figma and mobile UI/UX design. Learners consistently praise its step-by-step approach, making it easy to follow even with zero prior experience. The downloadable Figma file and hands-on activities are frequently highlighted as invaluable resources. Students particularly appreciate the practical focus on creating fully functional prototypes, utilizing component libraries, and understanding asset export. While some advanced learners desired more depth, the course is highly recommended for its clear explanations and ability to build confidence in core Figma skills.
Includes a pre-designed Figma file, enhancing the learning experience.
"The step-by-step approach and downloadable Figma file were incredibly helpful."
"The Figma file provided is a fantastic resource that I used throughout the course."
"The provided Figma file is a huge plus and makes following along much easier."
Focuses on building real-world mobile UI/UX experiences.
"The detailed walkthroughs of creating login, shopping, and checkout experiences gave me a real sense of designing a full app."
"The hands-on approach and building real screens felt very practical and applicable to my work."
"I found the course very practical, especially for understanding the workflow from design to prototyping in Figma."
Ideal for new users; provides a clear, step-by-step learning path.
"This course is absolutely fantastic for beginners! I had zero Figma experience and now I feel confident designing and prototyping."
"As a complete beginner, the pace was perfect. I loved the hands-on approach and building real screens."
"My experience as a beginner was great; the step-by-step process made it very easy to follow."
Instructional style and pace could be improved for some learners.
"The instructor's voice is sometimes a little monotone, which made it hard to stay engaged."
"The pacing was inconsistent at times, requiring me to sometimes speed up or slow down."
"Some parts could be more engaging to maintain focus throughout the lessons."
May not satisfy learners seeking advanced Figma techniques.
"The course provides a good foundation but felt a bit rushed in parts, especially for advanced topics like Smart Animate."
"Not enough for someone looking to level up their Figma skills beyond the very basics."
"I was hoping for more advanced techniques or a deeper dive into responsive design."

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 Design & Prototype a Mobile UI/UX Experience - Learn Figma with these activities:
Attend design meetups
Connect with other designers and learn about industry trends and best practices.
Browse courses on Networking
Show steps
  • Find design meetups in your area.
  • Attend meetups and engage with other designers.
Form a study group
Collaborate with other students to discuss course concepts and work on projects.
Browse courses on Collaboration
Show steps
  • Find other students in the course.
  • Form a study group.
  • Meet regularly to discuss the course material and work on projects.
Follow online tutorials
Supplement your learning by following additional tutorials on Figma and prototyping.
Browse courses on Figma
Show steps
  • Search for tutorials on Figma design and prototyping.
  • Follow the steps in the tutorials to practice and expand your skills.
Five other activities
Expand to see all activities and additional details
Show all eight activities
Practice prototyping
Reinforce your understanding of prototyping by working through exercises in Figma.
Browse courses on Prototyping
Show steps
  • Create a new Figma file and familiarize yourself with the interface.
  • Follow the steps in the course to design a login and signup experience.
  • Experiment with different prototyping techniques and transitions.
Contribute to open-source design projects
Gain experience and contribute to the design community by working on open-source projects.
Browse courses on Open Source
Show steps
  • Find open-source design projects that you are interested in.
  • Contact the project maintainers and offer your help.
  • Work on the project and contribute your designs.
Design a portfolio piece
Showcase your prototyping skills by creating a portfolio piece that demonstrates your abilities.
Browse courses on Prototyping
Show steps
  • Identify a specific design challenge or problem to solve.
  • Create a Figma file and design a solution.
  • Create a prototype and export your design for presentation.
Participate in design contests
Test your skills and get feedback by participating in design contests.
Browse courses on Prototyping
Show steps
  • Find design contests that align with your interests.
  • Submit your designs and receive feedback.
Build a responsive website
Apply your prototyping knowledge to create a fully functional, responsive website.
Browse courses on Responsive Design
Show steps
  • Choose a website idea or concept.
  • Design a prototype in Figma.
  • Develop the website using HTML, CSS, and JavaScript.
  • Test and iterate on your design.

Career center

Learners who complete Design & Prototype a Mobile UI/UX Experience - Learn Figma will develop knowledge and skills that may be useful to these careers:
UI Designer
UI Designers are responsible for the visual design of user interfaces. This Figma course can help you develop the skills you need to succeed in this role, including how to use Figma to create prototypes and mockups.
See salaries and explore the career path for UI Designer
UX Designer
As a UX Designer, you will be responsible for creating user interfaces that are both visually appealing and easy to use. This Figma course can help you develop the skills you need to succeed in this role, including how to use Figma to create prototypes and mockups.
See salaries and explore the career path for UX Designer
Interaction Designer
Interaction Designers are responsible for the design of user interactions. This Figma course can help you develop the skills you need to succeed in this role, including how to use Figma to create prototypes and mockups.
See salaries and explore the career path for Interaction Designer
Product Designer
Product Designers are responsible for the design of products, including their user interfaces. This Figma course can help you develop the skills you need to succeed in this role, including how to use Figma to create prototypes and mockups.
See salaries and explore the career path for Product Designer
Front-End Developer
Front-end Developers are responsible for the development of the front-end of websites and applications. This Figma course can help you develop the skills you need to succeed in this role, including how to use Figma to create prototypes and mockups.
See salaries and explore the career path for Front-End Developer
User Researcher
User Researchers are responsible for conducting user research to understand user needs. This Figma course may be useful for User Researchers who want to learn how to use Figma to create prototypes and mockups.
See salaries and explore the career path for User Researcher
Information Architect
Information Architects are responsible for the design and organization of information systems. This Figma course may be useful for Information Architects who want to learn how to use Figma to create prototypes and mockups.
See salaries and explore the career path for Information Architect
Data Analyst
Data Analysts are responsible for the analysis of data to identify trends and patterns. This Figma course may be useful for Data Analysts who want to learn how to use Figma to create prototypes and mockups.
See salaries and explore the career path for Data Analyst
Software Engineer
Software Engineers are responsible for the design and development of software applications. This Figma course may be useful for Software Engineers who want to learn how to use Figma to create prototypes and mockups.
See salaries and explore the career path for Software Engineer
Quality Assurance Analyst
Quality Assurance Analysts are responsible for the testing and validation of software applications. This Figma course may be useful for Quality Assurance Analysts who want to learn how to use Figma to create prototypes and mockups.
See salaries and explore the career path for Quality Assurance Analyst
Content Strategist
Content Strategists are responsible for the planning and creation of content. This Figma course may be useful for Content Strategists who want to learn how to use Figma to create prototypes and mockups.
See salaries and explore the career path for Content Strategist
Marketing Manager
Marketing Managers are responsible for the planning and execution of marketing campaigns. This Figma course may be useful for Marketing Managers who want to learn how to use Figma to create prototypes and mockups.
See salaries and explore the career path for Marketing Manager
Sales Manager
Sales Managers are responsible for the planning and execution of sales campaigns. This Figma course may be useful for Sales Managers who want to learn how to use Figma to create prototypes and mockups.
See salaries and explore the career path for Sales Manager
Project Manager
Project Managers are responsible for the planning and execution of projects. This Figma course may be useful for Project Managers who want to learn how to use Figma to create prototypes and mockups.
See salaries and explore the career path for Project Manager
Business Analyst
Business Analysts are responsible for the analysis of business processes and systems. This Figma course may be useful for Business Analysts who want to learn how to use Figma to create prototypes and mockups.
See salaries and explore the career path for Business Analyst

Reading list

We've selected six 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 Design & Prototype a Mobile UI/UX Experience - Learn Figma.
The UX Book
Save
Comprehensive guide to UX design. It covers everything from user research to prototyping. It great resource for designers who want to learn more about UX design and how to create user-centered products.
The UX Book: Agile UX Design for a Quality User...
Paperback
$$$
The UX Book: Process and Guidelines for Ensuring a...
Hardcover
$$$
The UX Book: Agile UX Design for a Quality User...
Paperback
$$$
The UX Book: Agile UX Design for a Quality User...
Kindle Edition
$$$
The UX Book: Process and Guidelines for Ensuring a...
Kindle Edition
$$$
Cover image
Don't Make Me Think, Revisited
Save
Classic guide to web usability. It covers everything from writing clear and concise copy to designing intuitive navigation. It great resource for designers who want to learn how to create user-friendly websites and apps.
Don't Make Me Think, Revisited: A Common Sense...
Paperback
$$
Don't Make Me Think, Revisited : A Common Sense...
Hardcover
$$$
Don't Make Me Think, Revisited: A Common Sense...
Kindle Edition
$$
Cover image
Things That Make Us Smart
Save
Seminal work on design. It covers everything from the psychology of design to the importance of user feedback. It great resource for designers who want to learn more about the principles of good design.
Things That Make Us Smart: Defending Human...
Kindle Edition
$
CLEAN CODE
Save
Promotes best practices and principles for writing clean and maintainable code, offering valuable insights for students interested in the technical implementation of UI/UX designs.
CLEAN CODE
Paperback
Check
CLEAN CODE
Kindle Edition
Check
Cover image
The Innovator's Dilemma, with a New Foreword
Save
Provides insights into the challenges faced by large organizations in adopting new technologies, offering valuable context for students interested in the business aspects of UI/UX design and innovation.
The Innovator's Dilemma, with a New Foreword
Paperback
Check
The Innovator's Dilemma, with a New Foreword
Kindle Edition
Check
Cover image
The Pragmatic Programmer
Save
Offers practical advice and insights for software developers, providing additional value for students interested in the technical aspects of UI/UX design and development.
The Pragmatic Programmer: Your Journey To Mastery,...
Hardcover
$$
Pragmatic Programmer, The: From Journeyman to Master
Kindle Edition
$$
(Italiano) Pragmatic Programmer - Edizione del 20°...
Kindle Edition
$$
(Italiano) Il Pragmatic Programmer: Guida per manovali del...
Kindle Edition
$$
(中文) The Pragmatic Programmer: access to the highest...
Paperback
$$
Pragmatic programmer (Korean Edition)
Paperback
$$$

Share

Help others find this course page by sharing it with your friends and followers:
Facebook
LinkedIn
Reddit
X
Link
Email

Similar courses

Here are nine courses similar to Design & Prototype a Mobile UI/UX Experience - Learn Figma.
Managing Teams Documents and Files
Most relevant
Beginning GUI programming with JavaFX
Most relevant
Create Interactive Prototypes with Pidoco
Most relevant
Getting started with Microsoft Office 365
Most relevant
Draw a wireframe in Pencil Project
Most relevant
Leadership for Cancer Informatics Research
Most relevant
How to use roadmaps in Jira
Most relevant
GenAI for Prototyping Basics
Most relevant
Getting Started with Git and GitHub
Most relevant

Udemy Buyer Protection & Guarantee

Verified partner policies & purchase protections

Global Marketplace Leader
Free Trial & Audit

Free Lecture Previews

Free preview video lectures available for all courses; optional 7-day free trial on Personal Plan subscriptions (cancel before trial ends to avoid conversion).

Return & Refund Policy

30-Day Money-Back Guarantee

30-day money-back guarantee on all eligible individual course purchases (provided course content has not been substantially consumed or downloaded). Subscription fees are non-refundable once billed.

Buyer Protections

Verified Academic & Industry Partner

Lifetime access to purchased individual courses and future updates, verifiable certificate of completion, and direct student Q&A forums.

Key Purchase Protections
30-day 100% money-back guarantee on course purchases
Lifetime access on web, mobile, and offline
Certificate of completion included with purchase
Direct instructor Q&A and active student community
OpenCourser Verified Partner Policy details last reviewed: 2026-10-22
Course image
Rating
4.7 Filled star Filled star Filled star Filled star Half star
Effort
7.5 total hours
Via
Udemy
Instructor
Aaron Lawrence
Language
English
Traffic lights
Read about what's good
what should give you pause
and possible dealbreakers
Covers a range of fundamental and advanced concepts, providing a comprehensive Figma design experience for learners
Provides hands-on practice through a downloadable Figma file and step-by-step prototyping exercises
Demonstrates industry-standard design techniques for creating prototypes and component libraries
Introduces design principles and best practices, catering to beginners and intermediate learners
Covers mobile transitions, smart animations, and other essential design elements for creating user interfaces
Facilitates collaboration through Figma's sharing and commenting features
Share this
Share to help others discover this course.
Facebook LinkedIn X Reddit Link Email
Begin learning today
Enroll now to gain full access to Design & Prototype a Mobile UI/UX Experience - Learn Figma.
Enroll now
Save for later
Add this course to your list. Find it anytime.
Save
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