No video :(

How to Add a Button Hover Effect in Figma

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

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

50% 1

In this Figma tutorial, learn how to create a button with interactive effects. You'll learn about components and variants and how to prototype Hover and Click animations. You'll be able to add a hover effect animation in Figma by the end of this tutorial!
Use Figma for Free 👉 pxlbr.link/figma
I use Screen Studio, the best screen recording software on Mac: bit.ly/PGScree...
MY TUTORIAL CHANNELS //
• Main Channel: bit.ly/PixelAn...
• Illustrator: bit.ly/PBIllust...
• Photoshop: bit.ly/PBPhotoshop
• InDesign: bit.ly/PBInDesign
• Premiere Pro: bit.ly/PBPremie...
• After Effects: bit.ly/PBAfterE...
TAKE MY CLASSES //
• Illustrator for Beginners: bit.ly/Illustr...
• Photoshop for Beginners: bit.ly/Photosh...
Download project files and other resources from the Pixel & Bracket Vault on my website: pixelandbracke...
Get Skillshare Premium for free and learn from myself and thousands of other creators: bit.ly/PBSkill...
My favorite place to get music for my RU-vid videos: bit.ly/PBEpide...
I love using StreamYard for my livestreams, video recording, and podcasts with guests. You can try it for free and get $10 off when you sign up with my link: bit.ly/PBStrea...
My two favorite RU-vid browser plugins and keyword research tools are VidIQ (bit.ly/PBVidIQ) and TubeBuddy (bit.ly/PBTubeB.... I use each and HIGHLY recommend them if you want to grow a successful RU-vid channel! (btw just pick one, having both is probably overkill... 😅)
Some of the links above may help support this channel through a small affiliate commission at no extra cost to you!
COME SAY HI //
• / pixelandbracket
• / pixelandbracket
• / pixelandbracket
• www.pixelandbra...

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

14 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@pixelandbracket Год назад

Use Figma for Free 👉 pxlbr.link/figma

@christopherhealey8599 10 дней назад

I've had this explained to me several times and each time I THOUGHT I understood and could replicate, your video has actually taught me for good. Much appreciated, Subscribed!

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

Thank you for explaining each of your steps. It's a rare thing these days.

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

this is amazing. I've tried watching so many figma videos to understand this and you're the first teacher that I can actually understand. Thank you so so much!!

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

Thank you for explaining this properly. This Button-hovering thing has been giving me a headache for over a week now.

@patrick-santamaria 6 месяцев назад

love the calm and concise way you explain. Thanks so much!

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

Thank you so much! So many other "walk-throughs" hyperspeed through this process, so I appreciate you taking the time to show it step by step. I'm just starting out in the UX world and want to learn how to do it right from the start, and this is a HUGE help in that goal!

@gloriacassidy 7 дней назад

Thank you for sharing this video. It helped me out. I pray you excel in your endeavours and for God to bless your family and you.

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

Thank you for explaining step by step and also showing how to place them in projects. Very helpful.

@CurlyMade 6 дней назад

Super helpful, thankyou! 💚

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

thank you! i always got confused in other explanation videos on buttons - this one is perfect, simple and concise, thank you!

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

A very succinct and clear walk-through on the interactive button build stuff. Thanks!

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

Thank you! I swear I watched several videos, and yours was the one that finally got this to work for me. I don't know what I was missing before, but +1 subscriber!

@wenom159 26 дней назад

Thank you. This really helped.

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

crisp and concise. to the point!

@AyeshaFazal-x2z 29 дней назад

Well explained🙌

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

Life saver! I'm considering switching from Xd to Figma and found this so useful

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

Definitely should since XD is going away!

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

this was super helpful !!! very well explained !! i just used it in my portfolio ... THANK YOU !!!

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

Thank you so much! This worked flawlessly for what I was attempting to do, and makes this so easy to work with

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

Thank you for such an amazing tutorial! 🙏

@davidostrowski679 Год назад

I've really been struggling this with goddamn simple thing. I'm just sitting in Starbucks doing this and I got it first time. I finally understand. REJOICE! Thank you for explaining it slowly and well-structured for people like me!

@pixelandbracket Год назад

Haha thank you so much for your kind words, I’m learning too!

@zubayduhabbas3550 Год назад

samee it took me time to understand this until I saw this vid !

@profex9410 19 дней назад

Busque mucho tiempo esta solucion, muchas graciasssss

@Alltheprettybubbles Год назад

This is incredibly helpful - thank you so much for this straight-forward and clear explanation!

@pixelandbracket Год назад

You’re welcome!!

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

Thank you for creating the pressed button. I want to ask you how have you created when there is a necessity for multiple buttons of the same kind to be clicked on one wireframe?

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

What is with your delayed and out of sync mouse pointer? It is quite confusing. But your tutorial was helpful so thanks.

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

This video changed my life.

@zubayduhabbas3550 Год назад

Thank youuuuuu so much you are the best instructor everrrrr

@owandaisy4147 22 дня назад

Thank you❤️❤️❤️❤️❤️❤️❤️

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

This reallllly really helped. Thank you.

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

This is really helpful!!! Thank you!😊

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

It was short and helpful!!

@MoyoTornai Год назад

Perfect video! Thank you .

@vykn80s 14 дней назад

but how to click and navigate to another frame on hover it takes the variant but on click interaction is not working

@shivanandhrajendran1049 Год назад

Very clear explanation. Could you also cover the latest update of figma Dev mode. pls

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

wonderful tutorial

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

One thing I just got asked by my client is for the focus state-like where a user is using their tab key to move around and land on the button. Do you know of a way to add a variant and an interaction for this?

@tanyash.5353 Год назад

Great tutorial. Thank you.

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

So nice video! Gret job!

@Manojkumar-xf8rq 7 месяцев назад

Thank u, Dude.. it's very helpful...

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

What do you save this as? For example, if I wanted to move this over to a Canva document, how would I do that?

@sarahakhavan8975 Год назад

Hi, could you please explain how to change the text in the hover state? I need it for a special effect.

@user-go4wx3jr9w Год назад

great job, very informative

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

it's helpfull 👍

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

freaking amazing

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

Helpfull thanks!

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

wow its amazing tips, thanks , how can i record smooth zoom like you ,what tools you use? can i know ?

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

nice dude

@user-gj5ml9ik2s 10 месяцев назад

Great tutorial, its just a shame that (like with many other Figma tutorials I watch) the UI in the video doesn't match the current version of Figma... e.g. at 5:37 my 'interaction details' panel doesn't match up with yours. I see your video is only from 3 months ago aswell, its like Figma can't even keep something the same for just a few months without changing Man I can't stand this software!

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

and now....try to add a onclick to the button and how to fix that issue... Whenever I try to add a ''onclick'' to 'default' state (the state the button starts as) whenever I HOVER over the button it goes to their ''hover'' state and this variant does not have the ''onclick'' link which means whenever a user hovers over a button it doesnt go anywhere because the 'default' state has the onclick ink, not the hover... How the Heck do I fix that?!