How to Design an Interactive Button in Figma: For Beginners

[@DesignXstream]

📌Links Join the community here 👉 bit.ly/DX-Community Download the freebie here 👉 designxstream.gumroad.com/l/DX-Interactive-UI-Kit

[@MetalGearMk3]

I love this video so far, it's quick and right to the point!

[@DesignXstream]

Thank you so much for the kind words! I appreciate your support and I'm thrilled that you found it helpful!

[@singhswets]

Thank you so much.. working with buttons is the hardest part for me.. you made it so easy.. Thank you a lot.

[@DesignXstream]

Glad that you found it helpful! Cheers & happy learning! ✌🏼

[@Ane-genius]

I open you’re video from mobile just to give u big big like you are the best 🙏🏻👍🏻👍🏻👍🏻👍🏻 🇸🇦🇸🇦

[@DesignXstream]

Thanks buddy! That means a lot ✌🏼

[@marioskasolas9210]

Learned actually a lot on 10 min well done

[@DesignXstream]

Glad to know that! Cheers ✌🏼😃

[@geirgaseidnes7809]

Super clear instructions, great pacing. Well done, sir.

[@DesignXstream]

Cheers! I'm glad you found it useful 🙌🏼

[@abdelrahmanmorsy4944]

mate i was lost ...thank u very much very simple and easy way to teach

[@DesignXstream]

Glad you liked it! Cheers ✌🏼

[@izzajanjua555]

You actually made it sound so easy and quick! Loved it, thank you

[@DesignXstream]

Glad you liked it! Cheers ✌🏼😇

[@mominakhalid7125]

Thank you so much. Your videos are very helpful. Easy and quick.

[@DesignXstream]

Glad you found them helpful! Cheers ✌🏼

[@nareshkuppi5792]

Just what i needed. Thank you.

[@DesignXstream]

Cheers! ✌️

[@aaron4820]

A summary for this tutorial, it will teach you how to make components for buttons, such as style, icons, and how they behave visually when you hover / click on them. It does not teach you how to link up what happens to buttons after you click them if that's what you're after.

[@DesignXstream]

Perfectly described 😅

[@monikapatnaik317]

In the search of gold I found the diamond 💎 Thankyou so much it was very helpful ❤️

[@DesignXstream]

That means a lot! Glad you found it helpful ✌🏼 :)

[@niluseneviratne3709]

great video! easy to understand and follow

[@DesignXstream]

Glad you found it helpful! Cheers ✌🏼

[@fitiavanarazakandrainy8728]

Thanks for this tutorial, so help full and thanks also for the kit

[@DesignXstream]

Hey Fitiavana, I'm Glad you found it helpful! Stay tuned for the upcoming videos on this series! ✌🏼:)

[@turboteeworlds4355]

very useful video! Love from Russia 😍🥰

[@DesignXstream]

Glad it was helpful! Cheers mate ✌️

[@ustymhanuliak4554]

Love you man!

[@DesignXstream]

Cheers buddy! ✌️

[@emina-shii]

Thank you so much your video has been easy to understand and detailed! Hope you create more contents

[@DesignXstream]

Thanks for sharing your feedback! More videos coming soon.

[@maghomaaxel]

Do you have any online course? I really need it, you are very accurate in your explanation, and go straight to the point! Very nice.

[@DesignXstream]

No I don't sell any courses. Glad you found it helpful.❤️ More videos coming soon ✌🏼

[@lens8714]

Thank you! New subscribers here. 👍🏽

[@DesignXstream]

Cheers! ✌🏼

[@darshandakshapanchal2051]

Great man! Thanks

[@DesignXstream]

Glad you like it! Cheers buddy ✌🏼😃

[@gstephanie5944]

Thank you so much!!!

[@DesignXstream]

Glad you liked it! Cheers ✌🏼

[@figmaLearnerEnthusiast]

Thank you so much for the video, I wished I had found series earlier. At 0:34, on the right panel, you have Size, State, Type, Left Icon, Right Icon, and Text. How did you get Size and Text, and what does Size do?

[@figmaLearnerEnthusiast]

Figure the Text one out, due to your Interactive Dropdown video. It's a text property. Unsure as was the Size is/does though.

[@DesignXstream]

