Figma UI UX Design Advanced

About Course

Enhance your UX/UI Design skills with this advanced Figma course, completely **FREE** on Theetay! This comprehensive guide is perfect for those who have already mastered the fundamentals of UI/UX Design using Figma. Whether you’ve completed a Figma Essentials course or simply want to explore the advanced features of Figma, this course has something for you.

Dive deep into multilevel nested autolayouts, learn workflow techniques, master variables, and create your own Design Tokens. Unleash the magic of advanced animation techniques, crafting captivating user experiences with animated background gradients and Houdini Text. Become proficient in Lottie animation files, responsive design, image & video masking techniques, and advanced typography. Explore the power of AI to elevate your design process and conduct user tests with finesse using advanced prototyping techniques.

Master advanced features like sticky scroll buttons, animated anchor points, dropdown menus, hover effects, expanding search bars, and accessibility tools. Learn efficient workflow tricks and shortcuts, saving you time and maximizing your productivity. This course covers everything you need to confidently manage your own UX projects and build a strong portfolio.

Learn to:

Master multilevel nested autolayouts
Utilize advanced workflow techniques
Create Design Tokens using variables
Animate your designs with Lottie files
Design for responsiveness across devices
Implement advanced masking techniques
Explore advanced typography features
Use AI to enhance your UX design process
Conduct user tests with advanced techniques
Create captivating scroll effects and interactions
Master accessibility tools and techniques
Optimize your workflow with time-saving shortcuts
Export production-ready assets
And much more!

This course is available on Theetay, a platform offering top-rated online courses from platforms like Udemy, Udacity, Coursera, MasterClass, NearPeer, and more, all **completely free of cost**.

Requirements:

A copy of Figma (a free plan is available on the Figma website)
Basic knowledge of Figma

Who this course is for:

UX/UI designers with a basic understanding of Figma
Self-taught Figma enthusiasts
Graduates of Figma Essentials courses
Experienced Figma users looking to explore advanced techniques

Enroll now and unlock your potential as a Figma UX Superhero!

Workflow techniques, managing design assets, styles, components, grid and column layouts like true virtuosos.
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!

Course Content

01 – Introduction

A Message from the Professor
001 Intro to the Figma Advanced Course.mp4

00:00
002 Getting Started in Figma Advanced Course.mp4

00:00
Section Quiz

02 – Auto Layout – Level 1

001 Auto Layout & Responsive Design 101 It’s use in responsive design.mp4

00:00
002 Designing in Figma with Auto Spacing in Auto Layouts.mp4

00:00
003 When and when not to use Components in Figma.mp4

00:00
004 What is good spacing to use in Figma.mp4

00:00
005 What spacing should I use for web & app design in Figma.mp4

00:00
006 Auto Layout vs Constraints in Figma.mp4

00:00
007 Autolayout shortcuts Tips and tricks to work with Auto Layout faster.mp4

00:00
008 Class Project 01 – Responsive Lower Navigation.mp4

00:00

03 – Advanced Workflow Tricks

001 How to handle files in Figma and become a File Handling Master.mp4

00:00
002 How to use advanced Copy, Paste, and Selection Tricks in Figma.mp4

00:00
003 How to do crazy things with your Figma fields.mp4

00:00
004 Frame Tricks Tips and Tricks to work with Figma frames effectively.mp4

00:00
005 Advanced Zooming Techniques for precision work in Figma.mp4

00:00
006 Light or Dark vs System Theme Which one to use in Figma.mp4

00:00
007 Class Project 02 – Event Card Constraints.mp4

00:00
008 Class Project 02 – Event Card Constraints – Completed.mp4

00:00
Section Quiz

04 – Grids

05 – Simple App Brand

06 – Nested & Responsive Auto layouts

001 Intro to Nested & Responsive Auto layouts Section.mp4

00:00
002 Production video – Tidying up my frame & component mess.mp4

00:00
003 Bring in images using the unsplash plugin in Figma.mp4

00:00
004 Production video – Making the parts for our nested autolayout.mp4

00:00
005 Nesting Multiple Auto Layouts inside each other in Figma.mp4

