We may earn an affiliate commission when you visit our partners.
Course image
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.

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

Share

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

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