Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Design & Prototype a Mobile UI/UX Experience - Learn Figma
Rating: 4.6 out of 5(1,774 ratings)
8,928 students

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

In this class you will download a figma file and I will walk you through step-by-step, how to create a mobile protoype
Created byAaron Lawrence
Last updated 12/2021
English
English [Auto],Spanish [Auto],

What you'll learn

  • 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

Course content

1 section • 12 lectures • 7h 20m total length

  • 2-Class intro to figma & Download the class file33:19

    Explore Figma to design a mobile app experience, from login and sign-up through checkout and profile, using a component library and prototyping tools, with file setup and cloud collaboration.

  • 3 - Designing the login & sign up screens + component creation + prototyping1:28:10
  • 4 - Designing the shopping experience1:30:11

    design and prototype a mobile shopping experience in figma by building a boba tea selection, fixed tab bar, dropdowns, toppings, and smooth overlay transitions.

  • 5 - Designing the checkout experience1:01:14

    Prototype the checkout workflow in Figma, detailing login, shopping cart, address input, payment, and delivery steps with interactive transitions and UI/UX components for a mobile ui/ux experience.

  • 6 - Designing the profile screens25:52

    Design and prototype the profile screen in a mobile UI/UX flow using Figma, including a profile tab, switching between orders and profile, editing info, adding a photo, and logging out.

  • 7 - Collaborating with others & exporting UI assets for engineering16:01
  • 8 Keyboard shortcuts+plugins+GUI kits20:56
  • 9 Commenting & final thoughts7:12

    Learn how to add context-rich comments in a Figma design, tag teammates, resolve feedback, and use notifications to streamline collaborative prototyping and transitions for mobile and web UI.

  • Bonus Video 1 - Dissolve, Delay, and Move-in & Move-out prototype features17:13

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

    Explore how overlays, modals, and menus are prototyped in Figma, mastering move-in/out transitions, open overlays, drag-to-dismiss interactions, and hamburger menus for mobile UI.

  • Bonus Videos 3 - Smart Animate, Builder a Loader, and Horizontal/Vertical scroll31:15

    Learn to build a loader and screen transitions with smart animate in Figma, and implement horizontal and vertical scrolling and swiping through interactive prototypes.

  • Bonus Videos 4 - Scroll to, Component Variants, and Interactive Component23:35

Requirements

  • Anyone and any level - best for beginners

Description

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

Who this course is for:

  • designers
  • UX designer
  • UI designers
  • User Experience Designers
  • Product Designers
  • Product Managers

Report abuse