Grid

GRID_STYLE

Hover Effects

TRUE

Sidebar (TO-LEFT)

TO-LEFT

fbt_classic_header

Latest

latest

Figma UI / UX Design - Advanced Masterclass (FREE)

This course is tailor-made for those who have already mastered the fundamental principles of UI/UX Design using Figma, if not get it here ...

This course is tailor-made for those who have already mastered the fundamental principles of UI/UX Design using Figma, if not get it here -> edu.ralliheart.com / Figma UX-UI Design Basics

If you've triumphed over the 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:

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

Video Timeline

  • 0:00:00 - Introduction 
  • 0:02:55 - Getting Started
  • 0:05:27 - Auto Layout Revision
  • 0:15:46 - Auto Spacing
  • 0:25:54 - When to use Components
  • 0:31:54 - Good Spacing Techniques
  • 0:38:53 - What Spacing to use
  • 0:44:09 - Middletro
  • 0:45:27 - Auto Layout vs Constraints
  • 0:49:19 - Autolayout Shortcuts
  • 0:52:25 - Class Project 01 - Responsive Nav
  • 0:55:17 - File Handling Mastery 
  • 1:01:56 - Advanced Copy & Paste
  • 1:08:31 - Crazy Fields
  • 1:12:05 - Frame Tricks
  • 1:16:45 - Zooming Tricks
  • 1:18:26 - Light vs Dark Theme 
  • 1:20:55 - Class Project 02 - Event Card
  • 1:22:31 - Class Project 02 - Completed
  • 1:31:11 - Grid v Constraints v Autolayout
  • 1:36:28 - Grids & Columns
  • 1:41:57 - Rows & Columns
  • 1:46:16 - Grid Styles
  • 1:47:49 - Grids Inside of Frames
  • 1:51:33 - Class project 03 - Branding
  • 1:55:53 - Icon Plugins
  • 2:02:40 - Widgets vs Plugins
  • 2:06:14 - Color Variants
  • 2:11:27 - Outro

Download the Free Exercise Files to follow along: https://BYOL.com/figytlex
Try Figma for Free: https://BYOL.com/FIGF
Free downloadable Cheat Sheet: https://BYOL.com/fig10ytlcs

Get 10% off a BYOL membership & unlimited access to all of our Figma Courses & so much more: https://BYOL.com/FIG10YTL
Watch the full 160+ video Figma Advanced Course: https://BYOL.com/figytflcd



Keywords

user interface, ui ux course, user experience, web development, framework, wireframe, advanced website tutorial, design, web design tutorial, front end engineer, software front end, learn to design, advanced design technique, app design development, software design tutorial, figma tutorial, figma

No comments