Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Skillshare

How to design & prototype a Mobile UI/UX Design Experience using Figma design tool - Learn Figma

via Skillshare

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

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 shortcuts
11. How to use figma plugins & GUI Kits
12. How to create comments & review comments in figma
13. Final thoughts & going forward

Bonus Videos (deeper dice into prototyping and intro to interactive component)

Bonus Video 1 - Dissolve, Delay, and Move-in & Move-out prototype features
Bonus Videos 2 - Overlays, Modals, and Menu prototype features
Bonus Videos 3 - Smart Animate, Builder a Loader, and Horizontal/Vertical scrolling
Bonus Videos 4 - Scroll to Function, Component Variants, and Interactive Components 

Syllabus

  • 1 Introduction video
  • Class intro to figma & Download the class file
  • Designing the login & sign up screens + component creation, prototyping & smart animate
  • Designing the shopping experience
  • Designing the checkout experience
  • Designing the profile screens
  • Collaborating with others & exporting UI assets for engineering
  • Keyboard shortcuts+plugins+GUI kits
  • Commenting & final thoughts
  • Bonus Video 1 - Dissolve, Delay & Move in - Move out
  • Bonus Video 2 - Overlays, Modals and Menus
  • Bonus Video 3 - Smart Animate, Build a Loader and Horizontal/Vertical Scrolling
  • Bonus Video 4 - Scroll to, Variants and Interactive Components

Taught by

Aaron Lawrence

Reviews

Start your review of How to design & prototype a Mobile UI/UX Design Experience using Figma design tool - Learn Figma

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.