When you enroll through our links, we may earn a small commission—at no extra cost to you. This helps keep our platform free and inspires us to add more value.

UI/UX Design
SkillShare logo

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

Unlock creativity with Skillshare! Learn acrylic painting, AI writing, graphic design, and photography.

     0 |
  • Reviews ( 0 )
Free
How to design & prototype a Mobile UI/UX Design Experience using Figma design tool - Learn Figma

Related Courses

This Course Includes

  • iconskillshare
  • icon0 (0 reviews )
  • icon7 hours 26 mintues
  • iconenglish
  • iconOnline - Self Paced
  • iconcourse
  • iconSkillShare

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

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

What You Will Learn?

  • 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 walkthrough2. How to design a login & signup experience3. How to design a shopping experience4. How to design checkout experience5. How to design profile & order history screens6. How to create & use a component library7. How to create & share a clickable prototype + smart animate and other transition effects8. How to invite others & collaboration in figma9. How to export UI assets & inspect code for engineering10. Figma keyboard shortcuts11. How to use figma plugins & GUI Kits12. How to create comments & review comments in figma13. 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 featuresBonus Videos 2 - Overlays, Modals, and Menu prototype featuresBonus Videos 3 - Smart Animate, Builder a Loader, and Horizontal/Vertical scrollingBonus Videos 4 - Scroll to Function, Component Variants, and Interactive Components .