Course Content
01 – Introduction
0/3
Download Resource Files
001 Intro to the Figma Advanced Course
03:14
002 Getting Started in Figma Advanced Course
02:31
02 – Auto Layout – Level 1
0/10
Download Resource Files
001 Auto Layout & Responsive Design 101 It’s use in responsive design_part1
08:03
001 Auto Layout & Responsive Design 101 It’s use in responsive design_part2
08:03
002 Designing in Figma with Auto Spacing in Auto Layouts
11:40
003 When and when not to use Components in Figma
06:01
004 What is good spacing to use in Figma
06:59
005 What spacing should I use for web & app design in Figma
05:16
006 Auto Layout vs Constraints in Figma
05:16
007 Autolayout shortcuts Tips and tricks to work with Auto Layout faster
03:06
008 Class Project 01 – Responsive Lower Navigation
02:51
03 – Advanced Workflow Tricks
0/9
Download Resource Files
001 How to handle files in Figma and become a File Handling Master
07:24
002 How to use advanced Copy, Paste, and Selection Tricks in Figma
06:36
003 How to do crazy things with your Figma fields
03:33
004 Frame Tricks Tips and Tricks to work with Figma frames effectively
04:40
005 Advanced Zooming Techniques for precision work in Figma
01:41
006 Light or Dark vs System Theme Which one to use in Figma
02:29
007 Class Project 02 – Event Card Constraints
01:36
008 Class Project 02 – Event Card Constraints – Completed
08:42
04 – Grids
0/6
Download Resource Files
001 Grid v Constraints v Autolayout in Figma Which one to use and when
05:17
002 How to copy & paste grids and export grid styles in Figma
05:30
003 How to add rows and column grids to one layout in Figma
04:19
004 How to update Grid Styles in Figma
01:32
005 Grids inside of frames that aren’t the main frame
03:45
05 – Simple App Brand
0/5
Download Resource Files
001 Class project 03 – Event Branding
04:20
002 Logos using Iconscout How to use Iconscout to create logos in Figma
06:48
003 What are widget compared to plugins in Figma
03:34
004 How to create ux color variants using a Figma Widget
05:14
06 – Nested & Responsive Auto layouts
0/10
Download Resource Files
001 Intro to Nested & Responsive Auto layouts Section
04:02
002 Production video – Tidying up my frame & component mess
05:53
003 Bring in images using the unsplash plugin in Figma
07:39
004 Production video – Making the parts for our nested autolayout
05:37
005 Nesting Multiple Auto Layouts inside each other in Figma
05:14
006 Autolayout Nesting with variants and responsive text in Figma
08:57
007 Auto Layout on different device sizes- How to make advanced Auto Layouts_part1
05:30
007 Auto Layout on different device sizes- How to make advanced Auto Layouts_part2
05:30
008 Responsive text that adjusts for 2 lines in Figma
04:30
07 – Animation – Level 1
0/19
Download Resource Files
001 Abstract Gradient Background in Figma the easy way_part1
03:58
001 Abstract Gradient Background in Figma the easy way_part2
03:58
001 Abstract Gradient Background in Figma the easy way_part3_part1
01:59
001 Abstract Gradient Background in Figma the easy way_part3_part2
01:58
002 How to copy and paste Interactions in Figma
01:23
003 How to animate gradient mesh using Variants in Figma_part1
07:52
003 How to animate gradient mesh using Variants in Figma_part2_part1
03:56
003 How to animate gradient mesh using Variants in Figma_part2_part2
03:56
004 How to give feedback on a UX project – The Critique Sandwich_part1
03:00
004 How to give feedback on a UX project – The Critique Sandwich_part2
03:00
004 How to give feedback on a UX project – The Critique Sandwich_part3
03:00
005 Class project 04 – Background Animation
04:51
006 Houdini Text How to make a text mask animation Figma_part1
04:53
006 Houdini Text How to make a text mask animation Figma_part2
04:53
007 How to use the Spring Animations in Figma
06:34
008 Spring Animation How to make custom Spring Animation in Figma
12:18
009 Why is interaction on tap on click grayed out of missing in Figma
01:52
010 Class project 05 – Houdini Text Animation
01:38
08 – Prototyping – Level 1
0/24
Download Resource Files
001 Create & remove bulk multiple noodles wires at once in Figma
03:06
002 How to bulk update nav links in your Figma prototype
03:16
003 How to set the right phone and find old prototype phones in Figma
04:01
004 How to make sticky scroll position search bar in Figma_part1
03:05
004 How to make sticky scroll position search bar in Figma_part2
03:05
005 How to stack multiple sticky text vertical scrolling in Figma_part1
05:21
005 How to stack multiple sticky text vertical scrolling in Figma_part2
05:21
005 How to stack multiple sticky text vertical scrolling in Figma_part3_part1
02:40
005 How to stack multiple sticky text vertical scrolling in Figma_part3_part2
02:40
006 Class project 06 – Multiple Sticky Headings
02:26
007 How to make Interactive Components in Figma
03:43
008 How to make a checkmark turn on and off in Figma
02:39
009 Interactive components with sliding button in navigation for Figma_part1
04:55
009 Interactive components with sliding button in navigation for Figma_part2
04:55
010 Class project 07 – Sliding Button Nav Challenge
04:15
011 Class project 07 – Completed
03:52
012 How to use Sections in Figma for organizing your content
04:49
013 How to use sections for prototyping in Figma
06:39
014 How to add iOS battery wifi notch status bar to Figma_part1
03:36
014 How to add iOS battery wifi notch status bar to Figma_part2
03:36
015 How to add iOS or Android Snack Bar UI to Figma
10:40
016 Class project 08 – Operating System UI
01:48
017 Be careful what you create in Figma
03:44
09 – Advanced Layers
0/8
Download Resource Files
001 What are the advanced Layer shortcuts in Figma_part1
03:50
001 What are the advanced Layer shortcuts in Figma_part2
03:50
002 How to find layer Zen shortcuts in Figma
04:38
003 How to hide and lock unlock all layers in Figma
01:05
004 How to use Locked layers in Figma
02:11
005 How to Find Replace and Multi-select Layer Search in Figma
03:59
006 How to Bulk Rename Layers with advanced tricks in Figma
09:59
10 – Components & Variants – Level 1
0/11
Download Resource Files
001 How to replace instances and variants with shortcuts in Figma
09:00
002 How to use Instance Swap Component Properties with preferred in Figma
07:03
003 How to use Component Text Property in Figma
02:22
004 How to use Boolean Component Property in Figma
03:11
005 How to make a input field using only component properties in Figma
10:24
006 How to Combine Variants with Component Properties in Figma
09:39
007 How to apply component properties to existing design systems
08:20
008 What is Simplify Instances in Figma
04:02
009 What does Expose Nested Instances do in Figma
10:17
010 Class project 09 – One button to rule them all
04:17
11 – Typography
0/15
Download Resource Files
001 What are some font tips and tricks in Figma
05:11
002 How to see Live Font Previews in Figma
02:44
003 How reset fonts & set default fonts in Figma
02:20
004 How to Use Line Height Percentage in 8pt grid in Figma
04:43
005 How to use Leading trim to cap height to baseline in Figma
04:17
006 How to set Hanging Punctuation for pull quotes & call outs in Figma
01:04
007 What are the Advanced Type Options in Figma
09:40
008 How to use Variable Type in UX app design in Figma_part1
04:15
008 How to use Variable Type in UX app design in Figma_part2_part1
02:07
008 How to use Variable Type in UX app design in Figma_part2_part2
02:07
009 How to curve text with type on a path in Figma
06:46
010 How to use adobe fonts & local fonts in Figma
04:53
011 How to Preserve text overrides or not in Figma variant
04:42
012 How to use Chat GPT AI to create placeholder and personas in Figma
03:49
12 – Imagery
0/21
Download Resource Files
001 How to create an image style in Figma
03:48
002 What’s the difference with Images inside frames vs fills vs Masked in Figma
04:16
003 How to crop images using shortcuts in Figma
02:13
004 How to mask images with text in Figma_part1
03:11
004 How to mask images with text in Figma_part2
03:11
005 Class Project 10 – Text Mask
02:50
006 How to mask using transparent pngs with alpha channels in Figma_part1
03:18
006 How to mask using transparent pngs with alpha channels in Figma_part2
03:18
007 Class Project 11 – Alpha Mask
01:23
008 How to create a luma mask in Figma
03:02
009 Class project 12 – Luma Mask
01:01
010 How to make a spillover mask outside of the frame in Figma_part1
03:17
010 How to make a spillover mask outside of the frame in Figma_part2
03:17
010 How to make a spillover mask outside of the frame in Figma_part3_part1
01:38
010 How to make a spillover mask outside of the frame in Figma_part3_part2
01:38
011 How to use the pen tool to make image masks in Figma
11:06
012 How to use color layer blending modes in Figma_part1
04:37
012 How to use color layer blending modes in Figma_part2_part1
02:18
012 How to use color layer blending modes in Figma_part2_part2
02:18
013 Class project 13 – Social Ad
02:29
13 – Video
0/10
Download Resource Files
001 How to add video in Figma_part1
04:04
001 How to add video in Figma_part2
04:04
002 How to make a background autoplay video in Figma
01:46
003 How to get a video play when you hover in Figma
04:30
004 Class project 14 – Hover Play
00:54
005 How to make a play pause button for video in Figma_part1
03:45
005 How to make a play pause button for video in Figma_part2
03:45
006 How to build a video card in Figma
08:39
007 Class project 15 – Video Card
02:29
14 – Color
0/5
Download Resource Files
001 What are some advanced color tricks in figma
06:27
002 How to change replace colors in Figma_part1
04:28
002 How to change replace colors in Figma_part2
04:28
003 How to create Color Themes for light and dark in Figma
02:16
15 – Styles & Libraries
0/10
Download Resource Files
001 How to group color styles using slashes or folders in Figma
02:35
002 How to descriptions to your styles in Figma for others to use
02:39
003 Editing someone else’s styles or component library in Figma
04:31
004 How to hide color font styles & components from team library in Figma
04:46
005 How to compare changes in component with overlay in Figma
03:53
006 How to refactoring styles to another design file in Figma
04:10
007 How to move relink refactoring components to another design file in Figma_part1
02:51
007 How to move relink refactoring components to another design file in Figma_part2
02:51
008 How to swap parts or entire component & style library in Figma
06:12
16 – Drawing, Stroke & Fill
0/7
Download Resource Files
001 What are some advanced drawing tips and tricks in figma
07:47
002 How to draw in Figma with the pen tool- Anchor point mastery
07:25
003 How to draw with Bend & Mirror angle in Figma
02:50
004 Can you animated anchor points or booleans in Figma
03:01
005 How to animate a mobile nav menu in Figma using a dip
14:14
006 Class project 16 – Alt Nav Animation
01:08
17 – Auto Layout – Level 2
0/12
Download Resource Files
001 How to overlap & stack things in a Figma Autolayout
03:17
002 What are the shortcuts for hug & fill in Figma
03:37
003 How to set absolute spacing so things ignore Autolayout in Figma
02:48
004 How to absolute position something that is responsive in Figma
02:24
005 How stick things to the bottom right of an auto layout in Figma
04:03
006 How to resize a box automatically in a Auto Layout to match text in Figma
04:53
007 What are the autolayout padding and resizing shortcuts
01:52
008 How to create a minimum width height button in Figma
03:56
009 How to wrap auto layout objects in Figma
01:42
010 What does stroke included excluded mean in Figma auto layout
02:01
011 How to set custom spacing in auto layouts in Figma
03:32
18 – Components & Variants – Level 2
0/4
Download Resource Files
001 How to organize Components into groups in Figma
05:58
002 How to create slot placehold components in Figma
07:22
003 How to convert an existing website into a figma design
05:05
19 – Prototyping – Level 2
0/15
Download Resource Files
001 How to make a drop down using overlays in Figma_part1
07:00
001 How to make a drop down using overlays in Figma_part2
07:00
002 How to make a multi level drop down menu in Figma
14:16
003 Class project 17 – Nested Dropdown Menu
01:47
004 How to create a hover grow effect for images in Figma_part1
04:36
004 How to create a hover grow effect for images in Figma_part2
04:36
004 How to create a hover grow effect for images in Figma_part3
04:36
004 How to create a hover grow effect for images in Figma_part4_part1
02:18
004 How to create a hover grow effect for images in Figma_part4_part2_part1
01:09
004 How to create a hover grow effect for images in Figma_part4_part2_part2
01:09
005 Class project 18 – Hover Grow Effect
02:15
006 How to make an expanding Search Bar in Figma_part1
05:13
006 How to make an expanding Search Bar in Figma_part2
05:13
007 Class project 19 – Expanding Search Bar
00:56
20 – Variables
0/9
Download Resource Files
001 What are Variables in Figma
03:26
002 How to create cart total using number variables in Figma
05:41
003 How to add add conditions to variables in Figma
02:27
004 Variant change using Boolean variable – change cart color
05:42
005 Turning our boolean variable to false in Figma
01:50
006 Making a Overlay Popup in the Variable action panel in Figma
02:53
007 Light and Dark Modes using Collections & Color Variables in Figma
07:05
008 How to change spacing with number Variables in Figma
04:58
21 – Design Tokens
0/6
Download Resource Files
001 What are Design Tokens in Figma
06:51
002 How to create Design Tokens in Figma
09:47
003 Creating spacing & radius design tokens in Figma
07:47
004 When would you use design tokens in Figma_part1
02:33
004 When would you use design tokens in Figma_part2
02:33
22 – Animation – Level 2
0/3
Download Resource Files
001 How do you animate along a path in Figma
11:58
002 How to add Lottie animation files in Figma
04:56
23 – Accessibility
0/4
Download Resource Files
001 Making Your Designs Accessible – A Guide to Accessibility plugin in Figma_part1
05:31
001 Making Your Designs Accessible – A Guide to Accessibility plugin in Figma_part2_part1
02:46
001 Making Your Designs Accessible – A Guide to Accessibility plugin in Figma_part2_part2
02:45
24 – Working with Stakeholders
0/12
Download Resource Files
001 What are some tips for working with colleagues in Figma
06:48
002 How view version history duplicate and restore in Figma
06:08
003 How to archive and restore previous versions of Figma files
04:17
004 How to create & share a flows in Figma
03:33
005 How to use the Slice Tool in Figma
02:43
006 How export uncropped and unscaled images from Figma
03:56
007 How to export webp images from Figma & Photoshop
05:29
008 How to downsize reduce file size of all images in a Figma file
03:04
009 How to document a component in a design system in Figma
04:57
010 How to use DEV Mode in Figma_part1
04:26
010 How to use DEV Mode in Figma_part2
04:26
25 – What Next
0/4
Download Resource Files
001 Class Project 20 – Finish your design
06:10
002 What’s Next – Figma Advanced_part1
01:58
002 What’s Next – Figma Advanced_part2
01:58
Subtitle Guide – Hướng dẫn thêm phụ đề
0/1
Set up subtitle for video – Hướng dẫn thêm phụ đề
Figma UI UX Design Advanced
About Lesson

You can download English Subtitle for topic here (Tải phụ đề tiếng Anh): Click here

You can download resource files for topic here (Tải file tài liệu của topic): Click here

Join the conversation
Previous
Next

Please contact me via telegram

DMCA.com Protection Status