Black Friday Sale: Join BYOL & save 30%: https://byol.com/ytbf25
Join BYOL for the full Figma Advanced course and get 10% off: https://byol.com/figa26a1b
Try Figma for Free: https://byol.com/figf
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?
We’re not just moving boxes around here – you’re actually going to build something. In this course, you’ll get your own project brief and persona, and by the end, you’ll have a complete app ready to drop straight into your portfolio.
We’ll kick things off by using AI inside Figma to move fast — the kind of efficiency that saves you hours, not minutes. Then we’ll dive deep into Auto Layout and constraints, the tools that separate amateurs from pros. You’ll learn how to make responsive pages that flex, adapt, and update automatically, no matter the screen or content.
Next, you’ll master components and variables so solid they’re almost impossible to break. We’ll add visual punch with effects, typography, and micro-animations that give your designs instant polish and impact. You’ll also learn workflow hacks to manage your assets, grids, and styles like a seasoned professional, and I’ll even show you a few hardware setups that make you faster (and make you look good while you’re at it).
Once you’ve got the basics locked in, we’ll take things further. You’ll become a variant boss, building light and dark modes, compact and comfortable layouts, all with a single click. We’ll explore advanced animation, masking, and video techniques, the kind of creative power most designers don’t even realize Figma can deliver.
Join the Bring Your Own Laptop Facebook Group: https://www.byol.com/FB
Follow me on Instagram: https://www.byol.com/IG
Follow me on TikTok: https://www.byol.com/tiktok/
Follow me on Twitter: https://twitter.com/danlovesadobe
Join the LinkedIn Group: https://www.byol.com/LINKEDIN/
What you’ll learn:
AI & Interaction Design
– First Draft & Add Interactions Using AI
– Suggest Auto Layout, Replace Content, Duplicate & Rename Layers (AI)
– AI Add Interactions Automatically
Layout & Auto Layout Mastery
– Working with Complex Layouts
– Nested & Responsive Auto Layouts
– Auto Layout Grids
– Grid vs Constraints vs Auto Layout — Which One to Use and When?
– How to Add Rows and Column Grids to One Layout
– How to Create & Update Layout Guide Styles for Columns & Rows
– How to Overlap & Stack Using Auto Layout
– Ignore Auto Layout to Absolute Spacing
– Minimum & Maximum Width/Heights
– How to Wrap Auto Layout Objects
Components, Variables & Variants
– Using Variants
– Multi-Dimensional Variants
– Variable – Light and Dark Modes
– Cart Totals Using Number Variables
– Conditions in Variables
– Boolean Variables
– Overlay Popups
– Spacing with Number Variables
– Boolean Component Properties
– Form Fields with Component Properties
– Instance Swap Inside a Component
– Organizing Components
Design Techniques & Visual Effects
– Liquid Glass Effect
– Texture, Noise & Effect
– Progressive Blur Effect
– Saving Effect Styles & Clearing Unused Styles
– Houdini Text
– Spring Animation & Overlays
– Masking Images Using AI Remove Background
– Spillover Masks
– Mask Images with Text
– Colour Layer Blending Modes
– Curving Text
– Vertical Trim
– Truncation
Animation & Interactions
– Custom Easing
– Animation Inside Variants
– Sticky Scroll Position Search Bars
– Horizontal Scrolling/Swipe
– Automatic Scroll Down to Anchor Point
– Interactive Components
Video & Media
– Working with Video
– Play/Pause Video Controls
– Video to Play on Hover
Typography & Color Systems
– Advanced Color Tricks
– Change/Replace Colors
– Color Themes for Light and Dark
– What is Good Spacing for Web & App Design
Accessibility
– Making Your Designs Accessible
Drawing & Vector Tools
– Advanced Drawing Tips and Tricks
– Variable Width Tool & Simplify Stroke
Workflow, Collaboration & Handoff
– Workflow Tips & Tricks
– Advanced Copy, Paste, and Selection Tricks
– Frame Tips and Tricks
– Sections
– Layer Zen in Figma
– Advanced Search
– Bulk Rename Layers
– How to Use Dev Mode
– Document a Component in a Design System
– Version History
– Slice Tool
– Team Libraries
– Refactoring Components
– Forum support from me and the rest of the BYOL crew.
– All the techniques used by UX professionals
– 160 videos of detailed Figma Advanced Content.
#Figma #figmatutorial #uiuxdesign
source
