Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
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,843 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

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
  • 3 - Designing the login & sign up screens + component creation + prototyping1:28:10
  • 4 - Designing the shopping experience1:30:11
  • 5 - Designing the checkout experience1:01:14
  • 6 - Designing the profile screens25:52
  • 7 - Collaborating with others & exporting UI assets for engineering16:01
  • 8 Keyboard shortcuts+plugins+GUI kits20:56
  • 9 Commenting & final thoughts7:12
  • 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
  • Bonus Videos 3 - Smart Animate, Builder a Loader, and Horizontal/Vertical scroll31:15
  • 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