Figma Advanced: Become a Figma Pro
Daniel Walter Scott
Lessons
Intro to the Figma Advanced Course
03:14 2Getting Started in Figma Advanced Course
02:31 3Auto Layout & Responsive Design 101: It's use in responsive design
10:19 4Designing in Figma with Auto Spacing in Auto Layouts
10:07 5When and when not to use Components in Figma
06:00 6What is good spacing to use in Figma
06:58 7What spacing should I use for web & app design in Figma
05:16 8Auto Layout vs Constraints in Figma
03:52Autolayout shortcuts: Tips and tricks to work with Auto Layout faster
03:06 10Class Project 01 - Responsive Lower Navigation
09:49 11How to handle files in Figma and become a File Handling Master
06:39 12How to use advanced Copy, Paste, and Selection Tricks in Figma?
06:35 13How to do crazy things with your Figma fields?
03:33 14Frame Tricks: Tips and Tricks to work with Figma frames effectively
04:40 15Advanced Zooming Techniques in Figma
01:40 16Light or Dark vs System Theme: Which one to use in Figma?
02:29 17Class Project 02 - Event Card Constraints
01:35 18Class Project 02 - Event Card Constraints - Completed
08:40 19Grid vs Constraints vs Auto Layout in Figma
05:16 20Copy, Paste & Export Grid Styles in Figma
05:29 21Add Rows and Column Grids to Layout in Figma
04:19 22How to update Grid Styles in Figma
01:32 23Grids inside of frames that aren't the main frame
03:44 24Class project 03 - Event Branding
04:19 25Logos using Iconscout: How to use Iconscout to create logos in Figma?
06:47 26What are widgets compared to plugins in Figma?
03:33 27How to create UX color variants using a Figma Widget
05:13 28Intro to Nested & Responsive Auto layouts Section
04:01 29Production video - Tidying up my frame & component mess
05:52 30Bring in images using the unsplash plugin in Figma
06:34 31Production video - Making the parts for our nested autolayout
05:36 32Nesting Multiple Auto Layouts inside each other in Figma
05:13 33Autolayout Nesting with variants and responsive text in Figma
08:55 34Auto Layout on different device sizes
09:34 35Responsive text that adjusts for 2 lines in Figma
02:26 36Abstract Gradient Background in Figma the easy way
11:50 37How to copy and paste Interactions in Figma
01:23 38Animate Gradient Mesh Using Variants in Figma
15:42 39How to give feedback on a UX project - The Critique Sandwich
09:00 40Class project 04 - Background Animation
04:50 41Houdini Text: How to make a text mask animation Figma?
08:30 42How to use the Spring Animations in Figma
06:33 43Spring Animation: How to make custom Spring Animation in Figma
12:16 44Why is interaction on tap on click grayed out or missing in Figma?
01:51 45Class project 05 - Houdini Text Animation
01:38 46Create & remove bulk multiple noodles wires at once in Figma
03:05 47Bulk Update Nav Links in Figma Prototypes
03:15 48How to set the right phone and find old prototype phones in Figma
04:01 49How to make sticky scroll position search bar in Figma
06:10 50How to stack multiple sticky text vertical scrolling in Figma
13:56 51Class project 06 - Multiple Sticky Headings
02:25 52How to make Interactive Components in Figma
03:42 53How to make a checkmark turn on and off in Figma
02:38 54Create Interactive Components with Sliding Nav Figma
06:55 55Class project 07 - Sliding Button Nav Challenge
04:14 56Class project 07 - Completed
03:51 57How to use Sections in Figma for organizing your content
04:49 58How to use sections for prototyping in Figma
06:38 59How to add iOS battery wifi notch status bar to Figma
07:11 60How to add iOS or Android Snack Bar UI to Figma
10:38 61Class project 08 - Operating System UI
01:47 62Be careful what you create in Figma
03:43 63What are the advanced Layer shortcuts in Figma
07:38 64How to find layer Zen shortcuts in Figma
04:37 65How to hide and lock unlock all layers in Figma
01:05 66How to use Locked layers in Figma
02:11 67How to Find Replace and Multi-select Layer Search in Figma
03:58 68How to Bulk Rename Layers with advanced tricks in Figma
09:57 69How to replace instances and variants with shortcuts in Figma
08:58 70How to use Instance Swap Component Properties with preferred in Figma
07:01 71How to use Component Text Property in Figma
02:21 72How to use Boolean Component Property in Figma
03:10 73Input Fields Using Component Properties in Figma
09:52 74How to Combine Variants with Component Properties in Figma
09:37 75How to apply component properties to existing design systems
08:18 76What is Simplify Instances in Figma
04:01 77What does Expose Nested Instances do in Figma
10:15 78Class project 09 - One button to rule them all
04:16 79What are some font tips and tricks in Figma
05:10 80How to truncate text and set max lines in Figma
02:44 81How reset fonts & set default fonts in Figma
02:20 82How to Use Line Height Percentage in 8pt grid in Figma
04:42 83How to use Leading trim to cap height to baseline in Figma
04:16 84How to set Hanging Punctuation for pull quotes & call outs in Figma
01:04 85What are the Advanced Type Options in Figma
09:38 86How to use Variable Type in UX app design in Figma
07:38 87How to curve text with type on a path in Figma
06:44 88How to use adobe fonts & local fonts in Figma
04:52 89How to Preserve text overrides or not in Figma variant
04:42 90How to use Chat GPT AI to create placeholder and personas in Figma
03:48 91How to create an image style in Figma
03:47 92What's the difference with Images inside frames vs fills vs Masked in Figma
04:15 93How to crop images using shortcuts in Figma
02:13 94How to mask images with text in Figma
06:21 95Class Project 10 - Text Mask
02:49 96How to mask using transparent PNGs with alpha channels in Figma
06:35 97Class Project 11 - Alpha Mask
01:23 98How to create a luma mask in Figma
03:02 99Class project 12 - Luma Mask
01:00 100How to make a spillover mask outside of the frame in Figma
09:49 101How to use the pen tool to make image masks in Figma
11:04 102How to use color layer blending modes in Figma
09:13 103Class project 13 - Social Ad
02:28 104How to add video in Figma
08:05 105How to make a background autoplay video in Figma
01:45 106How to get a video play when you hover in Figma
04:29 107Class project 14 - Hover Play
00:54 108How to make a play pause button for video in Figma
07:28 109How to build a video card in Figma
08:38 110Class project 15 - Video Card
02:28 111What are some advanced color tricks in Figma
06:26 112How to change replace colors in Figma
08:56 113How to create Color Themes for light and dark in Figma
02:16 114How to group color styles using slashes or folders in Figma
02:35 115How to add descriptions to your styles in Figma for others to use
02:39 116Editing someone else's styles or component library in Figma
04:30 117How to hide color font styles & components from team library in Figma
04:45 118How to compare changes in component with overlay in Figma
03:52 119How to refactoring styles to another design file in Figma
04:09 120How to move relink refactoring components to another design file in Figma
05:40 121How to swap parts or entire component & style library in Figma
06:10 122What are some advanced drawing tips and tricks in Figma
07:46 123How to draw in Figma with the pen tool- Anchor point mastery
07:24 124How to draw with Bend & Mirror angle in Figma
02:49 125Can you animate anchor points or booleans in Figma
03:00 126How to animate a mobile nav menu in Figma using a dip
14:12 127Class project 16 - Alt Nav Animation
01:08 128How to overlap & stack things in a Figma Autolayout
03:16 129What are the shortcuts for hug & fill in Figma
03:36 130How to set absolute spacing so things ignore Autolayout in Figma
02:47 131How to absolute position something that is responsive in Figma
02:23 132How stick things to the bottom right of an auto layout in Figma
04:02 133How to resize a box automatically in a Auto Layout to match text in Figma
04:52 134What are the autolayout padding and resizing shortcuts
01:51 135How to create a minimum width height button in Figma
03:55 136How to wrap auto layout objects in Figma
01:42 137What does stroke included excluded mean in Figma auto layout
02:00 138How to set custom spacing in auto layouts in Figma
03:15 139How to organize Components into groups in Figma
05:57 140How to create slot placeholder components in Figma
07:21 141How to convert an existing website into a Figma design
05:04 142How to make a drop down using overlays in Figma
13:58 143How to make a multi level drop down menu in Figma
14:14 144Class project 17 - Nested Dropdown Menu
01:47 145How to create a hover grow effect for images in Figma
18:22 146Class project 18 - Hover Grow Effect
02:15 147How to make an expanding Search Bar in Figma
10:25 148Class project 19 - Expanding Search Bar
00:56 149What are Variables in Figma
03:26 150How to create cart total using number variables in Figma
05:40 151How to add add conditions to variables in Figma
02:26 152Variant change using Boolean variable - change cart color
05:41 153Turning our boolean variable to false in Figma
01:50 154Making a Overlay Popup in the Variable action panel in Figma
02:53 155Light and Dark Modes using Collections & Color Variables in Figma
07:04 156How to change spacing with Number Variables in Figma
04:57 157What are Design Tokens in Figma
06:50 158How to create Design Tokens in Figma
09:46 159Creating spacing & radius design tokens in Figma
07:46 160When would you use design tokens in Figma
05:06Class Description
AFTER THIS CLASS YOU’LL BE ABLE TO:
Utilize workflow techniques, managing design assets, styles, components, grid and column layouts like true virtuosos.
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.
Take your new knowledge of variables to understand and create your own Design Tokens.
Unleash 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.
Craft responsive elements that effortlessly adapt to any device, proving your design prowess knows no bounds.
Unleash the full potential of powerful images & video masking techniques, amplifying the visual impact of your creations.
Master advanced typography features, transforming words into captivating works of art.
Embrace 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.
Use sticky scroll buttons that stack, animated anchor points and booleans, and a host of other captivating effects.
Create enchanting dropdown menus, hover grow effects for images, and expanding search bars.
Utilize the right accessibility tools & techniques, ensuring inclusivity and usability for all users.
Use variants like a boss, expertly taming unwieldy variants to just 1 or 2.
Participate in seamless collaboration with designers, developers, and stakeholders.
Master the art of exporting production-ready assets, bringing your designs to life beyond the realm of Figma.
Make us of professional workflow tricks & shortcuts, saving you precious time and skyrocketing your efficiency.
ABOUT DANIEL’S CLASS:
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.
WHO THIS CLASS IS FOR:
UX/UI adventurers who already have a basic understanding of Figma.
Self-taught Figma enthusiasts yearning for structured guidance.
Graduates of my Figma Essentials Course, hungry for more knowledge and skills.
Visionaries who have developed their own unique Figma approach but crave exploration of the vast universe of tools, updates, and time-saving techniques.
SOFTWARE USED:
Try Figma for free by clicking here.Class Materials
Bonus Materials