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
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:
Intro to Figma design tool & file walkthrough
How to design a login & signup experience
How to design a shopping experience
How to design checkout experience
How to design profile & order history screens
How to create & use a component library
How to create & share a clickable prototype + smart animate and other transition effects
How to invite others & collaboration in figma
How to export UI assets & inspect code for engineering
Figma keyboard short cuts
How to use figma plugins & GUI Kits
How to create comments & review comments in figma
Final thoughts & going forward
