Advanced Figma Prototyping Tips & Tricks | 2023 – by moonlearning.io

Advanced Figma prototyping tips and tricks:

00:25 - Auto layout and smart animate interactive components
01:28 - Deleting item simulation in Figma
02:05 - Stateful design with sections in Figma
03:21 - Nest prototypes for presentations
04:03 - Hidden treasures of the scroll to action
04:43 - Animated slideshow in Figma
05:34 - Interactive scrollable map in Figma
06:41 - Combine smart animate and Figma moving animations
07:30 - Zoom on hover effect with interactive components in Figma
08:16 - Play video on hover
09:09 - Hover and enlarge
09:56 - Get rid of all connections
10:14 - Get rid of all connections
10:39 - Use flows to guide
11:57 - Links remember prototype settings
12:26 - Link to full prototyping course and Figma files

As you all loved the annual Figma tips and tricks so much, here is a special edition just for prototyping. A summary of some gems I picked up along the way that have helped streamline my workflow and some that made my documentation easier.
For this video, I’ve decided to focus more on practical techniques and less on experimental animations (obviously could not resist some). Don’t get me wrong; I’m always impressed by the fantastic Figma animations. With this article, however, I am trying to focus more on the everyday workflow.

Free Figma course, advanced Figma, tips and tricks, learn UI design for free, learn UX design for free

[HDockyards]

This was SUPER helpful! Thank you for making this!

[michaelschultze]

It's been a while since I've seen anything from Moonlerning. But - simply world class. Super explained. No blah blah - straight to the point. And then also understandable for me, who doesn't speak english - Thank you so much - 5*. I'm still waiting for "Sticky Scrolling" in Figma ;-)

[ipixelsvideo]

Wow, Just incredible work. I thoroughly enjoyed this. It is helpful. Thanks Christine :)

[karenrogers]

Amazing content and really well explained. Thanks Christine💕

[KaviSivyer]

this is legit the goatiest video of prototyping ive seen so far 🐐👏

[effectvision]

Thank you very much for sharing! These are lifesavers.

[stinkleaf]

Concise with a smooth voice! You got my sub

[millsieme]

I have only just discovered your tuturials. I will be signing up, these are amazing, and so clear and concise in your videos. I'm needing to explore more dynamic ways to present product prototypes. Brilliant work. Thank you.

[newtonoluoch]

How comes I have never known this channel. Amazing, Thank you!

[BringYourOwnLaptop]

Amazing Video Christine! Love the tips. I learnt loads.

[giovannirenzocharcafernand]

I love your tutorials. Thanks very much for your share your knowledge

[arifhossain]

In the short video lots of information. I love your videos🔥🔥

[djashawe]

This channel is awesome! Thanks a lot for such a high quality content filled with useful tips and tricks. The storytelling, the examples, the speed, the sound, everything is so perfect and on point! I subscribed to your channel, liked your videos, and have been binge-watching them one by one!

[whiteswordwarrior]

How do we put figma prototypes into webflow?

[n_mckean]

With yourr stateful design and nested sections, there is something I am trying to do and I am stuck. When the section A/B/C has been completed and you go back to the "list", I want to update the list items have have been through ABC to a different state (e.g. checkbox ticked). There seems to be a tension through. I could create another screen with the checkbox ticked and link to it from C but now C isn't linked to the "list" section and so can only be used once.

Any ideas? I am currently playing around to see if I can quickly change the state of the list item before going to the ABC section so that when I come back it is accurate, but (a) it might be noticed and (b) if the user abandoned the process without completing C then it would be inaccurate.

[carlinorandagio]

Thanks for sharing. Very helpful indeed!
However I couldn't figure out how to set the height to 0 (min 01:42)? When I try, Figma immediately round it up to 1. Any hint?

[billygimmens]

For your first example, clicking on a red box changes it to a blue box and then pushes down all the boxes below it. Is there a way to instead have the blue box hover over the boxes below it instead of pushing them down? Say this was a selection dropdown field for an auto layout form and I wanted the selection bubble to not push down the content below it, but just hover over it.

[pascalmarji]

I can't find the "smart animate matching layers in my interaction details.. any idea how do i get it?

[andreefathurizki]

does anyone know why my figma doesn't have "smart animate matching layer" option?, i'm currently using figma for student right now.

[lawfreed]

Went for the tutorial, stayed for the voice