OpenCourser brand icon
Sign in
We may earn an affiliate commission when you visit our partners.
Course image
Udemy logo

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

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

Here's a deal for you

We found an offer that may be relevant to this course.
Save money when you learn. All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.
Use code at checkout. Valid until January 1, 2025
New customers offer
Visit Udemy from OpenCourser as a new customer and claim these savings on your first order.
Up to
80%
off
UDEAFNULP2024

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
5 - Designing the checkout experience
6 - Designing the profile screens
7 - Collaborating with others & exporting UI assets for engineering
8 Keyboard shortcuts+plugins+GUI kits
9 Commenting & final thoughts

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...

Bonus Videos 2 - Overlays, Modals, and Menu prototype features
Bonus Videos 3 - Smart Animate, Builder a Loader, and Horizontal/Vertical scroll
Bonus Videos 4 - Scroll to, Component Variants, and Interactive Component

Good to know

Know what's good
, what to watch for
, 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

Save Design & Prototype a Mobile UI/UX Experience - Learn Figma to your list so you can find it easily later:
Save

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:
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
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
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
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
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
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
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
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
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
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
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

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.
Figma Prototyping: A deep dive for UX/UI Designer
Most relevant
Build Wireframes and Low-Fidelity Prototypes
Most relevant
Designing a Low Fidelity Prototype in Figma
Most relevant
Create High-Fidelity Designs and Prototypes in Figma
Most relevant
UI Design using Figma: Create a Weather App Interface
Most relevant
User Experience Design - Learn UI UX App Design with Figma
Most relevant
UI Design using Material Design 3: Designing a Reminder...
Most relevant
Create Interactive Prototypes with Pidoco
The Complete Figma Course – Designing Mobile & Web App...
Course image
Effort
7.5 total hours
Via
Udemy
Instructor
Aaron Lawrence
Language
English
Good to know
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 and help others discover this course.
Facebook LinkedIn X Reddit Link Email
Don't miss out
Enroll today to gain access to this course
Enroll in this course
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 - 2024 OpenCourser