00:00
006 Autolayout Nesting with variants and responsive text in Figma.mp4

00:00
007 Auto Layout on different device sizes- How to make advanced Auto Layouts.mp4

00:00
008 Responsive text that adjusts for 2 lines in Figma.mp4

00:00
Section Quiz

07 – Animation – Level 1

001 Abstract Gradient Background in Figma the easy way.mp4

00:00
002 How to copy and paste Interactions in Figma.mp4

00:00
003 How to animate gradient mesh using Variants in Figma.mp4

00:00
004 How to give feedback on a UX project – The Critique Sandwich.mp4

00:00
005 Class project 04 – Background Animation.mp4

00:00
006 Houdini Text How to make a text mask animation Figma.mp4

00:00
007 How to use the Spring Animations in Figma.mp4

00:00
008 Spring Animation How to make custom Spring Animation in Figma.mp4

00:00
009 Why is interaction on tap on click grayed out of missing in Figma.mp4

00:00
010 Class project 05 – Houdini Text Animation.mp4

00:00
Section Quiz

08 – Prototyping – Level 1

001 Create & remove bulk multiple noodles wires at once in Figma.mp4

00:00
002 How to bulk update nav links in your Figma prototype.mp4

00:00
003 How to set the right phone and find old prototype phones in Figma.mp4

00:00
004 How to make sticky scroll position search bar in Figma.mp4

00:00
005 How to stack multiple sticky text vertical scrolling in Figma.mp4

00:00
006 Class project 06 – Multiple Sticky Headings.mp4

00:00
007 How to make Interactive Components in Figma.mp4

00:00
008 How to make a checkmark turn on and off in Figma.mp4

00:00
009 Interactive components with sliding button in navigation for Figma.mp4

00:00
010 Class project 07 – Sliding Button Nav Challenge.mp4

00:00
011 Class project 07 – Completed.mp4

00:00
012 How to use Sections in Figma for organizing your content.mp4

00:00
013 How to use sections for prototyping in Figma.mp4

00:00
014 How to add iOS battery wifi notch status bar to Figma.mp4

00:00
015 How to add iOS or Android Snack Bar UI to Figma.mp4

00:00
016 Class project 08 – Operating System UI.mp4

00:00
017 Be careful what you create in Figma.mp4

00:00

09 – Advanced Layers

10 – Components & Variants – Level 1

001 How to replace instances and variants with shortcuts in Figma.mp4

00:00
002 How to use Instance Swap Component Properties with preferred in Figma.mp4

00:00
003 How to use Component Text Property in Figma.mp4

00:00
004 How to use Boolean Component Property in Figma.mp4

00:00
005 How to make a input field using only component properties in Figma.mp4

00:00
006 How to Combine Variants with Component Properties in Figma.mp4

00:00
007 How to apply component properties to existing design systems.mp4

00:00
008 What is Simplify Instances in Figma.mp4

00:00
009 What does Expose Nested Instances do in Figma.mp4

00:00
010 Class project 09 – One button to rule them all.mp4

00:00
Section Quiz

11 – Typography

001 What are some font tips and tricks in Figma.mp4

00:00
002 How to see Live Font Previews in Figma.mp4

00:00
003 How reset fonts & set default fonts in Figma.mp4

00:00
004 How to Use Line Height Percentage in 8pt grid in Figma.mp4

00:00
005 How to use Leading trim to cap height to baseline in Figma.mp4

00:00
006 How to set Hanging Punctuation for pull quotes & call outs in Figma.mp4

00:00
007 What are the Advanced Type Options in Figma.mp4

00:00
008 How to use Variable Type in UX app design in Figma.mp4

00:00
009 How to curve text with type on a path in Figma.mp4

00:00
010 How to use adobe fonts & local fonts in Figma.mp4

00:00
011 How to Preserve text overrides or not in Figma variant.mp4

00:00
012 How to use Chat GPT AI to create placeholder and personas in Figma.mp4

00:00
Section Quiz

12 – Imagery

001 How to create an image style in Figma.mp4

00:00
002 What’s the difference with Images inside frames vs fills vs Masked in Figma.mp4

