Figma Hover | Figma Button Hover Effect with Smart Animate

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

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

50% 1

Figma Playlist: • Horizontal & Vertical ...
In this video I go over how to add hover effects to your Figma prototype. I show you the full prototyping tutorial, where I create a button in Figma and then add hover effects with smart animate.
Enjoying this tutorial? Subscribe to stay up to date with my latest content: / @angeladesign737
In this video I show you:
0:00 - Intro
0:32 - How to create a button
2:42 - How to add a hover state
4:02 - How to use smart animate
5:02 - How to add a pop effect
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: www.youtube.com/watch?v=D3ZF2...
--
Gear
Microphone - amzn.to/34bDTxH
Hard Drive - amzn.to/30m5E5M
--
Let's Connect
Dribbble: dribbble.com/angeladelise
Blog: / angeladelise
--
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!

Наука

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

13 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@AlwaysExisted Год назад

New to FIGMA. This is the best button tutorial I've found. TY

@andreanieblas7892 2 года назад

This has been a great tutorial, doing this right now!

@arturt7192 2 года назад

Thank you so much. I find this software amazing. It has saved me so much time and it has almost no learning curve considering how much we can do with it.

@sergueiligostaev84 2 года назад

Thank you for sharing !

@jeremydaily Год назад

great easy to follow intro

@Tahir_Musharraf Год назад

Thanks, Really amazing

@10lucassj 2 года назад

HI. It Really helped me, Thanks this video!

@denis9971 2 года назад

Hi and thanks for the tutorial! I am working with components and of course trying to put the Hover circle into an Auto Layout does not work well. What alternative is there when working with Auto Layout to still get the circle effect on hover?

@mauricioc.almeida2482 Год назад

Thank you !

@MOHAMEDHASSAN-fk9jv 3 года назад

Great, and thanks ....

@michaelschultze3595 Год назад

Nice. Zhanks. But, are there also tutorials, if i already have a button(auto layout) with variants (hover, pressed ...) and now i want to insert animations between the states? E.g. a color bar that floats in from left to right

@2SaltyRecipes 2 года назад

Can you do these things with auto layout? Cuz I really have a hard time playing with auto layout.

@chrisraymond6618 3 года назад

How would you incorporate these frames into an entire page, so that you could get the animation effect just on the button? Or would you need to create an entire duplicate page just to animate the button hover?

@ddemilo7057 3 года назад

You used to have to set the animation to open overlay and overlay state 1 with state 2. This was frustrating as the transition or button action would then have to be assigned to the hover copy. After pitching figma to a client, this ability looks as if it is no longer available 😕

@homerobaroni1655 3 года назад

Good Question

@konstantinvaluiskii1085 2 года назад

Chris, have you found the way to get the animation work just on the button (w/o an entire duplicate page)? Thank you!

@konstantinvaluiskii1085 2 года назад

The answer is here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-73VC2KUJ1Ks.html

@Remy-lv5il Год назад

@@ddemilo7057 thank you ! For me I used the option "open overlay" and that worked almost exactlyt as I intended. It seems to close the previous state and open the overlay over it. (I thought the original would remain, it did not)

@yitinghao2305 Год назад

Hi great tutorial! thanks for record it! Can it work in components? Is there a way to reuse this hover effect of buton in my product prototype ?

@thamaratarek2272 2 года назад

Sounded like I just watched a tutorial by a Disney princess. Thanks for the tut btw :)

@nicolehart3955 3 года назад

I have several frames now with the interactions (1 for buttons, 1 for accordions, 1 for forms) but when I select Present it only shows me 1 interaction (the buttons one). Do you know why this is? It only worked when I moved the new frames to a new page. All seperate animations have the be on separate pages to work? So annoying :(

@calvinogood 3 года назад

We can set the background colors on the frame.

@uxvoin 2 года назад

You don't need to drag layers by mouse, just press ] or [ to move them up or down.

@uncutgamer350 3 года назад

Hi i have a doubt i am trying to build a Social network platform i designed in figma so i need to code in html css Pls reply mee

@tnhoang088 3 года назад

Hey your channel is pretty cool. But do you consider about changing its name because it's hard for us to search.

@lynnsim7471 Год назад

Create variations in components, then in Prototype/Select Interactions/Select While Hovering.

@hosseinhaseli9793 2 года назад

thanks i need scroll in page for one part of page content can you help me?

@pratikwadekar4981 3 года назад

Hi Angela, What was the key command that u used to hide those sidebars while showing both buttons

@angeladesign737 3 года назад

I pressed Command + \

@TheWetdonkey 2 года назад

Why does my buttons move when I enable the smart animate? It just makes an annoying tiny jump up and then back to its original position.

@mrajax_0101 3 года назад

what about interactive components

@abrchmn Год назад

Can this button animate save to SVG format?

@alaskaalaska1526 Год назад

and how do i use this now in a layout?

@jizan8344 3 года назад

Hey, ❤️

@antonior8895 2 года назад

Okay so now how do you use it on a different screen? Everyone stops there, but I haven't seen a tutorial of how to put it on an already designed screen.

@antonior8895 2 года назад

What i mean is this: when the two frames of the two states are by themselves, they work, but once you put them both in another frame, let's say, the page background, they stop working and I don't know why and I'm very frustrated by that, please help.

@angeladesign737 2 года назад

You can make the button into an interactive component and then add the component to any Artboard by going to the Assets tab (in the top left) and adding it to the page. Interactive Components Tutorial: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-73VC2KUJ1Ks.html

@antonior8895 2 года назад

@@angeladesign737 Thank you, I'll try that.

@suriyanikkaran Год назад

XD is way easier!

@terribels Год назад

Still doesn't explain HOW to use this. Like, how can you drag the animated button to your website if its already in a frame.

@uxworkshop2999 Год назад

You can add frames like this to a larger frame that has your website design. Just copy and paste it. Frames in Figma are just containers, it’s not like they are artboards that can’t contain other artboards.

@terribels Год назад

@@uxworkshop2999 Ah..artboards. I understand that part. Thanks.