When you enroll through our links, we may earn a small commission—at no extra cost to you. This helps keep our platform free and inspires us to add more value.

SkillShare logo

Figma UI UX Design Advanced: Become a Figma Pro

Unlock creativity with Skillshare! Learn acrylic painting, AI writing, graphic design, and photography.

     0 |
  • Reviews ( 0 )
Free

This Course Includes

  • iconskillshare
  • icon0 (0 reviews )
  • icon15 hours 47 mintues
  • iconenglish
  • iconOnline - Self Paced
  • iconcourse
  • iconSkillShare

About Figma UI UX Design Advanced: Become a Figma Pro

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 for precision work 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 v Constraints v Autolayout in Figma: Which one to use and when?

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

How to add rows and column grids to one 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 widget 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- How to make advanced Auto Layouts

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

How to 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 of missing in Figma?

Class project 05 - Houdini Text Animation Prototyping - Level 1

Create & remove bulk multiple noodles wires at once in Figma

How to bulk update nav links in your Figma prototype

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

Interactive components with sliding button in navigation for 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

How to make a input field using only 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 see Live Font Previews 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 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 animated 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 placehold 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

How do you animate along a path in Figma

How to add Lottie animation files in Figma

Making Your Designs Accessible - A Guide to Accessibility plugin in Figma

What are some tips for working with colleagues in Figma

How view version history duplicate and restore in Figma

How to archive and restore previous versions of Figma files

How to create & share a flows in Figma

How to use the Slice Tool in Figma

How export uncropped and unscaled images from Figma

How to export webp images from Figma & Photoshop

How to downsize reduce file size of all images in a Figma file

How to document a component in a design system in Figma

How to use DEV Mode in Figma

Class Project 20 - Finish your design

What's Next - Figma Advanced

What You Will Learn?

  • 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?Try Figma for free by clicking here.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:.
  • You’ll then take your new knowledge of variables to understand and create your own Design Tokens. .
  • 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.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!Requirements:.
  • Who this course is for:.
  • What you'll learn:.