00:00
003 How to crop images using shortcuts in Figma.mp4

00:00
004 How to mask images with text in Figma.mp4

00:00
005 Class Project 10 – Text Mask.mp4

00:00
006 How to mask using transparent pngs with alpha channels in Figma.mp4

00:00
007 Class Project 11 – Alpha Mask.mp4

00:00
008 How to create a luma mask in Figma.mp4

00:00
009 Class project 12 – Luma Mask.mp4

00:00
010 How to make a spillover mask outside of the frame in Figma.mp4

00:00
011 How to use the pen tool to make image masks in Figma.mp4

00:00
012 How to use color layer blending modes in Figma.mp4

00:00
013 Class project 13 – Social Ad.mp4

00:00
Section Quiz

13 – Video

14 – Color

15 – Styles & Libraries

001 How to group color styles using slashes or folders in Figma.mp4

00:00
002 How to descriptions to your styles in Figma for others to use.mp4

00:00
003 Editing someone else’s styles or component library in Figma.mp4

00:00
004 How to hide color font styles & components from team library in Figma.mp4

00:00
005 How to compare changes in component with overlay in Figma.mp4

00:00
006 How to refactoring styles to another design file in Figma.mp4

00:00
007 How to move relink refactoring components to another design file in Figma.mp4

00:00
008 How to swap parts or entire component & style library in Figma.mp4

00:00
Section Quiz

16 – Drawing, Stroke & Fill

17 – Auto Layout – Level 2

001 How to overlap & stack things in a Figma Autolayout.mp4

00:00
002 What are the shortcuts for hug & fill in Figma.mp4

00:00
003 How to set absolute spacing so things ignore Autolayout in Figma.mp4

00:00
004 How to absolute position something that is responsive in Figma.mp4

00:00
005 How stick things to the bottom right of an auto layout in Figma.mp4

00:00
006 How to resize a box automatically in a Auto Layout to match text in Figma.mp4

00:00
007 What are the autolayout padding and resizing shortcuts.mp4

00:00
008 How to create a minimum width height button in Figma.mp4

00:00
009 How to wrap auto layout objects in Figma.mp4

00:00
010 What does stroke included excluded mean in Figma auto layout.mp4

00:00
011 How to set custom spacing in auto layouts in Figma.mp4

00:00
Section Quiz

18 – Components & Variants – Level 2

19 – Prototyping – Level 2

20 – Variables

001 What are Variables in Figma.mp4

00:00
002 How to create cart total using number variables in Figma.mp4

00:00
003 How to add add conditions to variables in Figma.mp4

00:00
004 Variant change using Boolean variable – change cart color.mp4

00:00
005 Turning our boolean variable to false in Figma.mp4

00:00
006 Making a Overlay Popup in the Variable action panel in Figma.mp4

00:00
007 Light and Dark Modes using Collections & Color Variables in Figma.mp4

00:00
008 How to change spacing with number Variables in Figma.mp4

00:00
Section Quiz

21 – Design Tokens

22 – Animation – Level 2

23 – Accessibility

24 – Working with Stakeholders

002 How view version history duplicate and restore in Figma.mp4

00:00
003 How to archive and restore previous versions of Figma files.mp4

00:00
004 How to create & share a flows in Figma.mp4

00:00
005 How to use the Slice Tool in Figma.mp4

00:00
006 How export uncropped and unscaled images from Figma.mp4

00:00
007 How to export webp images from Figma & Photoshop.mp4

00:00
008 How to downsize reduce file size of all images in a Figma file.mp4

00:00
009 How to document a component in a design system in Figma.mp4

00:00
010 How to use DEV Mode in Figma.mp4

00:00
Section Quiz

25 – What Next

Add this certificate to your resume to demonstrate your skills & increase your chances of getting noticed.

Student Ratings & Reviews

No Review Yet

About Course

What Will You Learn?

Course Content

01 – Introduction

A Message from the Professor

001 Intro to the Figma Advanced Course.mp4

002 Getting Started in Figma Advanced Course.mp4

Section Quiz

02 – Auto Layout – Level 1

