English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 176 lectures (16h 9m) | 4.91 GB
Become a Figma Pro with our in-depth Advanced Figma tutorial course. Discover advanced design strategies & so much more!
Hi there, aspiring Figma enthusiasts! Are you ready to embark on an exhilarating journey with me, Dan Scott, as we unlock the full potential of our Figma skills in the dazzling realm of UX/UI Design using Figma Advanced?
This course is tailor-made for those who have already mastered the fundamental principles of UI/UX Design using Figma. If you’ve triumphed over my Figma Essentials course or have a sneaking suspicion that there’s a treasure trove of unexplored tools, tips, workflows, and updates awaiting your discovery, then look no further! This course is your golden ticket to taking your UI/UX prowess to the next level.
Together, we’ll start by delving into the depths of multilevel nested autolayouts, and unravel the secrets used by UX professionals by learning:
- Workflow techniques, managing design assets, styles, components, grid and column layouts like true virtuosos.
- Learn how to use Variables and put them to work creating even more complete prototypes.
- Use variables to make Light & Dark Modes + Compact & Comfortable spacing versions of your components.
- You’ll then take your new knowledge of variables to understand and create your own Design Tokens.
- Unleashing the magic of advanced animation techniques, captivating users with animated background gradients and Houdini Text.
- Harness the power of Lottie animation files, breathing life into your designs.
- Crafting responsive elements that effortlessly adapt to any device, proving your design prowess knows no bounds.
- Unleashing the full potential of powerful images & video masking techniques, amplifying the visual impact of your creations.
- Mastering advanced typography features, transforming words into captivating works of art.
- Embracing the realm of AI, infusing your process with its genius to elevate your skills as a UX designer.
- Elevate your prototyping game, conducting user tests with finesse using advanced techniques.
- Unveiling sticky scroll buttons that stack, animated anchor points and booleans, and a host of other captivating effects.
- Creating enchanting dropdown menus, hover grow effects for images, and expanding search bars.
- Discovering the right accessibility tools & techniques, ensuring inclusivity and usability for all users.
- Becoming a variant boss, expertly taming unwieldy variants to just 1 or 2.
- Unveiling the secrets of seamless collaboration with designers, developers, and stakeholders.
- Mastering the art of exporting production-ready assets, bringing your designs to life beyond the realm of Figma.
- Unearthing professional workflow tricks & shortcuts, saving you precious time and skyrocketing your efficiency.
- Plus much more exciting advanced Figma goodness along the way!
As you journey through this course, you’ll acquire the skills wielded by UX professionals, gaining a profound understanding of the UX Design industry. From concept to a highly polished finish, you’ll confidently manage your own UX projects ideal for your portfolio.
Throughout the course, I’ll assign assignments and projects that nurture your skills and empower you to create your very own unique UX design masterpiece for your portfolio. Don’t worry if this all seems overwhelmingly advanced right now, because the BYOL crew stands ready to support and guide you, ensuring your questions get answered.
It’s time to embrace the call to upgrade yourself and transcend from being a good UX Designer to a bona fide Figma UX Superhero! Unlock your potential, save the day, and let your design prowess soar!
Table of Contents
Introduction
1 Intro to the Figma Advanced Course
2 Getting Started in Figma Advanced Course
Auto Layout – Level 1
3 Auto Layout & Responsive Design 101 It’s use in responsive design
4 Designing in Figma with Auto Spacing in Auto Layouts
5 When and when not to use Components in Figma
6 What is good spacing to use in Figma
7 What spacing should I use for web & app design in Figma
8 Auto Layout vs Constraints in Figma
9 Autolayout shortcuts Tips and tricks to work with Auto Layout faster
10 Class Project 01 – Responsive Lower Navigation
Advanced Workflow Tricks
11 How to handle files in Figma and become a File Handling Master
12 How to use advanced Copy, Paste, and Selection Tricks in Figma
13 How to do crazy things with your Figma fields
14 Frame Tricks Tips and Tricks to work with Figma frames effectively
15 Advanced Zooming Techniques for precision work in Figma
16 Light or Dark vs System Theme Which one to use in Figma
17 Class Project 02 – Event Card Constraints
18 Class Project 02 – Event Card Constraints – Completed
Grids
19 Grid v Constraints v Autolayout in Figma Which one to use and when
20 How to copy & paste grids and export grid styles in Figma
21 How to add rows and column grids to one layout in Figma
22 How to update Grid Styles in Figma
23 Grids inside of frames that aren’t the main frame
Simple App Brand
24 Class project 03 – Event Branding
25 Logos using Iconscout How to use Iconscout to create logos in Figma
26 What are widget compared to plugins in Figma
27 How to create ux color variants using a Figma Widget
Nested & Responsive Auto layouts
28 Intro to Nested & Responsive Auto layouts Section
29 Production video – Tidying up my frame & component mess
30 Bring in images using the unsplash plugin in Figma
31 Production video – Making the parts for our nested autolayout
32 Nesting Multiple Auto Layouts inside each other in Figma
33 Autolayout Nesting with variants and responsive text in Figma
34 Auto Layout on different device sizes- How to make advanced Auto Layouts
35 Responsive text that adjusts for 2 lines in Figma
Animation – Level 1
36 Abstract Gradient Background in Figma the easy way
37 How to copy and paste Interactions in Figma
38 How to animate gradient mesh using Variants in Figma
39 How to give feedback on a UX project – The Critique Sandwich
40 Class project 04 – Background Animation
41 Houdini Text How to make a text mask animation Figma
42 How to use the Spring Animations in Figma
43 Spring Animation How to make custom Spring Animation in Figma
44 Why is interaction on tap on click grayed out of missing in Figma
45 Class project 05 – Houdini Text Animation
Prototyping – Level 1
46 Create & remove bulk multiple noodles wires at once in Figma
47 How to bulk update nav links in your Figma prototype
48 How to set the right phone and find old prototype phones in Figma
49 How to make sticky scroll position search bar in Figma
50 How to stack multiple sticky text vertical scrolling in Figma
51 Class project 06 – Multiple Sticky Headings
52 How to make Interactive Components in Figma
53 How to make a checkmark turn on and off in Figma
54 Interactive components with sliding button in navigation for Figma
55 Class project 07 – Sliding Button Nav Challenge
56 Class project 07 – Completed
57 How to use Sections in Figma for organizing your content
58 How to use sections for prototyping in Figma
59 How to add iOS battery wifi notch status bar to Figma
60 How to add iOS or Android Snack Bar UI to Figma
61 Class project 08 – Operating System UI
62 Be careful what you create in Figma
Advanced Layers
63 What are the advanced Layer shortcuts in Figma
64 How to find layer Zen shortcuts in Figma
65 How to hide and lock unlock all layers in Figma
66 How to use Locked layers in Figma
67 How to Find Replace and Multi-select Layer Search in Figma
68 How to Bulk Rename Layers with advanced tricks in Figma
Components & Variants – Level 1
69 How to replace instances and variants with shortcuts in Figma
70 How to use Instance Swap Component Properties with preferred in Figma
71 How to use Component Text Property in Figma
72 How to use Boolean Component Property in Figma
73 How to make a input field using only component properties in Figma
74 How to Combine Variants with Component Properties in Figma
75 How to apply component properties to existing design systems
76 What is Simplify Instances in Figma
77 What does Expose Nested Instances do in Figma
78 Class project 09 – One button to rule them all
Typography
79 What are some font tips and tricks in Figma
80 How to see Live Font Previews in Figma
81 How reset fonts & set default fonts in Figma
82 How to Use Line Height Percentage in 8pt grid in Figma
83 How to use Leading trim to cap height to baseline in Figma
84 How to set Hanging Punctuation for pull quotes & call outs in Figma
85 What are the Advanced Type Options in Figma
86 How to use Variable Type in UX app design in Figma
87 How to curve text with type on a path in Figma
88 How to use adobe fonts & local fonts in Figma
89 How to Preserve text overrides or not in Figma variant
90 How to use Chat GPT AI to create placeholder and personas in Figma
Imagery
91 How to create an image style in Figma
92 What’s the difference with Images inside frames vs fills vs Masked in Figma
93 How to crop images using shortcuts in Figma
94 How to mask images with text in Figma
95 Class Project 10 – Text Mask
96 How to mask using transparent pngs with alpha channels in Figma
97 Class Project 11 – Alpha Mask
98 How to create a luma mask in Figma
99 Class project 12 – Luma Mask
100 How to make a spillover mask outside of the frame in Figma
101 How to use the pen tool to make image masks in Figma
102 How to use color layer blending modes in Figma
103 Class project 13 – Social Ad
Video
104 How to add video in Figma
105 How to make a background autoplay video in Figma
106 How to get a video play when you hover in Figma
107 Class project 14 – Hover Play
108 How to make a play pause button for video in Figma
109 How to build a video card in Figma
110 Class project 15 – Video Card
Color
111 What are some advanced color tricks in figma
112 How to change replace colors in Figma
113 How to create Color Themes for light and dark in Figma
Styles & Libraries
114 How to group color styles using slashes or folders in Figma
115 How to descriptions to your styles in Figma for others to use
116 Editing someone else’s styles or component library in Figma
117 How to hide color font styles & components from team library in Figma
118 How to compare changes in component with overlay in Figma
119 How to refactoring styles to another design file in Figma
120 How to move relink refactoring components to another design file in Figma
121 How to swap parts or entire component & style library in Figma
Drawing, Stroke & Fill
122 What are some advanced drawing tips and tricks in figma
123 How to draw in Figma with the pen tool- Anchor point mastery
124 How to draw with Bend & Mirror angle in Figma
125 Can you animated anchor points or booleans in Figma
126 How to animate a mobile nav menu in Figma using a dip
127 Class project 16 – Alt Nav Animation
Auto Layout – Level 2
128 How to overlap & stack things in a Figma Autolayout
129 What are the shortcuts for hug & fill in Figma
130 How to absolute position something that is responsive in Figma
131 How stick things to the bottom right of an auto layout in Figma
132 How to resize a box automatically in a Auto Layout to match text in Figma
133 What are the autolayout padding and resizing shortcuts
134 How to create a minimum width height button in Figma
135 How to wrap auto layout objects in Figma
136 What does stroke included excluded mean in Figma auto layout
137 How to set custom spacing in auto layouts in Figma
Components & Variants – Level 2
138 How to organize Components into groups in Figma
139 How to create slot placehold components in Figma
140 How to convert an existing website into a figma design
Prototyping – Level 2
141 How to make a drop down using overlays in Figma
142 How to make a multi level drop down menu in Figma
143 Class project 17 – Nested Dropdown Menu
144 How to create a hover grow effect for images in Figma
145 Class project 18 – Hover Grow Effect
146 How to make an expanding Search Bar in Figma
147 Class project 19 – Expanding Search Bar
Variables
148 What are Variables in Figma
149 How to create cart total using number variables in Figma
150 How to add add conditions to variables in Figma
151 Variant change using Boolean variable – change cart color
152 Turning our boolean variable to false in Figma
153 Making a Overlay Popup in the Variable action panel in Figma
154 Light and Dark Modes using Collections & Color Variables in Figma
155 How to change spacing with number Variables in Figma
Design Tokens
156 What are Design Tokens in Figma
157 How to create Design Tokens in Figma
158 Creating spacing & radius design tokens in Figma
159 When would you use design tokens in Figma
Animation – Level 2
160 How do you animate along a path in Figma
161 How to add Lottie animation files in Figma
Accessibility
162 Making Your Designs Accessible – A Guide to Accessibility plugin in Figma
Working with Stakeholders
163 What are some tips for working with colleagues in Figma
164 How view version history duplicate and restore in Figma
165 How to archive and restore previous versions of Figma files
166 How to create & share a flows in Figma
167 How to use the Slice Tool in Figma
168 How export uncropped and unscaled images from Figma
169 How to export webp images from Figma & Photoshop
170 How to downsize reduce file size of all images in a Figma file
171 How to document a component in a design system in Figma
172 How to use DEV Mode in Figma
What Next
173 Class Project 20 – Finish your design
174 What’s Next – Figma Advanced
175 Continue learning with me! Links inside
Resolve the captcha to access the links!