Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

CreativeLive

Figma Advanced: Become a Figma Pro

via CreativeLive

Overview

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.

Syllabus

  • Intro to the Figma Advanced Course
  • Getting Started in Figma Advanced Course
  • Auto Layout & Responsive Design 101: It's use in responsive design
  • Designing in Figma with Auto Spacing in Auto Layouts
  • When and when not to use Components in Figma
  • What is good spacing to use in Figma
  • What spacing should I use for web & app design in Figma
  • Auto Layout vs Constraints in Figma
  • Autolayout shortcuts: Tips and tricks to work with Auto Layout faster
  • Class Project 01 - Responsive Lower Navigation
  • How to handle files in Figma and become a File Handling Master
  • How to use advanced Copy, Paste, and Selection Tricks in Figma?
  • How to do crazy things with your Figma fields?
  • Frame Tricks: Tips and Tricks to work with Figma frames effectively
  • Advanced Zooming Techniques in Figma
  • Light or Dark vs System Theme: Which one to use in Figma?
  • Class Project 02 - Event Card Constraints
  • Class Project 02 - Event Card Constraints - Completed
  • Grid vs Constraints vs Auto Layout in Figma
  • Copy, Paste & Export Grid Styles in Figma
  • Add Rows and Column Grids to Layout in Figma
  • How to update Grid Styles in Figma
  • Grids inside of frames that aren't the main frame
  • Class project 03 - Event Branding
  • Logos using Iconscout: How to use Iconscout to create logos in Figma?
  • What are widgets compared to plugins in Figma?
  • How to create UX color variants using a Figma Widget
  • Intro to Nested & Responsive Auto layouts Section
  • Production video - Tidying up my frame & component mess
  • Bring in images using the unsplash plugin in Figma
  • Production video - Making the parts for our nested autolayout
  • Nesting Multiple Auto Layouts inside each other in Figma
  • Autolayout Nesting with variants and responsive text in Figma
  • Auto Layout on different device sizes
  • Responsive text that adjusts for 2 lines in Figma
  • Abstract Gradient Background in Figma the easy way
  • How to copy and paste Interactions in Figma
  • Animate Gradient Mesh Using Variants in Figma
  • How to give feedback on a UX project - The Critique Sandwich
  • Class project 04 - Background Animation
  • Houdini Text: How to make a text mask animation Figma?
  • How to use the Spring Animations in Figma
  • Spring Animation: How to make custom Spring Animation in Figma
  • Why is interaction on tap on click grayed out or missing in Figma?
  • Class project 05 - Houdini Text Animation
  • Create & remove bulk multiple noodles wires at once in Figma
  • Bulk Update Nav Links in Figma Prototypes
  • How to set the right phone and find old prototype phones in Figma
  • How to make sticky scroll position search bar in Figma
  • How to stack multiple sticky text vertical scrolling in Figma
  • Class project 06 - Multiple Sticky Headings
  • How to make Interactive Components in Figma
  • How to make a checkmark turn on and off in Figma
  • Create Interactive Components with Sliding Nav Figma
  • Class project 07 - Sliding Button Nav Challenge
  • Class project 07 - Completed
  • How to use Sections in Figma for organizing your content
  • How to use sections for prototyping in Figma
  • How to add iOS battery wifi notch status bar to Figma
  • How to add iOS or Android Snack Bar UI to Figma
  • Class project 08 - Operating System UI
  • Be careful what you create in Figma
  • What are the advanced Layer shortcuts in Figma
  • How to find layer Zen shortcuts in Figma
  • How to hide and lock unlock all layers in Figma
  • How to use Locked layers in Figma
  • How to Find Replace and Multi-select Layer Search in Figma
  • How to Bulk Rename Layers with advanced tricks in Figma
  • How to replace instances and variants with shortcuts in Figma
  • How to use Instance Swap Component Properties with preferred in Figma
  • How to use Component Text Property in Figma
  • How to use Boolean Component Property in Figma
  • Input Fields Using Component Properties in Figma
  • How to Combine Variants with Component Properties in Figma
  • How to apply component properties to existing design systems
  • What is Simplify Instances in Figma
  • What does Expose Nested Instances do in Figma
  • Class project 09 - One button to rule them all
  • What are some font tips and tricks in Figma
  • How to truncate text and set max lines in Figma
  • How reset fonts & set default fonts in Figma
  • How to Use Line Height Percentage in 8pt grid in Figma
  • How to use Leading trim to cap height to baseline in Figma
  • How to set Hanging Punctuation for pull quotes & call outs in Figma
  • What are the Advanced Type Options in Figma
  • How to use Variable Type in UX app design in Figma
  • How to curve text with type on a path in Figma
  • How to use adobe fonts & local fonts in Figma
  • How to Preserve text overrides or not in Figma variant
  • How to use Chat GPT AI to create placeholder and personas in Figma
  • How to create an image style in Figma
  • What's the difference with Images inside frames vs fills vs Masked in Figma
  • How to crop images using shortcuts in Figma
  • How to mask images with text in Figma
  • Class Project 10 - Text Mask
  • How to mask using transparent PNGs with alpha channels in Figma
  • Class Project 11 - Alpha Mask
  • How to create a luma mask in Figma
  • Class project 12 - Luma Mask
  • How to make a spillover mask outside of the frame in Figma
  • How to use the pen tool to make image masks in Figma
  • How to use color layer blending modes in Figma
  • Class project 13 - Social Ad
  • How to add video in Figma
  • How to make a background autoplay video in Figma
  • How to get a video play when you hover in Figma
  • Class project 14 - Hover Play
  • How to make a play pause button for video in Figma
  • How to build a video card in Figma
  • Class project 15 - Video Card
  • What are some advanced color tricks in Figma
  • How to change replace colors in Figma
  • How to create Color Themes for light and dark in Figma
  • How to group color styles using slashes or folders in Figma
  • How to add descriptions to your styles in Figma for others to use
  • Editing someone else's styles or component library in Figma
  • How to hide color font styles & components from team library in Figma
  • How to compare changes in component with overlay in Figma
  • How to refactoring styles to another design file in Figma
  • How to move relink refactoring components to another design file in Figma
  • How to swap parts or entire component & style library in Figma
  • What are some advanced drawing tips and tricks in Figma
  • How to draw in Figma with the pen tool- Anchor point mastery
  • How to draw with Bend & Mirror angle in Figma
  • Can you animate anchor points or booleans in Figma
  • How to animate a mobile nav menu in Figma using a dip
  • Class project 16 - Alt Nav Animation
  • How to overlap & stack things in a Figma Autolayout
  • What are the shortcuts for hug & fill in Figma
  • How to set absolute spacing so things ignore Autolayout in Figma
  • How to absolute position something that is responsive in Figma
  • How stick things to the bottom right of an auto layout in Figma
  • How to resize a box automatically in a Auto Layout to match text in Figma
  • What are the autolayout padding and resizing shortcuts
  • How to create a minimum width height button in Figma
  • How to wrap auto layout objects in Figma
  • What does stroke included excluded mean in Figma auto layout
  • How to set custom spacing in auto layouts in Figma
  • How to organize Components into groups in Figma
  • How to create slot placeholder components in Figma
  • How to convert an existing website into a Figma design
  • How to make a drop down using overlays in Figma
  • How to make a multi level drop down menu in Figma
  • Class project 17 - Nested Dropdown Menu
  • How to create a hover grow effect for images in Figma
  • Class project 18 - Hover Grow Effect
  • How to make an expanding Search Bar in Figma
  • Class project 19 - Expanding Search Bar
  • What are Variables in Figma
  • How to create cart total using number variables in Figma
  • How to add add conditions to variables in Figma
  • Variant change using Boolean variable - change cart color
  • Turning our boolean variable to false in Figma
  • Making a Overlay Popup in the Variable action panel in Figma
  • Light and Dark Modes using Collections & Color Variables in Figma
  • How to change spacing with Number Variables in Figma
  • What are Design Tokens in Figma
  • How to create Design Tokens in Figma
  • Creating spacing & radius design tokens in Figma
  • When would you use design tokens in Figma

Taught by

Daniel Walter Scott

Reviews

Start your review of Figma Advanced: Become a Figma Pro

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.