001 Auto Layout & Responsive Design 101 It’s use in responsive design.mp4

002 Designing in Figma with Auto Spacing in Auto Layouts.mp4

003 When and when not to use Components in Figma.mp4

004 What is good spacing to use in Figma.mp4

005 What spacing should I use for web & app design in Figma.mp4

006 Auto Layout vs Constraints in Figma.mp4

007 Autolayout shortcuts Tips and tricks to work with Auto Layout faster.mp4

008 Class Project 01 – Responsive Lower Navigation.mp4

03 – Advanced Workflow Tricks

001 How to handle files in Figma and become a File Handling Master.mp4

002 How to use advanced Copy, Paste, and Selection Tricks in Figma.mp4

003 How to do crazy things with your Figma fields.mp4

004 Frame Tricks Tips and Tricks to work with Figma frames effectively.mp4

005 Advanced Zooming Techniques for precision work in Figma.mp4

006 Light or Dark vs System Theme Which one to use in Figma.mp4

007 Class Project 02 – Event Card Constraints.mp4

008 Class Project 02 – Event Card Constraints – Completed.mp4

Section Quiz

04 – Grids

001 Grid v Constraints v Autolayout in Figma Which one to use and when.mp4

002 How to copy & paste grids and export grid styles in Figma.mp4

003 How to add rows and column grids to one layout in Figma.mp4

004 How to update Grid Styles in Figma.mp4

005 Grids inside of frames that aren’t the main frame.mp4

Section Quiz

05 – Simple App Brand

001 Class project 03 – Event Branding.mp4

002 Logos using Iconscout How to use Iconscout to create logos in Figma.mp4

003 What are widget compared to plugins in Figma.mp4

004 How to create ux color variants using a Figma Widget.mp4

Section Quiz

06 – Nested & Responsive Auto layouts

001 Intro to Nested & Responsive Auto layouts Section.mp4

002 Production video – Tidying up my frame & component mess.mp4

003 Bring in images using the unsplash plugin in Figma.mp4

004 Production video – Making the parts for our nested autolayout.mp4

005 Nesting Multiple Auto Layouts inside each other in Figma.mp4

006 Autolayout Nesting with variants and responsive text in Figma.mp4

007 Auto Layout on different device sizes- How to make advanced Auto Layouts.mp4

008 Responsive text that adjusts for 2 lines in Figma.mp4

Section Quiz

07 – Animation – Level 1

001 Abstract Gradient Background in Figma the easy way.mp4

002 How to copy and paste Interactions in Figma.mp4

003 How to animate gradient mesh using Variants in Figma.mp4

004 How to give feedback on a UX project – The Critique Sandwich.mp4

005 Class project 04 – Background Animation.mp4

006 Houdini Text How to make a text mask animation Figma.mp4

007 How to use the Spring Animations in Figma.mp4

008 Spring Animation How to make custom Spring Animation in Figma.mp4

009 Why is interaction on tap on click grayed out of missing in Figma.mp4

010 Class project 05 – Houdini Text Animation.mp4

Section Quiz

08 – Prototyping – Level 1

001 Create & remove bulk multiple noodles wires at once in Figma.mp4

002 How to bulk update nav links in your Figma prototype.mp4

003 How to set the right phone and find old prototype phones in Figma.mp4

004 How to make sticky scroll position search bar in Figma.mp4

005 How to stack multiple sticky text vertical scrolling in Figma.mp4

006 Class project 06 – Multiple Sticky Headings.mp4

007 How to make Interactive Components in Figma.mp4

008 How to make a checkmark turn on and off in Figma.mp4

009 Interactive components with sliding button in navigation for Figma.mp4

010 Class project 07 – Sliding Button Nav Challenge.mp4

011 Class project 07 – Completed.mp4

012 How to use Sections in Figma for organizing your content.mp4

013 How to use sections for prototyping in Figma.mp4

014 How to add iOS battery wifi notch status bar to Figma.mp4

015 How to add iOS or Android Snack Bar UI to Figma.mp4

016 Class project 08 – Operating System UI.mp4

017 Be careful what you create in Figma.mp4