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

Подписаться 10 тыс.

Просмотров 62 тыс.

50% 1

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

Наука

Опубликовано:

9 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 50

@BringYourOwnLaptop Год назад

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

@Butarangau 5 месяцев назад

Hi Danny 👋☺️

@HDockyards Год назад

This was SUPER helpful! Thank you for making this!

@karenrogers8878 Год назад

Amazing content and really well explained. Thanks Christine💕

@ipixelsvideo Год назад

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

@stinkleaf 11 месяцев назад

Concise with a smooth voice! You got my sub

@Hellle89 Год назад

This was super helpful, thank you!

@effectvision Год назад

Thank you very much for sharing! These are lifesavers.

@newtonoluoch8103 Год назад

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

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

@satyambarnwal5255 Год назад

This was super dooper helpful 🙌

@ofir6665 11 месяцев назад

thank you for a wonderful video!!!

@KelvinChiuFilms Год назад

Wow, amazing. Thank you.

@panveel Год назад

Super Insightful.

@kalpeshahir4924 Год назад

Super Cool technic... Really Helpful

@adilbek.ermekov Год назад

Amazing tutorial

@bojanpusica8388 2 месяца назад

Awesome stuff, keep it up

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

@adilbek.ermekov Год назад

Keep it up!

@cintyal.8490 Год назад

Thanks so much !

@giovannirenzocharcafernand5935 6 месяцев назад

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

@adilbek.ermekov Год назад

Very useful tips

@arifhossain8753 Год назад

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

@muhammadfadlirusady6580 Год назад

Love it sis

@ShoCoaching 7 месяцев назад

You have an amazing voice :)

@DioArsya Год назад

wow this is a gem, thank you!

@moonlearning Год назад

Glad you like it!

@tonioduran3330 Год назад

Very useful tutorial 🎉🎉🎉 thanks

@moonlearning Год назад

You are welcome 😊

@cheijoqwert5030 Год назад

Thank you 🥹

@moonlearning Год назад

Any time!

@whiteswordwarrior9995 Год назад

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?

@moonlearning Год назад

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

@billygimmens7246 5 месяцев назад

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 5 месяцев назад

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

@moonlearning 5 месяцев назад

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

@pascalmarji9004 Год назад

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

@moonlearning Год назад

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

@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 Год назад

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

@gulshanfaried8697 7 месяцев назад

How to give zero height?

@moonlearning 7 месяцев назад

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

@johnapple3471 11 месяцев назад

were you a tv presenter before?

@moonlearning 11 месяцев назад

Haha not that I am aware of it

@lawfreed Год назад

Went for the tutorial, stayed for the voice

@pizzafromearth 8 месяцев назад

for real

@tshegofatsomokgosi6577 6 месяцев назад

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

@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!