Advanced Figma Tips & Tricks 2024: Discovering Little Hidden Gems

Article version of this video: www.moonlearning.io/articles
Full courses and working files: www.moonlearning.io
Try Figma for free to follow along: bit.ly/moonlearningfreefigma
Get Figma Professional: bit.ly/moonlearningprofession...
Want to stay up to date on new developments, tips and tricks? Make sure to follow me!
Follow me on LinkedIn: / christinevallaure
Moonlearning Newsletter: www.moonlearning.io/newsletter
Follow me on Twitter: / moonlearning
Follow me on Instagram: / moonlearnin. .
And don't forget to subscribe right here on RUclips for more!
As usual, Figma did not fail to impress and come out with some fantastic new features and hidden gems hiding in plain sight. So here are my top Tips & Tricks to make life with Figma even more fun!
Make sure to visit my full courses with Figma working files on: www.moonlearning.io
00:00 - Introduction to moonlearning.io
00:22 - Open Dev Mode Directly in VS Code
00:37 - Shift+D to Toggle Dev Mode
00:46 - Toggle Auto Layout ‘Auto’ with Cmd + X
01:13 - Variable Scoping in Bulk
01:30 - Quickly Create Variables with Shift + Enter
01:47 - Alias Variables
02:01 - Styles to Variables Converter quickly convert styles to variables
02:50 - Boolean Variables Magic with Modes
03:39 - Variant and Props Playground
04:00 - Press R to Reset Prototypes
04:09 - Shift + Space for In-File Preview
04:16 - Applying Min and Max to Parent Frames
04:36 - Hold and Slide to Lock All Layers
04:47 - Alt + L to Collapse All, Enter to Select Children
05:01 - Multiple Grids within a Single Grid Style
05:19 - Prototyping Flow Links for Overview
05:39 - Presentations with Scrollable Prototypes
06:06 - Set Rules for Slot Components with Preferred Values
06:25 - Cmd + Y to Clean Up
06:37 - Copy as PNG Without Exporting
07:03 - Use % for Line-Height
07:32 - Variables or Styles Cheatsheet
08:20 - More Tips and Tricks

[@MrConway007]

This women has the most amazing tutorial voice I've ever heard, and speaks with such clarity that you would think it was AI

[@moonlearning]

Haha thanks, I am real! I do use AI for for the Spanish translations though, but not 100% there yet.

[@MrConway007]

@@moonlearning Love your Figma tutorials.

[@abscondet]

You nailed it, mate! 🥰

[@uifry]

Thats really helpful tips :)

[@md.shakil8449]

Thanks for sharing all the tips and tricks. Some of them I knew before, but some were new to me.

[@platinumdynamite]

The boolean mode trick has phenomenal implications on responsive layouts if the modes are freed up for width. Really great tip.

[@OneHundy]

Great quick-fire tips for advanced users. And the voice is seductive 😆

[@thitran8109]

great Tips & Tricks👍👍

[@Atractiondj]

Good tricks with the hamburger menu

[@Techwith_FaithOkolo]

Really helpful!

[@moonlearning]

So glad!

[@johnupjohn]

Why none Windows shortcuts?

[@davidcarreon9670]

Layer Variants is God

[@saroman_valar]

ok, panic mode, I knew only about half of them

[@diogofigueiraa]

0:58 is not necessary CMD+X, just click in the auto layout box and press X, it does the same.

[@moonlearning]

So true! I don’t know why I put the cmd, same for the B!

[@andkzy]

@@moonlearning Does it work on windows?

[@darialysak4591]

doesn't work for windows, commnd + y/x (ctrl can't do it🥺)

[@moonlearning]

It’s only selecting the alignment box and then x, I made a mistake!

[@alfagomy22]

can't find component details in view

[@alfagomy22]

is it only on paid plan

[@moonlearning]

Make sure you are in the assets panel and the the component you are clicking has variants and properties set

[@rigidhammer7376]

so fast haha

[@kyu161]

Thanks! This is very help. Saved me so much research time!

[@moonlearning]

Glad it helped!