-
ptl
-
Category:
Front-end Development
Description In this class, we will walk you through step-by-step, how to create a fully-functional prototype using the design tool […]
Description
In this class, we 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
Who this course is for:
- designers
- UX designer
- UI designers
- User Experience Designers
- Product Designers
- Product Managers
What you’ll learn
- Introduction on figma design tool & tips on using the tool
- 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
- Introduction
- Designing login and signup screen + prototyping + component screen
- Designing a 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
- Dissolve, Delay, and Move-in & Move-out prototype features
- Overlays, Modals, and Menu prototype features
- Smart Animate, Builder a Loader, and Horizontal/Vertical scroll
- Scroll to, Component Variants, and Interactive Component
- Skill Test