Micro animations in Figma

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

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

50% 1

In this Figma tip, learn how to create a micro animation (also knows as micro interaction) using a heart icon. This tutorial covers the use of interactive components and prototyping.
This tip starts with an icon already created, but if you need help creating a heart icon, check out Miggi's tutorial here: • Making various heart i...
Figma is free to use. Sign up here: bit.ly/3msp0OV
____________________________________________________
Find us on ⬇️
Twitter: / figma
Instagram: / figma
LinkedIn: / figma
____________________________________________________
#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems

Наука

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

24 апр 2023

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@BigMoneyKirk Год назад

This is so good! Thank you for even going further into breaking down the reasons of WHY you chose to do the things you did - which really helped me learn your process. I can’t wait to start applying these techniques!!

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

Wow, the minute details. So many times we face these small issues while making micro-interactions, now hopefully I should be able to solve them with your techniques which sounds so simple, but truly so much of thought has gone behind that to make it perfect. Thank you!

@utlaxis Год назад

Amazing tutorial and thanks for the extra examples that explain the error cases, I think this is very educational congrats!

@whatsoeverimin 9 месяцев назад

Thank you a lot for this tutorial, and ESPECIALLY for the last part, because it's incredibly useful for both beginners and professionals. Great job so far!

@manatag7 Год назад

what a great tutorial and a great format with that additional examples and explanations. thank you!

@beingdealtwith Год назад

This was really a good tutorial, especially that last bit where she explains why she did it the way she did with examples, it cleared up my confusions head on. Thank you for this!

@kaii456 Год назад

Beautifully done. Love the negative explanations at the end to describe different outputs! This is where many ppl often leave our information!

@megaroeny Год назад

The breakdown at the end with the Q&A was fantastic! Thank you!

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

This is super helpful. I'd love to see more micro animations like these. Super thank you so much

@cyan__lab 10 месяцев назад

Thank you for such an amazing tutorial! Very easy to follow, I really appreciate y'all for posting videos like these!

@basuki094 Год назад

after making the component set, it's not working. before that it's working fine. what am I doing wrong?

@danieljesudarasimi3379 10 месяцев назад

Ctrl E

@bandadaapp2485 Год назад

I loved the explanation with the shoulders swaying.

@maxhuk Год назад

Thank you for listing all the pitfalls! Very helpful ❤

@Jfseeing Год назад

Very well structured tutorial. Well done 🎉

@AliBafghi 3 месяца назад

Hi There I have a problem when I put my mouse on heart it doesn't shake, I exactly follow your clip. Please help me. Thank you.

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

What a fantastic, to the point tutorial, ty!

@NehmatGereige 13 дней назад

Brilliant explanation of what not to do. love the details in your video and the clarity of expression and thought process. Thank you.

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

Perfectly explained thank you so much 😊

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

Thank you so much for examples! Really useful video 👍

@Rita_Johanna 9 месяцев назад

Incredible tutorial! Thank you!!

@kertpilman Год назад

Thanks! More of these please! :)

@mrduycua Год назад

Great! Thanks for sharing

@megaroeny Год назад

What was used to record? I love seeing the keystroke combinations

@pallavikhamkar6908 3 месяца назад

very beautifully explained....Thanks!

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

so cool! And perfect explanations!! Thank you so much

@HivaOrooji Месяц назад

I followed all of your instructions, and my heart is functioning correctly until it creates a component. However, after that point, my design fails to work. Could you please explain why this is happening and advise me on what steps I should take?

@javinx21 Год назад

Very helpful! thank you

@lucianabenitez6005 3 месяца назад

I love this, thank you!

@user-rn6dx3rw1j 6 месяцев назад

hi, is there any tutorial on how to make just the hovering part animated? thank you

@HoaiNam9117 Год назад

Can I ask something, how to embed a youtube video like at 0:15

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

thank you! it was very informative!

@kevinbodi7778 Год назад

I think a lot of work will be in to little use, as a lot of front end developers won't be able to carry this over into the real world (even though it's possible). Figma should be more pragmatic and in line with how the different technologies solve this. Both vanilla CSS that has animations with keyframes as well as transitions, but also acknowledge the existence of some popular animation frameworks.

@porknwithbill Год назад

Sorry your front end team sucks

@profiAcc Год назад

Totally agree, this serves just to impress the client (which usually takes this for granted bc he doesn't understand how much work it takes to make this in figma). Nonetheless, excellent job. This tutorial was very useful, so a big Thank you :)

@Meanwhile-00 Год назад

I agree with you. A lot of work for one little thing... Impossible in a real world working with brands...

@BotoKitty-sb6fi 11 месяцев назад

its for design stage. for client and consultant. agencies can save templates and reuse them for different clients. engineers come at the last stage and how they build their own stuff doesnt matter to designer consultants presenting their material. engineers think the world revolves around them and want to impact the design stage with their limited technologies. nobody will remmeber vanilla css 20 years later but design will be design no matter what medium

@mihow888 4 месяца назад

find new front end devs, problem solved :)

@carpenterisathing 3 месяца назад

I hit the like button as soon as I saw that wibbly-wobbly shoulder thing

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

Solid video. Thanks!

@loveworksinc.5025 Год назад

shift + X, i have always wanted that shortcut

@Dominich1993 Год назад

Just give us a native animation timeline for interactions like this DAMN

@lachocolatada 3 месяца назад

Oh, wow!!! I need a tutorial about every single thing on Figma by you! Oh my, the details about why choosing every move or variation is by far, the best. I love the way you explain everything, how you communicate it, and the fun you add to it! Every time I learn something new with your guidance, I enjoy and learn a lot. Thanks!!! Ps: Ps: By the way, I loved the wiggle every time!

@emmapotter2333 10 месяцев назад

Great tutorial, love every time she mentioned 'shake' and she would shake by herself lol

@emmapotter2333 10 месяцев назад

This animation is not working as interactive components on my side

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

This is like a tutorial on how to make good tutorials XD

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

I did everything but once I made de component set, doesn't work :(

@user-lz1hv7bs4p 6 месяцев назад

I lost it at the less noodles part 🤣🤣🤣

@roastbeefy0weefy Год назад

wiggle gang thank you great tutorial

@nostunas Год назад

I follow this tutorial step by step, literally doing everything as shown and when I click prototype it doesn't move. Anyone else have this problem?

@victorianduka9882 Год назад

Me too. The click works in mine but the shaking animation doesn't work.

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

exactly the same issue, the click animation works fine, but the wiggle one doesn't :(

@oproductdesigner Год назад

cool!

@punkshit120 Год назад

I want this file pls

@theminimalcode Год назад

Font ???

@anjumayoub9077 Год назад

what's the point in creating these animations, when we can't export them in supported formats like JSON, GIF etc Although it's really fun to create animations and complex prototyping inside figma ❤