Some design systems also have Size as a parameter. Like they use buttons in different scenarios like on a open screen, or it can be used inside a card component, etc. So when it is inside a card component they expect it to be smaller in size. So for such scenarios you can also have size a parameter.

[@VolaconCarmen]

Thank you!!!

[@DesignXstream]

Cheers! ✌🏼

[@chloehobbs7029]

Very helpful thank you so much. however I have a issue that when I use the button on another frame and change the size of the button. When I present/play it the button works however it reverts to the smaller height size so is not the actual size I changed it to

[@DesignXstream]

Only if you reset the properties of the component instance it will revert to the default size. Otherwise it remains in the state you set it.

[@suliatadebayo5586]

Thank you so much

[@DesignXstream]

Cheers ✌🏼 :)

[@PremnathPrabhakaran-o9t]

Thank you

[@DesignXstream]

Cheers buddy ✌️

[@ahzaazraei9323]

Hello. How can I use these interactive elements and make me navigate to another frame when clicked?

[@DesignXstream]

You can add multiple actions to a trigger. So you just need to tap on prototype mode and add a new action 'Navigate to' and the frame.

[@ahzaazraei9323]

@@DesignXstream i tried to but it doesnt work and provide this error : "this interaction will not be triggered as interaction on instances are triggered before inherited internal interactions"

[@DesignXstream]

@@ahzaazraei9323 You need to add it in the same trigger. You can add multiple actions on a single trigger.

[@Axicial448]

@@DesignXstream well, you can only do that if you have the professional subscription

[@aquadragon2785]

Can someone tell me if we change the icons in different variants then how to fix its color property according to theme of the button?

[@DesignXstream]

Yes you can change the icons. The UI kit has different icons that can be used. If you need new then you need to add it into the component library to be able to use it.

[@bhavanireddy7565]

How did you changed that style for button it's so fast I didn't got it plzz explain once again...

[@DesignXstream]

Can you mention the duration exactly so that I can see it and explain.

[@amwalonline]

Thanks

[@DesignXstream]

Cheers ✌🏼 :)

[@AliRoomi]

what about search bar and responsive menu

[@DesignXstream]

Good suggestions I'll try to cover these components in the next videos.

[@kashafnajam965]

you have mentioned that the UI kit is free but its not free I can't download it for free plz help

[@DesignXstream]

Hey, its totally free. Gumroad link is in the description.

[@amalthankachan7569]

Sir how to upload an image inside this button. That means if you click on this button, the image uploaded on it should be downloaded. Did you how to do it?? Please replay if anyone knows about it!!!

[@DesignXstream]

By upload do you mean adding an image to the button?

[@amalthankachan7569]

@@DesignXstream yes

[@amalthankachan7569]

Sir there is a button titled "DOWNLOAD CV". Whenever I click on that button then the option to download my CV should be displayed.

[@DesignXstream]

@@amalthankachan7569 You can make use of overlay in prototype to get a pop up window.

[@amalthankachan7569]

@@DesignXstream example of any video???

[@KarthikReddy-xi7pz]

Bro can do one vid for styles

[@DesignXstream]

Now styles is moving away.. Figma is focusing on variables!

[@TechySatvik]

hooked,

[@DesignXstream]

Glad you like it! Cheers ✌️

[@mathiasbreder9911]

how export the button to powerbi?

[@DesignXstream]

Hey Mathias, I suppose powerbi has its own set of controls to stylize buttons. You cannot use Figma to export and put it there. However you can use it for reference as a design and inspect the properties on figma and apply them on your powerbi dashboard.

[@killer-sf7sg]

bhai thori urdu b use kr lia kro ☺ ziada english ho gai ya to

[@DesignXstream]

Bhai try kartha hu... mera Hindi utna acha nahi hai.

[@ro7man]

File link?

[@DesignXstream]

The UI kit is here: designxstream.gumroad.com/l/DX-Interactive-UI-Kit

[@OCBookworm]

I don't see any freebies here. Anyways, thanks for nothing!

[@DesignXstream]

😄 Pls check the description... you will find the link to the Free UI Kit.

[@kglibs]

the audacity of this dude

[@dinukalakmal1517]

Thanx, Really helpful

[@DesignXstream]

Glad it helped! 🤩

[@OvienSuccess]

Thank you

[@DesignXstream]

Cheers! ✌️