IIRF Online > Design > Web Design > Figma > Motion Design with Figma: Animations, Motion Graphics, UX/UI
Motion Design with Figma: Animations, Motion Graphics, UX/UI by Udemy
Figma like a Pro! Learn Motion Design on Mobile and Web using modern practices that top designers use + build projects!
Course Highlights
- Use Figma like a pro and get a job in User Interface Design, User Experience Design (UX/UI), Web Design or Mobile App Design
- Learn to build Motion Design Prototypes with Figma and add Animations and Motion Graphics to your projects
- Have an amazing design portfolio customized and professionally completed by the end of the course (we provide it for you!)
- Build these projects: Photo Inspiration App, Nat Geo Carousel, Smart Home Mobile App, Home Reno Web Landing Page and Form + more!
- Learn to use Smart Animate in Figma
- Learn UI/UX best practices using the latest trends in the industry
- Learn the principles of Motion Design, the motion design process, best practices, and prototyping your projects for your customers and clients
Skills you will learn!
Curriculum
3 Topics
Join Our Online Classroom
Exercise: Meet Your Classmates and Instructor
Design Resources
5 Topics
Common Misconceptions Of Motion Design
Motion Helps Create Usability
ZTM Resources
Narative And Mental Models
Where To Next? Your Choice...
28 Topics
Figma Resources For This Section
Introduction
Plans and Signup
Where to use Figma
Figma UI (Structure)
Figma UI (Files)
Figma UI (Toolbar)
Figma UI (Left Sidebar)
Figma UI (Right Sidebar)
Shapes and Tools (Frames)
Shapes and Tools (Groups)
Shapes and Tools (Basic Shapes and Boolean Operations)
Designing in Figma (Images)
Designing in Figma (Getting Started with Text)
Designing in Figma (Constraints)
Designing in Figma (Using Auto Layout)
Designing in Figma (Auto Layout Properties)
Resources and Collaboration (Community Files)
Resources and Collaboration (Community Plugins)
Resources and Collaboration (Sharing and Comments)
Project (What We Are Going To Build)
Project (Creating a Logo Using Basic Shapes)
Project (Auto Layout Buttons)
Project (Creating a Responsive Navigation)
Project (Responsive Text)
Project (Imagery and Gradients)
Project (Strokes and Shapes)
Project (Layout and Responsiveness)
9 Topics
Figma Resources For This Section
Figma Check In (Intro to Smart Animate)
Figma Check In (Smart Animate Properties)
Exercise (Parallax)
Exercise (New Message)
Exercise (Overlays)
Figma Check In (Interactive Components)
Exercise (Interactive Buttons)
Monthly Coding Challenges Free Resources And Guides
5 Topics
Figma Resource For This Section
Design Assets
Filtering Through Categories
Screen Transitions And Drag Interactions
Simple Microinteractions
13 Topics
Introduction
Easing
Offset And Delay
Parenting
Transformation
Value Change
Masking
Overlay
Cloning
Obscuration
Parallax
Dimensionality
Dolly And Zoom
25 Topics
Figma Resources For This Section
Exercise: Navigation Transitions (Navigation Design)
Exercise: Navigation Transitions (Heart)
Exercise: Navigation Transitions (Cart)
Exercise: Navigation Transitions (Home)
Exercise: Scrolling (Landing Page)
Exercise: Scrolling (Anchor Links)
Exercise: Scrolling (Parallax)
Exercise: Paging (Simple Carousel Dots)
Exercise: Paging (Carousel Animations)
Exercise: Dragging (Listing Card)
Exercise: Dragging (Image Drag)
Exercise: Dragging (Dragging Through Content)
Exercise: Dragging (Drag and Drop)
Exercise: Microinteractions (File Uploader)
Exercise: Microinteractions (File Uploader Part 2)
Exercise: Microinteractions (Pause And Play)
Exercise: Microinteractions (Like Button)
Exercise: Microinteractions (Like Animation)
Exercise: Delight (Success Modal)
Exercise: Delight (Confetti Pop)
Exercise: Delight (Checklist Part 1)
Exercise: Delight (Checklist Part 2)
Exercise: Delight (Cart Button Part 1)
Exercise: Delight (Cart Button Part 2)
6 Topics
Discovery And Research: Part 1
Discovery And Research: Part 2
Design And Storyboard
Prototype
Testing
Helpful Tips
4 Topics
Figma Resources For This Section
Simple Landing Page Carousel
Complex Parallax And 3D Image Effect
Exercise: Imposter Syndrome
5 Topics
Figma Resources For This Section
What Is A Microinteraction?
Why Microinteractions Are Important
Figmotion: Part 1
Figmotion: Part 2
4 Topics
Figma Resource For This Section
Design A Mobile Home Screen
Create A Toggle Interaction
Temperature Adjustment Interactions
2 Topics
Why Is Feedback Important?
Constructive Feedback
7 Topics
Figma Resources For This Section
Design A Landing Page
Prototyping A Landing Page
Parallax Effects: Part 1
Carousel
Parallax Effects: Part 2
Gallery
10 Topics
Figma Resource For This Section
Motion In Form Elements
Form Progress
Animating Form Content
Inputs And Buttons: Part 1
Inputs And Buttons: Part 2
Inputs And Buttons: Part 3
Inputs And Buttons: Part 4
Tooltips
Carousel Input
9 Topics
Figma Resources For This Section
Introduction
Using Parallax To Draw Attention
List Transitions
Masking And Overlay
Alternative Overlays
Microinteractions And Floating Action Buttons
Order Progress: Part 1
Order Progress Part 2
7 Topics
Figma Resource For This Section
Kap For Mac
How To Use Kap
Using Your Kap Gif In Figma
Screenity For Chrome And Windows
How To Use Screenity
Using Your Screenity GIF In Figma
4 Topics
Thank You!
Become An Alumni
Learning Guideline
LinkedIn Endorsements
1 Topic
Special Bonus Lecture
Motion Design with Figma: Animations, Motion Graphics, UX/UI
Related Figma Courses
Thank You!
Your review has been submitted successfully.