003 How to use Component Text Property in Figma

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

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

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

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

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

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

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

003 How to animate gradient mesh using Variants in Figma_part2_part2

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

006 Houdini Text How to make a text mask animation Figma_part2

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

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

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

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

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

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

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

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

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

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

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

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

007 What are the autolayout padding and resizing shortcuts

01:52

008 How to create a minimum width height button in Figma

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

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

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

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

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

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

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

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

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