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

Ғылым және технология

Full course and working files: www.moonlearning.io/figma-pro...
Try Figma for free to follow along: bit.ly/moonlearningfreefigma
Get Figma Professional: bit.ly/moonlearningprofession...
Access all my premium UX/UI and Figma online courses from only 18€ a month: www.moonlearning.io
Article version of this video: / advanced-figma-prototy...
Advanced Figma prototyping tips and tricks:
00:00 - Introduction to moonlearning.io
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
www.moonlearning.io

Пікірлер: 51

  • @KaviSivyer
    @KaviSivyer9 күн бұрын

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

  • @HDockyards
    @HDockyards Жыл бұрын

    This was SUPER helpful! Thank you for making this!

  • @karenrogers8878
    @karenrogers8878 Жыл бұрын

    Amazing content and really well explained. Thanks Christine💕

  • @ipixelsvideo
    @ipixelsvideo Жыл бұрын

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

  • @michaelschultze3595
    @michaelschultze3595 Жыл бұрын

    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 ;-)

  • @effectvision
    @effectvision Жыл бұрын

    Thank you very much for sharing! These are lifesavers.

  • @stinkleaf
    @stinkleaf Жыл бұрын

    Concise with a smooth voice! You got my sub

  • @Hellle89
    @Hellle89 Жыл бұрын

    This was super helpful, thank you!

  • @newtonoluoch8103
    @newtonoluoch8103 Жыл бұрын

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

  • @BringYourOwnLaptop
    @BringYourOwnLaptop Жыл бұрын

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

  • @Butarangau

    @Butarangau

    6 ай бұрын

    Hi Danny 👋☺️

  • @millsieme
    @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.

  • @satyambarnwal5255
    @satyambarnwal5255 Жыл бұрын

    This was super dooper helpful 🙌

  • @ofir6665
    @ofir6665 Жыл бұрын

    thank you for a wonderful video!!!

  • @KelvinChiuFilms
    @KelvinChiuFilms Жыл бұрын

    Wow, amazing. Thank you.

  • @kalpeshahir4924
    @kalpeshahir4924 Жыл бұрын

    Super Cool technic... Really Helpful

  • @bojanpusica8388
    @bojanpusica83883 ай бұрын

    Awesome stuff, keep it up

  • @panveel
    @panveel Жыл бұрын

    Super Insightful.

  • @adilbek.ermekov
    @adilbek.ermekov Жыл бұрын

    Keep it up!

  • @arifhossain8753
    @arifhossain8753 Жыл бұрын

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

  • @cintyal.8490
    @cintyal.8490 Жыл бұрын

    Thanks so much !

  • @adilbek.ermekov
    @adilbek.ermekov Жыл бұрын

    Amazing tutorial

  • @giovannirenzocharcafernand5935
    @giovannirenzocharcafernand59357 ай бұрын

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

  • @muhammadfadlirusady6580
    @muhammadfadlirusady6580 Жыл бұрын

    Love it sis

  • @adilbek.ermekov
    @adilbek.ermekov Жыл бұрын

    Very useful tips

  • @DioArsya
    @DioArsya Жыл бұрын

    wow this is a gem, thank you!

  • @moonlearning

    @moonlearning

    Жыл бұрын

    Glad you like it!

  • @cheijoqwert5030
    @cheijoqwert5030 Жыл бұрын

    Thank you 🥹

  • @moonlearning

    @moonlearning

    Жыл бұрын

    Any time!

  • @ShoCoaching
    @ShoCoaching8 ай бұрын

    You have an amazing voice :)

  • @tonioduran3330
    @tonioduran3330 Жыл бұрын

    Very useful tutorial 🎉🎉🎉 thanks

  • @moonlearning

    @moonlearning

    Жыл бұрын

    You are welcome 😊

  • @carlinorandagio
    @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?

  • @moonlearning

    @moonlearning

    Жыл бұрын

    Yes you have to trick Figma a little and put 0.0004 or similar then it jumps to 0

  • @billygimmens7246
    @billygimmens72466 ай бұрын

    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.

  • @moonlearning

    @moonlearning

    6 ай бұрын

    Yes works the same just change the action from click to hover

  • @moonlearning

    @moonlearning

    6 ай бұрын

    Ah sorry, I think I got you wrong, if you do not want the push down then there are plenty of other ways setting it to absolute for example

  • @whiteswordwarrior9995
    @whiteswordwarrior9995 Жыл бұрын

    How do we put figma prototypes into webflow?

  • @n_mckean
    @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.

  • @andreefathurizki2659
    @andreefathurizki2659 Жыл бұрын

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

  • @moonlearning

    @moonlearning

    Жыл бұрын

    That is quite strange, it must be there. Make sure you are choosing a moving animation first for this to show up. otherwise you will only see smart animate as an animation type

  • @pascalmarji9004
    @pascalmarji9004 Жыл бұрын

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

  • @moonlearning

    @moonlearning

    Жыл бұрын

    From animations, you need to activate a moving animation first, (move in, move out etc) then it will show up

  • @gulshanfaried8697
    @gulshanfaried86977 ай бұрын

    How to give zero height?

  • @moonlearning

    @moonlearning

    7 ай бұрын

    Type height 0.003 on the parent frame height or similar and it will jump to 0

  • @johnapple3471
    @johnapple3471 Жыл бұрын

    were you a tv presenter before?

  • @moonlearning

    @moonlearning

    Жыл бұрын

    Haha not that I am aware of it

  • @lawfreed
    @lawfreed Жыл бұрын

    Went for the tutorial, stayed for the voice

  • @pizzafromearth

    @pizzafromearth

    9 ай бұрын

    for real

  • @tshegofatsomokgosi6577
    @tshegofatsomokgosi65777 ай бұрын

    No! This is a horrible video! Oh never-mind it says "advanced"... I'm a beginner

  • @djashawe88923
    @djashawe88923 Жыл бұрын

    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!

Келесі