The Ultimate Figma UI Masterclass
Release date:2022
Author:designership
Skill level:Beginner
Language:English
Exercise files:Yes
Become a Figma Master within 10 hours of fun and practical lessons
End-to-end Figma Masterclass course. From file management, design systems, Autolayout mastery to advanced animations. Packed with 90+ videos. 10+ hours of practical video content.
Module 01 – Welcome
01. A warm welcome to all students
02. Install Files
03. Install Figma Plugins
Module 02 – Figma Project Management (Real Project)
01. Welcome
02. Overview
03. Exploration
04. Wireframes
05. Moodboard
06. Workspace
07. Design feedback
08. Final Designs
09. Design Implementation
Module 03 – Master Design Systems
01. Welcome
02. Atomic Design Framework
03. Build Style Guide (Neutrals)
04. Build a Scalable Colour System (Dark Mode)
05. Build a Responsive Typgography Scale
06. Responsive Grid Layouts (320px to 1440px, Including Fixed Sidebars)
07. How to Use the 4pt Grid
08. Create a Vertical 4pt Grid
09. Build an Advanced Icon System (4 Sizes, 2 Colours)
10. Build a Drop Shadow System
11. Master the BEM Model & Component Matrix
12. Build a Dynamic & Scalable Button Set
13. Publish a Design System
14. Using Design Systems Across Multiple Projects
15. Advanced Input Systems (Part 1)
16. Advanced Input Systems (Part 2)
17. Advanced Input Systems (Part 3)
Module 04 – Master Responsive UIDesign
01. Welcome
02. Understanding the Box Model
03. Understanding the CSS Flex box
04. Attaching a Design System
05. Design a Responsive Header
06. Design a Responsive Hero Banner
07. Design a Responsive Masonry Grid
08. Design a Responsive Floating CTA
09. Design a Responsive 4 Col Layout
10. Design a Responsive Footer
11. Adding Prototype Interactions
12. Managing the Design Feedback Process
13. Responsive Views – 1152px
14. Responsive Views – 768px
15. Responsive Views – 320px
16. Designing a Responsive Mobile Header
17. Building a Responsive Prototype
18. Preview designs with Figma Mirror
Module 05 – Master Figma Components
01. Welcome
02. When should you Componentize
03. Global vs Local Components
04. Creating Local & Global Components
05. Deleting Component Variants
06. Modifying a Component
07. Creating a New Set of Component Variants
08. Publishing Large Design Systems Workaround
09. Detaching Main Components
10. Master Components
11. Prevent Master Components from Publishing
Module 06 – Design Implementation (Design Handover)
01. Welcome
02. Compressing Images
03. Compressing Images – FREE & High Quality Alternative
04. How to Run a Design Implementation Walkthrough
05. Preparing a File for Developers
06. Documenting Designs for Developers
07. Exporting SVG Icons
08. Exporting PNG Icons
Module 07 – Bonus Challenges
01. Welcome
02. Build a Responsive 2 Column Layout
03. Build a Responsive Table
04. Create a Grid Box
05. Build a Scalable Progress Bar
Module 08 – Prototypes & Animations
01. Chapter Overview
02. Smart Animate Overview
03. Animation Types
04. Animation Type
05. Easing the Easy Way
06. Figma Animation Prototype
07. Custom Figma Transitions
08. Final Challenges (Part 1)
09. Final Challenges (Part 2)
10. Final Challenges (Part 3)
11. Intro to Part 2
12. Design a Sidebar & Loading State
13. Design a Dashboard
14. Design the Customer View (Rows)
15. Design the Customer View (Grid)
16. Design the Add New Customer Modal
17. Design the Success Message
18. Plan your Prototype Sequence
19. Build your Prototype
20. Interactive Components Challenge (Part 1)
21. Interactive Components Challenge (Part 2)
Watch Me First
[Designership] The Ultimate Figma UI Masterclass.7z
[Designership] The Ultimate Figma UI Masterclass_Subtitles.7z
Channel
Excuse me, but
These two files (until now in the playlist) aren’t working.
12. Managing the Design Feedback Process.mp4
17. Building a Responsive Prototype.mp4
Thank you soo much. Please correct this
Video number 12 under Module 4 is corrupted. Its only 60kb..
Thank you
Hi Strawberry, there still issue on video number 12 under Module 4.
Please fix it.
Thankyou.
Hi Strawberry, there still issue on video :
12. Managing the Design Feedback Process.mp4
17. Building a Responsive Prototype.mp4
Please fix it.
Thankyou.
Thanks, but the following two important videos are corrupted.
12. Managing the Design Feedback Process.mp4
17. Building a Responsive Prototype.mp4
Hi Strawberry, there still issue on video :
12. Managing the Design Feedback Process.mp4
17. Building a Responsive Prototype.mp4
Please fix it.
How can I get the files he provided in Module 1, video 2?